실행 컨텍스트란?

실행 컨텍스트란 무엇인가?

실행 컨텍스트는 JavaScript 코드가 실행되는 환경을 관리하는 추상적인 개념입니다. 마치 연극의 무대와 같이, 코드가 실행될 때 필요한 모든 정보를 담고 있는 특별한 공간이라고 생각하면 됩니다.

 

실행 컨텍스트의 세 가지 주요 구성 요소

1. Variable Environment (변수 환경)
   • 함수 내부의 변수, 함수 선언, 매개변수를 저장
   • 코드에서 선언된 변수들의 메모리 공간
2. Lexical Environment (어휘적 환경)
   • 현재 컨텍스트의 식별자(변수, 함수) 정보
   • 외부 환경에 대한 참조 포함
3. This Binding (this 바인딩)
   • 현재 실행 컨텍스트에서 this 키워드의 값 결정

 

실행 컨텍스트의 생성 과정

1. 생성 단계 (Creation Phase)

function exampleFunction(a) {
    var b = 10;
    function innerFunction() {
        console.log(a + b);
    }
    return innerFunction;
}

let closure = exampleFunction(5);

이 예제에서 exampleFunction이 호출되면 다음과 같은 일이 발생합니다:

• 매개변수 a의 값 (5) 저장
• 변수 b를 undefined로 초기화
• 내부 함수 innerFunction 생성
• 스코프 체인 설정

2. 실행 단계 (Execution Phase)

실제 코드 실행:

• 변수 b에 10 할당
• 함수 반환

 

실행 컨텍스트의 종류

전역 실행 컨텍스트

• 코드 실행 시 가장 먼저 생성
• 전역 객체(window in 브라우저, global in Node.js) 관리

함수 실행 컨텍스트

• 함수가 호출될 때마다 새로 생성
• 해당 함수만의 고유한 실행 환경 제공

블록 실행 컨텍스트 (ES6+)

• let, const로 선언된 변수의 범위 관리

 

실행 컨텍스트 스택 (Call Stack)

function first() {
    second();
    console.log('First function');
}

function second() {
    third();
    console.log('Second function');
}

function third() {
    console.log('Third function');
}

first();

실행 순서:

1. 전역 실행 컨텍스트 생성
2. first() 호출 → first 컨텍스트 스택에 추가
3. second() 호출 → second 컨텍스트 스택에 추가
4. third() 호출 → third 컨텍스트 스택에 추가
5. 역순으로 실행 및 컨텍스트 제거

Third function
Second function
First function

 

클로저와 실행 컨텍스트

function outerFunction(x) {
    let y = 10;
    
    function innerFunction() {
        console.log(x + y);
    }
    
    return innerFunction;
}

let closure = outerFunction(5);
closure(); // 15 출력

클로저는 실행 컨텍스트의 어휘적 환경을 "기억"하는 함수입니다. outerFunction의 실행 컨텍스트가 종료된 후에도 x와 y에 접근할 수 있습니다.

주의할 점

• 실행 컨텍스트는 메모리를 소비합니다
• 과도한 중첩 함수나 클로저는 메모리 누수를 야기할 수 있음
• 성능에 영향을 줄 수 있으므로 신중하게 사용해야 함

 

결론

실행 컨텍스트는 JavaScript의 핵심 메커니즘으로, 코드 실행의 "무대 뒤"에서 일어나는 복잡한 과정을 관리합니다. 이를 이해하면 JavaScript의 작동 원리를 더 깊이 이해할 수 있습니다.