[js] 화살표 함수(=>)는 this를 바인딩하지 않는다

📌 화살표 함수(=>)는 this를 바인딩하지 않는다

화살표 함수는 일반 함수(function)과 다르게 this를 자체적으로 바인딩하지 않는다.
즉, 화살표 함수 내부에서 this를 사용하면, 자신이 속한 스코프의 this를 그대로 가져온다(lexical this).

 

📌 1. 일반 함수와 화살표 함수의 this 차이

✅ (1) 일반 함수에서의 this

일반 함수(function)에서 this는 함수를 호출한 객체에 따라 달라짐.

const obj = {
    value: 42,
    normalFunction: function() {
        console.log(this.value); // obj를 가리킴 (this === obj)
    }
};

obj.normalFunction(); // 출력: 42

일반 함수(function)는 this를 호출한 객체(obj)에 바인딩한다.

 

 

✅ (2) 화살표 함수에서의 this

화살표 함수는 자기 자신(함수)에게 this를 바인딩하지 않고, 자신이 선언된 위치의 this를 그대로 사용한다.

const obj = {
    value: 42,
    arrowFunction: () => {
        console.log(this.value); // this는 obj가 아니라 외부(전역) 스코프를 가리킴
    }
};

obj.arrowFunction(); // 출력: undefined (전역 객체에서 value가 없기 때문)

화살표 함수에서는 this가 obj가 아니라, obj를 감싸는 외부 스코프(전역 window 또는 global)를 가리킨다.