JavaScript에서 this 바인딩과 실행 컨텍스트는 코드 내에서 함수가 실행될 때 동작하는 방식에서 차이가 있습니다. 이 둘을 이해하는 것이 JavaScript를 깊이 있게 이해하는 핵심 요소 중 하나입니다.

실행 컨텍스트

JavaScript 엔진은 코드를 실행할 때 실행 컨텍스트를 만들어 실행 환경을 설정합니다. 실행 컨텍스트는 함수가 호출될 때 생성되며, 함수의 실행이 끝나면 제거됩니다. 실행 컨텍스트에는 해당 함수의 호출, 변수, 매개 변수, this 값 및 스코프 정보가 저장됩니다.

this 바인딩

this는 실행 중인 함수의 소유자 객체를 가리킵니다. 그러나 어떤 함수의 this가 될지는 실행 컨텍스트에 따라 달라집니다.

전역 실행 컨텍스트에서의 this

전역 실행 컨텍스트에서 this는 전역 객체를 가리킵니다. 브라우저 환경에서는 window 객체이고, Node.js 환경에서는 global 객체입니다.

함수 실행 컨텍스트에서의 this

함수 안에서 this는 함수를 호출할 때 해당 함수를 소유하고 있는 객체를 가리킵니다. 그러나 화살표 함수(=>)의 경우, this는 함수가 정의된 곳의 렉시컬 스코프를 가리킵니다.

결론

this 바인딩은 실행 컨텍스트에 따라 달라지며, 함수가 어떻게 호출되느냐에 따라 this가 동적으로 바인딩됩니다. 이를 이해하면 JavaScript에서 this의 동작을 더 잘 이해할 수 있습니다.

참조: MDN web docs - this

// 전역 실행 컨텍스트에서의 this
console.log(this); // window or global object

// 함수 실행 컨텍스트에서의 this
const obj = {
  func() {
    console.log(this);
  }
}
obj.func(); // obj

// 화살표 함수에서의 this
const arrowFunc = () => {
  console.log(this);
}
arrowFunc(); // window or global object