JavaScript 화살표 함수 ( Arrow function, ES6 )

JavaScript Arrow function ( 화살표 함수 )

익명함수를 화살표 형태로 간략하게 쓸 수 있는 방법
ES6(ES2015)에서 나옴

 

특징

1. function 표현에 비해 구문이 짧다
2. this, arguments, super 등을 바인딩하지 않음
3. 메소드 선언에 사용할 수 없다prototype에 사용할 수 없다
4. addEventListener 함수의 콜백 함수로 사용할 수 없다
5. 생성자로 사용할 수 없다
6. 항상 익명이다

2번에 추가로 설명을 보태자면
원래 자바스크립트의 this는 함수 호출 패턴에 따라 this에 바인딩되는 객체가 달라진다.
Arrow function은 항상 자신을 포함하는 외부 scope에서 this를 받는데 이를 Lexical this라 한다.
Arrow function을 사용하면 this를 보다 직관적으로 사용할 수 있다.

 

사용법

1. 매개변수가 없을 때

// ES5
function () { ... }

// ES6
() => { ... }

2. 매개변수가 한 개일 때

// ES5
function (x) {
  return x * x
}

// ES6
x => { return x * x }
// or
x => x * x

인자가 한개이면 괄호를 생략 가능하며,
함수의 구문이 한줄이라면 중괄호와 리턴을 생략할 수 있다.

3. 매개변수가 두 개 이상일 때

// ES5
function (x, y) {
  return x + y;
}

// ES6
(x, y) => x + y
(x, y) => { return x + y }

 

마무리

개인적으로 공부한 내용을 정리한 것이기 때문에 반말을 사용한 점 양해 부탁드립니다.
잘못된 부분이나 피드백이 있으시다면, 댓글에 남겨주시면 감사하겠습니다!