모던 JavaScript 튜토리얼을 읽고 정리하였습니다.

화살표 함수 기본

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

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

이렇게 코드를 작성하면 인자 arg1..argN를 받는 함수 func이 만들어진다. 함수 func는 화살표 (=>) 우측의 표현식을 평가하고 평가 결과를 반환한다. 위의 예시는 아래의 함수 표현식과 같다.

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

좀 더 구체적인 예시를 살펴보자. (a, b) => a + b는 인수 a와 b를 받는 함수이다. (a, b) => a + b는 실행되는 순간 a + b를 평가하고 그 결과를 반환한다.

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

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

• 인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있다.

let double = n => 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;
};

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