자바스크립트에서 렉시컬 this(lexical this)란 함수가 선언된 위치를 기준으로 this가 결정되는 것을 의미합니다. 일반적인 function 키워드로 선언한 함수는 호출될 때마다 this가 새롭게 바인딩되지만, 화살표 함수(fat arrow function)는 자신만의 this를 갖지 않고 외부 스코프의 this를 그대로 상속받습니다.
화살표 함수는 이러한 렉시컬 바인딩 문제를 깔끔하게 해결해 줍니다. 또한 이름 그대로 굵은 화살표(=>) 문법을 사용하며, 코드를 간결하게 줄여 가독성을 높이는 장점도 있습니다.
문제 상황: 일반 함수에서의 this
먼저 일반 함수를 사용했을 때 발생하는 문제를 살펴보겠습니다.
$('.button1').click(function () {
setTimeout(function () {
$(this).text('demo');
}, 400);
});위 코드는 오류를 발생시킵니다. 그 이유는 setTimeout 내부의 function()이 this를 전역 객체(window)로 정의하기 때문입니다. 즉, 클릭된 버튼 요소가 아닌 전역 객체를 가리키게 되어 의도한 대로 동작하지 않습니다.
해결 방법: 화살표 함수 활용
이 문제는 화살표 함수를 사용하면 간단히 해결할 수 있습니다. 화살표 함수는 자신만의 this를 생성하지 않으므로, 외부 클릭 핸들러 함수의 this 컨텍스트를 그대로 유지합니다.
$('.button1').click(function () {
setTimeout(() => {
$(this).text('demo');
}, 400);
});위 코드에서 화살표 함수는 클릭 이벤트 핸들러의 this, 즉 $('.button1')이 가리키는 버튼 요소를 그대로 참조합니다. 따라서 400ms 후 해당 버튼의 텍스트가 'demo'로 정상적으로 변경됩니다.
정리
- 일반 함수: this가 호출 시점에 결정되며, 콜백 내부에서는 전역 객체를 가리킬 수 있음
- 화살표 함수: 자신만의 this가 없으며, 선언된 스코프의 this를 렉시컬하게 상속받음
- 콜백 함수에서 외부 this를 유지해야 할 때 화살표 함수가 가장 간편한 해결책