GRAMMAR

Draft
  • account_tree
  • bug_report

Arrow function

ECMAScript 6(2015)

ES6에 추가된 화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧아 코드 최적화에 도움을 준다.

소개

화살표를 이용한 함수 표현은 기존의 function 키워드를 이용한 표현에 비해 매우 짧다. 특히 이벤트의 핸들러로 등록할 때 그리고 맵 함수로써 이 화살표 표현식 함수는 유용하다.

화살표 함수는 다음과 같은 특징을 가지고 있으므로 주의해서 사용한다.

  • 자신의 this, arguments, super, new.target을 바인딩(binding)하지 않는다.
  • 이벤트의 핸들러로 사용하는 경우에는 this는 이벤트 대상인 자신을 바인딩(binding)하지 않는다.
  • 익명 함수이다.

패턴

예시 1

(param1, param2, ..., paramN) => { statements }

받을 매개 변수를 소괄호안에 콤마로 구분하여 작성하고 '=>' 다음에 중괄호 안에 코드를 작성한다.

예시 2

(param1, param2, ..., paramN) => expression

'=>' 다음에 중괄호 없이 작성된 한줄 코드는 다음 아래와 똑같다.

(param1, param2, ..., paramN) => { return expression; }

예시 3

(param) => { statements }
param => { statements }

위의 두 개의 경우는 모두 동일하다.

예시 4

() => { statements }

매개 변수가 없는 경우에는 '=>'  앞에 빈 소괄호를 작성한다.