Arrow function expressions

 

개요

arrow function 표현식은 전통적인 함수 표현식에 대한 간단한 대안으로,

몇 가지 의미적 차이와

의도적인 사용 제한이 있어요.

 

• this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없습니다.
• new.target키워드가 없습니다.
• 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다.
• 생성자(Constructor)로 사용할 수 없습니다.
• yield를 화살표 함수 내부에서 사용할 수 없습니다.

 

 

문법

기본 문법

param => expression

(param) => expression

(param1, paramN) => expression

param => {
  statements
}

(param1, paramN) => {
  statements
}

 

기본 문법

    (param1, param2, …, paramN) => { statements }
    (param1, param2, …, paramN) => expression
    // 다음과 동일함:  => { return expression; }

    // 매개변수가 하나뿐인 경우 괄호는 선택사항:
    (singleParam) => { statements }
    singleParam => { statements }

    // 매개변수가 없는 함수는 괄호가 필요:
    () => { statements }

 

고급 문법

    // 객체 리터럴 표현을 반환하기 위해서는 함수 본문(body)을 괄호 속에 넣음:
    params => ({foo: bar})

    // 나머지 매개변수 및 기본 매개변수를 지원함
    (param1, param2, ...rest) => { statements }
    (param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }

    // 매개변수 목록 내 구조분해할당도 지원됨
    var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
    f();  // 6

 

상세설명

전통적인 익명 함수를 간단한 화살표 함수로 단계적으로 분해해 봅시다.

각 단계는 유효한 화살표 함수입니다.

// Traditional anonymous function
(function (a) {
  return a + 100;
});

// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
  return a + 100;
};

// 2. Remove the body braces and word "return" — the return is implied.
(a) => a + 100;

// 3. Remove the parameter parentheses
a => a + 100;

 

 

* Reference Site:

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions