개요

TIL 10번의 글 this에 대하여 쓰기 전에 Execution Context에 대해서 먼저 작성했어야 했는데 순서가 어긋났다. Execution Contect(EC)를 이해하면 this를 이해하는데 있어서 큰 어려움이 없게 된다.

Execution Context

• 함수가 실행되는 영역, 묶음
• 함수가 실행될 때 생성된다
• Hoisting, this, closure 등의 정보가 담긴다
• 사용자가 함수를 호출했을 때 내부적으로 해당 함수를 실행하기 위해서 정보들을 불러모은 집합체

실행 가능한 코드 유형

1. 함수 코드
2. global 코드
3. eval() 😠

---

상태 컴포넌트

• 실행 컨텍스트 상태를 위한 객체

유형

1. Lexical Enviroment Component(LEC)
2. Variable Enviroment Component(VEC)
3. This Binding Component(TBC)

EC {
    LEC: {},
    VEC: {},
    TBC: {}
}

Lexical Enviroment Component (LEC)

• 함수와 변수의 식별자 해결을 위한 환경 설정

• 함수 초기화 단계에서 해석한 함수와 변수를 {name: value}로 저장. 이를 통해 이름으로 함수와 변수를 검색할 수 있게 됨

  • 변수: {변수명 : undefined}
  • 함수: {함수명: function(){}}

• 함수 밖의 함수와 변수 참조 환경 설정

• 함수 밖의 함수와 변수를 사용할 수 있게 됨
  

Variable Enviroment Component (VEC)

• VEC에 담기는 내용은 LEC와 같지만 최초의 Snapshot을 유지한다는 점의 차이가 있다. LEC를 생성할 때 VEC의 정보를 먼저 담은 다음, 이것을 그대로 복사해서 LEC를 만들고, 이후에는 LEC를 주로 활용한다.

This Binding Component (TBC)

• this로 함수를 호출한 object의 property에 access (this.프로퍼티 이름)
• object의 property가 변경되면 동적으로 참조

예시

const obj = { point: 100};
obj.getPoint = function( {
  return this.point;
}
obj.getPoint();

EC: {
   LEC: {
      ER: {
         DER: {},
         OER: {}
      }
   },
   VEC: {},
   TBC: {
      point: 100,
      getPoint: function(){}
   }
}

1. obj.getPoint() 호출
2. EC 생성 및 3 컴포넌트 생성(LEC, VEC, TBC)
3. TBC에 getPoint()에서 this로 obj의 property를 사용할 수 있도록 binding
4. this.point 실행
5. TBC에서 point 검색
6. TBC에 있는 point 값 100 리턴

---

Enviroment Record (ER)

LEC안에 환경 레코드(ER)을 구분하는 이유는 컨텍스트를 구성하는 대상에 따라 다르기 때문이다.

EC: {
  LEC: {
    ER: {
      DER: {},
      OER: {}
    },
    OLER: {},
   },
   VEC: {},
   TBC: {}
}    

• Declarative Enviroment Record (DER)
  • function, 변수, catch 문에서 사용한다.
• Object Enviroment Record (OER)
  • Global 함수 & 변수에서 사용

---

EC 실행과정의 예시

function book(){
    function get(){
      return point;
    }
    const point = 123;
    return get();
};
book();

EC: {
   LEC: {
      ER: {
        DER: {
          get: function,
          point: undefined
        },
        OER: {}
      },
      OLER: {}
   },
   VEC: {},
   TBC: {}
}

1. book() 객체 [[scope]]에 Global 객체 설정
2. book() 함수 호출 시 EC 생성
3. 컴포넌트 생성 후 실행 컨텍스트에 attach
   • LEC, VEC, TBC
4. ER 생성하여 LEC에 attach
   • 함수 안의 함수, 변수를 binding
5. OLER 생성하여 LEC에 attach
6. 내부 function 키워드를 만나고 get function 오브젝트 생성

EC: {
    LEC: {
        ER: {
       	    DER: {},
            OER: {}
        }
        OLER: {
            point: 123;
        }
     },
     VEC: {},
     TBC: {}
}

7. point에 123을 할당
8. get() 함수 호출 시 ER에서 point를 찾고 없으면 OLER을 참조
9. OLER내의 point 값을 return

---

출처

1. 자바스크립트: 근본 핵심 이해
2. 코어 자바스크립트
3. https://poiemaweb.com/js-execution-context