데브허브 | DEVHUB | 자바스크립트 - 일반 함수와 화살표 함수에서의 this는 어떤 차이점이 있을까?자바스크립트 - 일반 함수와 화살표 함수에서의 this는 어떤 차이점이 있을까?
- 일반 함수의
this는 함수가 호출된 위치(call-site)에 따라 동적으로 결정됩니다. 📞
- 화살표 함수의
this는 자신이 선언된 렉시컬 범위(lexical scope)의 this를 상속받아 고정됩니다. 🎯
- 객체 메서드 내에서
this를 사용하면 객체 자신의 프로퍼티를 직접 객체 이름으로 참조하는 것보다 훨씬 안정적으로 접근할 수 있습니다. 📦
setTimeout과 같은 비동기 콜백 함수에서 일반 함수는 this가 전역 객체(브라우저의 경우 window)를 가리킬 수 있어 예상치 못한 결과를 초래할 수 있습니다. 🌐
- 반면,
setTimeout 콜백으로 사용된 화살표 함수는 선언된 상위 스코프의 this를 유지하여, 외부 객체의 프로퍼티에 올바르게 접근합니다. 🏹
setTimeout 함수는 콜백을 등록만 할 뿐, this 컨텍스트를 직접 지정하여 호출하지 않는다는 점을 이해하는 것이 중요합니다. ⏱️
this의 동적(일반 함수) 및 정적(화살표 함수) 바인딩 차이를 이해하는 것은 자바스크립트의 핵심 개념이며, 특히 객체 지향 프로그래밍과 비동기 처리에서 중요합니다. 💡