실행 컨텍스트 (Execution Context)

실행 컨텍스트란?

자바스크립트 코드가 실행되는 환경을 일컫는다.

컨텍스트 종류

실행 컨텍스트에는 3가지가 존재한다.

1. Global 실행 컨텍스트
2. Functional 실행 컨텍스트
3. Eval 실행 컨텍스트

• Global 실행 컨텍스트
  • 브라우저에서 파일이 처음으로 로드되었을 때, 자동으로 생성되는 실행 컨텍스트
  • 한 개만 생성이 가능하다.
    
    
• Functional 실행 컨텍스트
  • 함수 호출 시 컨테스트가 생성이 된다.
  • 여러 개 생성이 가능하다.
  • Global 실행 컨텍스트의 모든 코드에 접근 가능하다.
  • 브라우저에서 JS코드를 실행 시, strict 모드 시 this는 undefined를 의미하고 strict 모드가 아니면 window 객체를 가르킨다.
    
    
• Eval 실행 컨텍스트
  • eval 함수의 컨텍스트

실행 컨텍스트 스택

스크립트의 모든 컨텍스트들이 LIFO 구조에 따라 쌓이는 스택 데이터 구조

❓ 실행 컨텍스트 스택과 콜 스택은 같은건가요?
📎 stack overflow 에 의하면 같은 거라고 한다.

컨텍스트 생성 단계

자바스크립트 엔진은 실행 컨텍스트를 생성 할 때 2개의 단계를 밟는다.

1. 생성 단계 ( Creation Phase )
2. 실행 단계 ( Execution Phase )

• 생성 단계 ( Creation Phase )
  
  
  • 이 단계에서는 함수는 호출 했지만 실행 하지는 않는 단계이다.
  • 엔진이 컴파일링을 진행하며 함수의 모든 코드들을 스캔한다.
  • 이 단계에서는 3가지의 일이 진행된다.
    
    
    1. 활성 객체 생성
       • 함수 내부의 모든 변수, 함수의 인자 그리고 내부의 함수 정보를 담고 있는 객체
       • 특별한 객체이기에 __proto__ 프로퍼티도 갖고 있지 않다.

         변수 객체와 활성 객체는 함수 컨텍스트에서는 같은 객체이다. 그러나 전역 스코프에서는 활성 객체라고 불리지 않는다. 변수 객체로 불린다.

    2. 스코프 체인 생성
       • 스코프 체인에는 현재 함수의 변수 객체(활성 객체)의 리스트를 담고 있다.
       • 전역 실행 컨텍스트의 변수 객체도 담고 있다.
         
         
    3. this를 결정한다.
       • this를 이니셜라이징한다.
• 실행 단계 ( Execution Phase )
  • 이 단계에선, JS 엔진이 변수 객체 안에 있는 변수들에게 값을 할당하기 위해 함수 코드를 다시 읽는다.
  • 그런 뒤, 코드를 실행한다.
    

실행 컨텍스트 객체

executionContextObj = {
 variableObject: {}, // All the variable, arguments and inner function details of the funA
 scopechain: [], // List of all the scopes inside which the current function is
 this // Value of this 
}

컨텍스트 생성 과정

생성 단계

function funA (a, b) {
  var c = 3;
  
  var d = 2;
  
  d = function() {
    return a - b;
  }
}


funA(3, 2);

이 함수의 실행 컨텍스트 객체의 변수 객체 프로퍼티는 이렇게 정의된다. ⬇️

executionContextObj = {
 variableObject = {
  argumentObject : {
    0: a,
    1: b,
    length: 2
  },
  a: 3,
  b: 2
  c: undefined,
  d: undefined then pointer to the function defintion of d
}, // All the variable, arguments and inner function details of the funA
 scopechain: [executionFunction variable object, Global execution context variable object], // List of all the scopes inside which the current function is
 this // Value of this 
}

argumentObject 는 인자의 길이와 인자의 값이 아닌 이름을 값으로 갖는다.

그리고 함수 안의 선언된 변수들은 undefined로 초기화 된다.

함수 내부의 선언된 함수 같은 경우에는 함수를 힙에 저장한 뒤, 함수의 이름을 변수 객체의 프로퍼티, 값은 힙에 저장된 곳을 가르킨다.

scope chain 같은 경우에는 현재 실행 중인 함수의 변수 객체와 전역 컨텍스트의 변수 객체를 담는다.

실행 단계

실행 단계에선 undefined로 초기화 되었던 값을 재할당하기 위해 다시 코드를 순회한다.

executionContextObj = {
 variableObject = {
  argumentObject : {
    0: a,
    1: b,
    length: 2
  },
  a: 3,
  b: 2,
  c: 3,
  d: undefined then pointer to the function defintion of d
}, // All the variable, arguments and inner function details of the funA
 scopechain: [executionFunction variable object, Global execution context variable object], // List of all the scopes inside which the current function is
 this // Value of this 
}

📎 참조

Execution context, Scope chain and JavaScript internals