1. Arrow function this
자바스크립트의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다. 다시 말해, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.
화살표 함수는 일반 함수와 달리 this에 바인딩할 객체가 정적으로 결정된다. 동적으로 결정되는 일반함수와 달리 화살표함수의 this는 언제나 상위스코프의 this를 가르킨다. 이를 Lexcal this라고 한다. 밑에 예제를 보면 화살표함수의 this와 일반함수의 this의 차이를 볼 수 있다.
위에 예제는 Greeting.prototype.name에 인자를 배열로 받는 것이다. 두 예제의 차이는 첫 예제는 콜백함수를 일반함수로 작성하였고 두번째 예제는 화살표함수로 작성하였다.
첫번째 예제를 보면 콜백함수를 일반함수로 작성했기 때문에 this의 값이 상위 스코프로 가는 것이 아니라 window를 가르키는 것을 볼 수 있다. 반면에 두번째 예제는 콜백함수를 화살표함수로 작성을 해서 this의 값이 window가 아닌 상위 스코프인 Greeting을 가리키는 것을 볼 수 있다.
2. 화살표함수를 사용해서는 안되는 경우
1). 메소드
화살표 함수로 메소드를 정의하는 것은 피해야 한다.
위 예제의 경우 메소드를 화살표함수로 정의했다. 메소드로 정의한 화살표 함수 내부의 this는 메소드를 소유한 객체, 즉 메소드를 호출한 객체를 가리키지 않고 상위 컨택스트인 전역 객체 window를 가리킨다. 따라서 화살표 함수로 메소드를 정의하는 것은 바람직하지 않다.
이와 같은 경우 메소드를 위한 단축표기법인 ES6의 축약 메소드 표현을 사용하는 것이 좋다.
2). 생성자 함수
화살표 함수는 생성자 함수로 사용할 수 없다. 생성자 함수는 prototype 프로퍼티를 가지며 prototype 프로퍼티가 가리키는 프로토타입 객체의 constructor 를 사용한다. 하지만 화살표 함수는 prototype프로퍼티를 가지고 있지 않다.
3). addEventListener 함수의 콜백 함수
addEventListener 함수의 콜백 함수를 화살표 함수로 정의하면 this가 상위 컨택스트인 전역 객체 window를 가리킨다.
