1. 화살표 함수의 선언
화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다. 하지만 모든 경우 화살표 함수를 사용할 수 있는 것은 아니다. 화살표 함수의 기본 문법은 아래와 같다.
2. 화살표 함수의 호출
화살표 함수는 익명 함수로만 사용할 수 있다. 따라서 화살표 함수를 호출하기 위해서는 함수 표현식을 사용한다.
ES5
ES6
3. this
3-1. 일반 함수의 this
(B) 지점에서 사용한 this는 아마도 생성자 함수 Prefixer가 생성한 객체(위 예제의 경우 pre)일 것으로 기대하였겠지만, 이곳에서 this는 전역 객체 window를 가리킨다. 이는 생성자 함수와 객체의 메소드를 제외한 모든 함수(내부 함수, 콜백 함수 포함) 내부의 this는 전역 객체를 가리키기 때문이다.
콜백 함수 내부의 this가 메소드를 호출한 객체(생성자 함수의 인스턴스)를 가리키게 하려면 아래의 3가지 방법이 있다.
3-2. 화살표 함수의 this
일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.
화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 동적으로 결정되는 일반 함수와는 달리 화살표 함수의 this 언제나 상위 스코프의 this를 가리킨다. 이를 Lexical this라 한다. 화살표 함수는 앞서 살펴본 Solution 3의 Syntactic sugar이다.
화살표 함수는 call / apply / bind 메소드를 사용하여 this를 변경할 수 없다.
4. 화살표 함수를 사용해서는 안되는 경우
4-1. method
화살표 함수로 메소드를 정의하는 것은 피해야 한다.
위의 예제의 경우, 메소드로 정의한 화살표 함수 내부의 this는 메소드를 소유한 객체, 즉 메소드를 호출한 객체를 가리키지 않고 상위 컨텍스트인 전역객체 window를 가리킨다. 따라서 화살표 함수로 메소드를 정의하는 것은 바람직하지 않다.
이와 같은 경우는 메소드를 위한 단축 표기법인 ES6의 축약 메소드 표현을 사용하는 것이 좋다.
4-2. prototype
화살표 함수로 정의된 method를 prototype에 할당하는 경우도 동일한 문제가 발생한다.
화살표 함수로 정의된 method를 prototype에 할당해 보자.
화살표 함수로 객체의 method를 정의하였을 때와 같은 문제가 발생한다.
따라서 prototype에 method를 할당하는 경우, 일반 함수를 할당한다.
4-3.생성자 함수
화살표 함수는 생성자 함수로 사용할 수 없다. 생성자 함수는 prototype의 property를 가지며,
prototype의 property가 가리키는 prototype 객체의 constructor를 사용한다.
하지만 화살표 함수는 prototype property를 가지고 있지 않다.
4-4. addEventListener 함수의 callback 함수
addEventListener 함수의 콜백 함수를 화살표 함수로 정의하면 this가 상위 컨택스트인 전역 객체 window를 가리킨다.
따라서 addEventListener 함수의 callback 함수 내에서 this를 사용하는 경우,
function 키워드로 정의한 일반함수를 사용하여야 한다.
일반함수로 정의된 addEventListener함수의 callback함수 내부의 this는 addEventListener에 바인딩된 요소(currentTarget)를 가리킨다.
