실행컨텍스트.md

참고 사이트

https://velog.io/@kdeun1/자바스크립트-Execution-Context-Call-Stack

https://www.youtube.com/watch?v=EWfujNzSUmw

https://dkje.github.io/2020/08/30/ExecutionContext/

실행 컨텍스트(Execution context)

⭐ 자바스크립트 코드가 실행하는데 필요한 환경(코드 실행에 영향을 주는 조건이나 상태)을 제공하는 객체 자바스크립트의 스펙적인 매커니즘 식별자 결정을 더욱 효율적으로 하기위한 수단

• code evaluation state

  실행 컨텍스트의 코드를 실행, 일시중단, 재개하는데 필요한 모든상태를 가지는 컴포넌트

• Function

  함수 실행 컨텍스트일 때 해당 함수 객체를 가지는 컴포넌트

• Realm

  활성 객체를 가진 컴포넌트. ECMAscript 리소스에 접근하는 코드에 대한 Realm Record이다.

• ScriptOrModule

  해당 실행 컨텍스트의 스크립트 요약 정보와 연관된 모듈 정보를 가지는 컴포넌트

• Lexical Environment (for let, const)

  let, const로 선언된 변수가 메모리에 매핑되지만 초기값은 할당되지 않음(uninitialized). 초기 값 할당 코드가 실행되고 난 뒤에 메모리에 값이 추가됨

  local lexical scope를 단위로 함

  • Environment Record

    lexical 중첩 구조 기반으로 특정 변수, 함수에 대한 식별자 연결을 정의하는데 사용되는 특별한 타입

  • Outer Environment Reference

    바깥 Lexcial Environment를 가리킴

• Variable Environmnet (for var, 선언형 함수)

  var로 선언된 변수가 메모리에 매핑되며 초기값으로 undefined가 할당됨 할당 코드가 실행되고 난 뒤에는 해당 값으로 수정됨.

  선언형 함수가 메모리에 매핑되며 함수 전체가 메모리에 할당됨

  function scope를 단위로 함

  Lexical Environment를 상속함 ( ⇒ Variable Environment는 Lexical Environment의 Outer Reference )

  • Environment Record
  • Outer Environment Reference

• Generator (ES6)

  이터러블을 생성하는 함수를 반환

실행 컨텍스트 스택 (Execution Context Stack)

⭐ 실행 컨텍스트를 추적하는데 사용되는 스택

환경 레코드 (Environment Record)

⭐ 식별자와 식별자에 바인딩된 값을 기록하는 곳

1. 생성단계 (Creation Phase)

   Execution Context를 생성. 선언문만 실행해서 Environment Record에 기록

2. 실행단계 (Execution Phase)

   선언문 외 나머지 코드 순차적 실행. 필요한 경우 Environment Record 참조하거나 업데이트

• 호이스팅 (Hoisting)

  

  호이스트

  • let, const 로 선언했을 때

  → 엔진이 식별자를 기록해두긴 하지만 초기화하지 않아 선언 전까지는 TDZ 상태

  • var 로 선언했을 때

  → 엔진이 식별자와 함께 undefined를 초기화 함

  선언(메모리 공간을 확보하고 메모리주소에 식별자를 연결) + 초기화(식별자에 암묵적으로 undefined 값 바인딩)

  • function (함수선언문)을 사용할 때

  → 선언과 동시에 함수가 생성되어 선언 전에도 함수를 사용할 수 있음

외부 환경 참조 (Outer Environment Reference)

⭐ 바깥 Lexical Environment를 가리킴

스코프체인을 활용하여 실행 컨텍스트 스택의 상부에서 하부 순으로 참조할 식별자를 결정함

Context 생성과 삭제 과정

console.log(globalValue);
var globalValue = "nowVisible";

function sayHiOneTime() {
    var isMorning = true;
    let hi = "Good morning!";
    while (isMorning) {
        var name = "Jack";
        let question = "How are you?";
        console.log(`${name} ${hi} ${question}`);
        isMorning = false;
    }
}
sayHiOneTime();