[JS] 실행 컨텍스트 (Execution Context)

 

실행 컨텍스트

함수가 실행되는 환경. 즉, 실행할 코드에 제공할 환경 정보(변수, 함수, this, Scope)들을 모아놓은 객체

 

실행 컨텍스트는 함수 호출 시 생성된다. 외에도 실행 컨텍스트를 구성하는 방법으로는 아래와 같다.

• 전역공간 (this, window 포함 / 자동 생성)
• eval()함수 (보안의 문제로 사용 x)
• 블록 {} (ES6추가)

실행 컨텍스트 스택

실행컨텍스트는 전역에서 시작해, 함수가 호출될 때 스택에 쌓인다.

let a = 10;
function f1() {
    let b = 20;
    function print(v) {
        console.log(v)
    }
    function f2() {
        let c = 30;
        print(a + b + c)
    }
    f2();
}
f1();

1. 전역 컨텍스트가 콜 스택에 담긴다.

2. f1()함수가 호출되어 f1()함수에 대한 환경정보 수집 후 컨텍스트를 생성하여 바로 위에 스택을 쌓는다.

3. f1()함수 실행 후 f2()함수가 호출되어 f2()실행 컨텍스트 생성, print()함수 호출 되어 print() 실행 컨텍스트 생성하여 스택이 최상단에 쌓인다.

4. 실행이 끝난 함수들은 차례대로 콜스택에서 제거 된다.

 

실행 컨텍스트 구성

Variable Environment

컨텍스트 내의 식별자들에 대한 정보, 외부 환경 정보, 선언 시점의 Lexical Environment의 스냅샷을 가지고 있다. (변경사항 반영 x)

 

Lexical Environment

처음엔 Variable Environment와 같지만, 주로 활용하는 것은 Lexical Environment.

변경사항이 실시간으로 반영되며 호이스팅과 스코프 체인이 형성 된다.

 

실행 컨텍스트 생성 과정

생성단계

함수 선언문, 함수 표현식, 변수 등을 읽어 실행 컨텍스트에 저장한다. (함수 선언문 외 변수는 값 저장 x)

 

실행단계

선언 했던 변수 값 할당, 코드 실행