자바스크립트 화살표 함수

화살표 함수(arrow function)

함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있다.

화살표 함수라는 이름은 문법의 생김새를 차용해 지어졌다.

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

• 인자 arg1..argN를 받는 함수 func가 만들어진다.
• 함수 func는 화살표 (=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환한다.

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

• (a,b)(a, b) => a+b는 인수 a와 b를 받는 함수이고, (a, b)=> a+b는 실행되는 순간 표현식 a+b를 평가하고 그 결과를 반환

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();

• 위의 예시와 같이 함수를 동적으로 만들수 있다.

 

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

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

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