✅ 실행 컨텍스트(Execution Context)

---

관련문서 | Execution Context | PoiemaWeb
관련영상1 | JavaScript - Execute context | 생활코딩
관련영상2 | [10분 테코톡] 💙 하루의 실행 컨텍스트

💡 실행 컨텍스트가 무엇인가요?

• 코드를 실행하는데 필요한 환경, 환경 레코드를 제공하는 객체
  환경: 코드실행에 영향을 주는 조건이나 상태
환경 레코드: 식별자와 식별자에 바인딩된 값을 기록
  예를 들어 함수 A가 호출 될 경우, 콜스택에 실행 컨텍스트를 생성해서 담는다.

• 식별자 결정을 더 효율적으로 하기 위한 수단

  ⭐️ 식별자 결정

  • 스코프 체인에서 변수나 함수의 값을 결정하는 것
    스코프 체인: 식별자를 결정할 때 활용하는 스코프들의 연결리스트

  • 식별자가 여러개일때 자바스크립트 엔진이 어떻게 외부 환경을 참조해서 의사결정을 할까?
    외부 환경 참조: 바깥 정적 환경(Lexical Environment)

    경우1

    1/ 현재 활성화된 실행컨텍스트의 환경레코드를 먼저 살펴본다.
    2/ 찾는 식별자가 없으면 바깥 렉시컬 환경으로 간다.
    3/ 찾는 식별자가 없으면 전역 실행컨텍스트의 렉시컬 환경으로 간다.
    4/ 찾는 식별자가 없으면 없는 식별자를 찾으려고 했기 때문에 Reference Error가 발생한다. 😡

    경우2

    1/ 현재 활성화된 실행컨텍스트의 환경레코드를 먼저 살펴본다.
    2/ 찾는 식별자가 없으면 바깥 렉시컬 환경으로 가고, 식별자를 찾는다.
    3/ 식별자를 찾았으니 상위 스코프의 식별자는 더이상 알 수 없다.
    변수 섀도잉: 동일한 식별자로 인해 상위 스코프에서 선언된 식별자의 값이 가려지는 현상

✅ 호이스팅(Hoisting)

---

💡 변수 호이스팅?

자바스크립트 엔진이 호이스팅을 하는 주체이다.

var 의 경우

• [생성 단계] : 선언문만 실행해서 환경 레코드에 기록
  1/ 새로운 식별자 TVchannel를 생성해둔 실행컨텍스트 안에 있는 환경레코드에 기록한다.
  2/ var키워드를 사용했으므로 undefined로 값을 초기화 한다.

• [실행 단계] : 선언문 외 나머지 코드 순차적 실행, 환경 레코드 참조 및 업데이트
  1/ 환경레코드에 기록된 식별자와 식별자 값을 참조해서 undefined값을 출력
  2/ 할당 실행되어 식별자 TVchannel를 Netflix로 업데이트
  3/ 환경레코드 참조해서 Netflix출력

/* Global */
console.log(TVChannel);

var TVChannel = "Netflix";

console.log(TVChannel);

let/const 의 경우

• [생성 단계] : 선언문만 실행해서 환경 레코드에 기록
  1/ 새로운 식별자 TVchannel를 생성해둔 실행컨텍스트 안에 있는 환경레코드에 기록한다.

• [실행 단계] : 선언문 외 나머지 코드 순차적 실행, 환경 레코드 참조 및 업데이트
  1/ 환경레코드에 기록된 식별자값이 없으므로 Reference Error가 발생
  일시적 사각지대 (Temporal Dead Zone): let/const로 선언했을 때, 선언 이전에 식별자를 참조할 수 없는 구역

💡 함수 호이스팅?

함수표현식(화살표 함수)의 경우

함수를 변수에 담아 함수를 선언하는 방식. 변수 호이스팅과 똑같이 동작
단, var의 경우 초기값 undefined가 호출될 수 없기 때문에 타입에러가 발생

/* Global */
study();

var study = () => {
  //
};

함수선언식의 경우

함수선언과 동시에 완성된 함수객체를 생성해서 환경레코드에 기록해둔다.
때문에 선언 전에도 에러없이 실행이 가능하다!

/* Global */
study();

function study() {
  //
};