실행 컨택스트

실행 컨텍스트란

   실행할 코드에 제공할 환경 정보들을 모아놓은 객체

   자동으로 생성되는 전역공간의 실행컨텍스트와  evail 을 제외하면 실행컨택스트를 구성하는 방법은 함수를 실행 하는 것뿐이다.

 

실행 컨텍스트의 역활

•   코드 실행 시 스코프, 식별자, 코드실행 순서 등의 관리 한다.
•   소스코드를 실행 하는 데 필요한 환경을 제공하고 코드의 실행 결과를 관리한다.
•   식별자를 등록하고 관리하는 스코프와 실행 순서 관리를 구현한 내부 메커니즘 이다.
•   식별자와 스코프는 Laxical Environment (렉시컬 환경)으로 관리 한다.
•   실행순서는 실행 컨텍스트 스택으로 관리 한다

 

 

< 실행 컨텍스트 코드 예제 >

   var x = 1;
   const y = 2;
     function outer(a) {              // outer (시작)
        var x = 3;
        const y = 4;
        function inner(b) {           // inner  (시작)
          var x = 5;
          const y = 6;
          function ininner(c) {       // in-inner (시작)
            var x = 7;
            const y = 8;
            console.log(a + b + c + x + y);
            console.log("ininner");
          }                            // in-inner (끝)
          ininner(30);
          console.log("inner");
        }
        inner(20);                    // inner  (끝)
        console.log("outer");
     }                                // outer (끝)
   outer(10);

 

 

1. 전역 코드 평가

   1) 전역실행 컨택스트 생성  1️⃣

   2) 전역 렉시컬 환경 생성 2️⃣ 

      2.1) 전역 환경 레코드 생성 3️⃣

        - 객체 환경 레코드 생성 4️⃣ : var 키워드 와 함수 , 객체를 관리                       

        - 선언적 환경 레코드 생성 5️⃣ :   let, const 키워드로 선언한 전역 변수 관리 ( var, let, const 키워드 참조)

      2.2) this 바인딩 6️⃣

      2.3) 외부 렉시컬 환경 참조 7️⃣

  var 와 outer 함수는 전역객체의 프로퍼티와 매서드로 된다.

  var 키워드는 선언단계 및 초기화 단계가 동시에 진행.

  let 과 const 는 전역객체의 프로퍼티가 되지 않고( window.y 로 참조 불가) 선언적 환경 레코드에 존재

  그리고 let 과 const 는 선언단계와 초기화 단계가 분리 되어 진행 되어 선언문에 도달전 까지 일시적 사각지대에 빠진다.

                                                                                                                                         (TDZ : Temperal Dead Zone)

 

2. 전역 코드 실행

    x, y 값이 할당 된다.

 

 

3. outer 함수 코드 평가

  1) 함수 실행 컨텍스트 생성

  2) 함수 Lexical 환경 생성

  3, 4) 함수 환경 레코드 생성

  5) this 바인딩

  6) 외부 Lexical 환경에 대한 참조

4. outer 함수 코드 실행

 식별자 결정을 위해 실행중인 실행컨텍스트의 렉시컬 환경에서 식별자를 검색

 현재 실행중인 실행 컨텍스트는 outer 함수 실행컨텍스트이므로 outer 함수 렉시컬 환경에서 식별자를 검색 하여 바인딩한다. 

 

 

 

5. inner 함수 코드 평가

  1) 함수 실행 컨텍스트 생성

  2) 함수 Lexical 환경 생성

  3, 4) 함수 환경 레코드 생성

  5) this 바인딩

  6) 외부 Lexical 환경에 대한 참조

6. inner 함수 코드 실행

 

 

 

 

7. in-inner 함수 코드 평가

  1) 함수 실행 컨텍스트 생성

  2) 함수 Lexical 환경 생성

  3, 4) 함수 환경 레코드 생성

  5) this 바인딩

  6) 외부 Lexical 환경에 대한 참조

8. in-inner 함수 코드 실행

in-inner 함수의 코드가 순차적으로 실행 되면서 매개변수에 인수가 할당된다.

console.log( a+b+c+x+y) 가 실행 된다.

consele.log("ininner") 가 실행 된다.

  1) console 식별자 검색

    여기서 console 의 식별자는 함부 내부에는 없기 때문에 상위 렉시컬환경을 타고 가다가 전역렉시컬 환경에서

    참조를 해서 찾는다. 

  2) log 메서드 검색

    여기에서도 객체 환경 레코드에서 console 식별자를 찾고 log 메드를 실행 시킨다.

  3) 표현식 평가

    a+b+c+x+y  

    a 는 outer 함수 렉시컬 환경에서

    b는 inner 함수 렉시컬 환경에서

    c와 x,y 는 현재 실행 컨텍스트인 in-inner 함수 렉시컬 환경에서 검색된다.

   4) console.log 메서드 호출

    표현식이 평가되어 생성된 값 10+20+30+7+8 = 45 를 console.log 메서드 전달하여 호출

 

 

 

 

▶현재 상황 

  전역 컨텍스트 위에 함수 실행 컨텍스트가 스텍에 차례대로 쌓여 있으며, 현재 실행 컨텍스트는 in-inner 함수 실행 컨텍스트이다.

  

 

9. in-inner 함수 코드 실행 종료

  in-inner 함수 실행 종료 후 console.log("inner") 실행

  이때 실행 컨텍스트 스텍에서 in-inner 함수 실행 컨텍스트가 제거 되고 inner 실행 컨텍스트가 실행 중인 실행 컨텍스트가 된다.

  실행 컨텍스트에서 제거되었다고 해서 in-inner 함수의 렉시컬 환경이 소멸되는 것은 아니다.

  in-inner 함수 렉시컬 환경을 누군가 참조 하고 있다면 소멸하지 않는다.

10. inner 함수 코드 실행 종료

   inner 함수 실행 종료 후 console.log("outer") 실행

   실행 컨텍스트 스텍에서 inner 함수 실행 컨텍스트가 제거 되고 outer 실행 컨텍스트가 실행 중인 실행 컨텍스트가 된다.

 

11. outer 함수 코드 실행 종료

   실행 컨텍스트 스텍에서 outer 함수 실행 컨텍스트가 제거 되고 전역 실행 컨텍스트가 실행 중인 실행 컨텍스트가 된다.

12. 전역 코드 실행 종료