팻 애로우(fat arrow) 함수는 이름 그대로 코드의 줄 수를 줄이는 데 큰 도움이 되는 문법입니다. => 기호가 굵은 화살표처럼 생겼다고 하여 이런 이름이 붙었으며, function 키워드를 매번 반복해서 작성해야 하는 번거로움도 덜어 줍니다.
다만 화살표 함수는 일반적으로 메서드가 아닌 함수에 사용하는 것이 권장됩니다. 그 이유는 화살표 함수가 자신만의 this를 갖지 않고, 정의된 위치를 둘러싼 렉시컬 스코프(lexical scope)의 this를 그대로 물려받기 때문입니다. 따라서 객체 리터럴 안에 메서드처럼 정의하면 일반 함수와 달리 this가 해당 객체를 가리키지 않습니다.
화살표 함수와 일반 함수의 this 비교 예제
아래 코드는 하나의 객체에 화살표 함수와 일반 함수를 함께 정의한 뒤, 각각 호출했을 때 this가 어떻게 다르게 동작하는지 확인하는 예제입니다.
<!DOCTYPE html>
<html>
<body>
<script>
'use strict';
var ob1 = {
val1: 75,
val2: 100,
x: () => document.write(this.val1, this),
y: function() {
document.write("<br>" + this.val1, this);
},
z: function() {
document.write("<br>" + this.val2, this);
}
}
ob1.x();
ob1.y();
ob1.z();
</script>
</body>
</html>
실행 결과 분석
ob1.x(): 화살표 함수이므로this가 객체ob1이 아닌 외부 스코프를 가리킵니다. strict 모드에서는 전역 객체 바인딩이 없기 때문에this.val1은 undefined로 출력됩니다.ob1.y(),ob1.z(): 일반 함수이므로this가 호출 주체인ob1객체를 가리켜 75와 100이 정상적으로 출력됩니다.
정리
객체의 메서드를 정의할 때는 일반 함수나 ES6의 축약 메서드 문법(y() { ... })을 사용하는 것이 안전합니다. 화살표 함수는 배열 순회 콜백처럼 this 바인딩이 필요 없는 상황에서 활용하는 것이 바람직합니다.