자바스크립트 기본 - 화살표 함수 기본

함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이 있다. 화살표 함수를 사용하는 것이다.

화살표 함수 작성 방법은 다음과 같다.

let func = (arg1, arg2, ...argN) => expression

이렇게 코드를 작성하면 함수 func 이 만들어진다. 함수 func 는 화살표 우측 표현식을 평가한 뒤 결과를 반환한다. 아래 함수의 축약 버전이라 할 수 있다.

let func = function(arg1, arg2, ...argN) {
  return expression;
};

구체적인 예시를 살펴보자!

let sum = (a, b) => a + b;

/* 위 화살표 함수는 아래 함수의 축약 버전입니다.

let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3

인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략해 길이를 좀 더 줄일 수 있다.

let double = n => n * 2;
// let double = function(n) { return n * 2 }과 거의 동일합니다.

alert( double(3) ); // 6

인수가 하나도 없을 때는 괄호를 비워놓을 수 있다. 단 괄호는 생략할 수 없다.

let sayHi = () => alert("안녕하세요!");

sayHi();

화살표 함수는 함수 표현식과 같은 방법으로 사용할 수 있다.

let age = prompt("나이를 알려주세요.", 18);

let welcome = (age < 18) ?
  () => alert('안녕') :
  () => alert("안녕하세요!");

welcome();

함수 본문이 한 줄인 간단한 함수는 화살표 함수를 사용해 만드는 것이 편리하다.

본문이 여러 줄인 화살표 함수

평가해야 할 표현식이 여러 줄인 경우, 중괄호 블록 안에 코드를 넣어주고 return 지시자를 사용해 명시적으로 결괏값을 반환해 주면 된다.

let sum = (a, b) => {  // 중괄호는 본문 여러 줄로 구성되어 있음을 알려줍니다.
  let result = a + b;
  return result; // 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 합니다.
};

alert( sum(1, 2) ); // 3

화살표 함수에는 이외에도 다양한 기능이 있다. 추후 다시 다뤄보기로 하자!!