1. 실행 컨텍스트와 this의 동적 바인딩
2. 렉시컬 컨텍스트와 this의 정적 바인딩
3. 예시 - 익명함수와 애로우함수의 차이

실행 컨텍스트와 렉시컬 컨텍스트

실행 컨텍스트는 실행 중인 코드의 실행에 필요한 정보를 담고 있는 개념입니다. 실행 컨텍스트는 변수 객체, 스코프 체인, this 값으로 구성됩니다. 변수 객체는 스코프 내의 변수, 함수 선언 및 함수 매개변수의 정보를 담고 있으며, 스코프 체인은 변수 및 함수 검색에 사용되는 스코프 계층 구조를 형성합니다. this 값은 실행 컨텍스트를 생성한 방법에 따라 동적으로 결정됩니다.

반면, 렉시컬 컨텍스트는 실행 컨텍스트의 일부로서, 스코프 체인과 변수 객체를 포함하는 데이터 구조입니다. 렉시컬 컨텍스트는 렉시컬 환경 레코드와 외부 환경 참조로 구성됩니다. 렉시컬 환경 레코드는 변수와 함수 선언 등의 정보를 담고 있으며, 외부 환경 참조는 현재 실행 컨텍스트의 외부 환경에 대한 참조를 가지고 있습니다.

실행 컨텍스트와 this의 동적 바인딩

this 키워드는 실행 컨텍스트를 생성한 방법에 따라 동적으로 결정됩니다. 함수 호출 시 this는 함수를 호출한 객체에 바인딩됩니다. 이를 동적 바인딩이라고 합니다. 예를 들어, 메서드로 호출된 함수 내부의 this는 해당 메서드를 호출한 객체를 가리킵니다. 함수가 단독으로 호출되었을 경우, this는 전역 객체를 가리키게 됩니다.

렉시컬 컨텍스트와 this의 정적 바인딩

반면, 렉시컬 컨텍스트는 this를 정적으로 바인딩합니다. 렉시컬 컨텍스트는 함수가 정의된 위치에 따라 this를 결정합니다. 애로우 함수는 렉시컬 스코프를 사용하므로, 상위 스코프의 this를 그대로 참조합니다. 따라서, 애로우 함수 내부의 this는 애로우 함수를 둘러싼 컨텍스트의 this와 동일합니다.

예시 - 익명함수와 애로우함수의 차이

function Person(name) {
    this.name = name;
    this.getName = function () {
        return this.name;
    }
    this.getNameArrowFunction = () => { return this.name }
}

const p1 = new Person('철수');
console.log(p1.getName()); //철수
console.log(p1.getNameArrowFunction()); //철수

const 실행컨텍스트 = p1.getName;
const 렉시컬컨텍스트 = p1.getNameArrowFunction;
console.log(실행컨텍스트());  //undefined
console.log(렉시컬컨텍스트());//철수

실행컨텍스트()의 결과가 undefined은 이유는 실행컨텍스트()에 진입하여 실행컨텍스트를 만들때 함수의 안의 this가 바인딩할 객체가 없기 때문입니다. 반대로 getName()을 할때는 getName의 실행컨텍스트가 만들어질때 this의 바인딩을 p1으로 해줍니다. 따라서 getName()의 this.name은 p1.name즉 철수를 가리키게 됩니다.

그러나 arrow함수의 this는 함수가 선언된 위치에서 바깥쪽 스코프의 this를 그대로 가리킵니다. 이는 this 바인딩을 함수 호출 시점이 아니라 함수 정의 시점에 수행하는 일반 함수와는 다른 동작입니다.

애로우 함수의 this가 동작하는 방식은 렉시컬 스코프에 의해 결정되는 것이지만, 일반 함수의 this는 함수가 호출되는 방식에 따라 동적으로 결정됩니다.

결론

this의 동적 바인딩은 실행 컨텍스트에 따라 동적으로 결정되는 반면, 렉시컬 컨텍스트는 this를 정적으로 바인딩합니다. 이를 통해 코드의 실행과 this의 동작을 이해하고 적절하게 활용할 수 있습니다.

참고문헌:

Mozilla Developer Network. "Execution Context." (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/Execution_Context)
Mozilla Developer Network. "this." (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)