아래 페이지를 참조 했습니다.

https://meetup.toast.com/posts/129
https://poiemaweb.com/es6-block-scope

A. Execution Context란?

실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이라고 정의한다. 좀 더 쉽게 말하자면 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경
poiemaweb 실행 컨텍스트와 자바스크립트의 동작 원리

실행 가능한 코드를 형상화할 때, 형상화되는 코드의 단위는?

• Global Code
• Function Code
• Eval Code

위와 같이 구분하는 이유는?

각각의 단위마다 Execution Context를 생성하는데, 이 때 초기화(Initalizing) 하는 방식이 다릅니다.

• Global Code -> Initalizing A
• Function Code -> Initalizing B
• Eval Code -> Initalizing C

어떤 시점에 생성되는것인가?

Javascript 엔진이 소스 코드를 평가할 때 생성됩니다.

Execution Context의 모습은?

ExecutionContext = {
  	// 최초 생성될 시점에는 LexicalEnvironment === VariableEnvironment
	LexicalEnvironment: LexicalEnvironment, 
  	VariableEnvironment: LexicalEnvironment,
  	outer: outer Execution Context
}

B. LexicalEnvironment?

형태

const foo = (ninkName) => {
	const name = 'bob';
  	const age = 20;
  
  	const bar = () => {}
    
    return bar;
}

foo(1); // foo 함수를 호출하면 엔진이 foo의 EC를 생성 및 초기화 합니다.

// foo Function Execution Context
ExecutionContext: {
	LexicalEnvironment: {
    	environmentRecord: {
          ninkName: 1,
          bar: Function Object  
          name: "bob",
          age: 20,
        }
    },
    variableEnvironemt: LexicalEnvironment,
    outer: global EC
}

environmentRecord는 식별자/값 모음입니다.
Javascript 엔진이 environmentRecord를 초기화 할때 순서가 존재합니다.

1. 선언 단계

1. 매개 변수 식별자 선언 및 값 할당
2. function statement 식별자 선언 및 값 할당
3. function expression 식별자 선언
4. 변수 식별자 선언

2. 실행 단계

1. 변수, 함수 식별자 값 할당

var 키워드로 변수를 선언할 경우 식별자의 등록과 함께 메모리 공간을 확보하고, undefined로 초기화 되는 반면,
let/const 키워드로 변수를 선언할 경우 식별자만 record에 등록 되고, 해당 코드가 실행될 때 초기화와 함께 값이 할당됨으로 인해, 실행 되기전에는 식별자를 참조할 수 없다.

C. Outer?

값

outer 프로퍼티는 현재 Execution Context를 생성해낸 Execution Context를 참조합니다.
현재 EC가 생성해낸 EC 데이터는 [[Scopes]] 라는 내부 메소드(Internal Method)에 담겨져 있습니다.

const foo = () => {}
console.dir(foo);

출력

foo 함수의 EC의 outer 프로퍼티는 [[Scopes]] 를 참고하여 Global EC로 바인딩 합니다.

쓰임

그리고 이 outer 프로퍼티로 중첩된 Context에서 식별자를 찾아냅니다.
이를 아래와 같이 명칭합니다.

• ES3
  - Scope Chain
• ES6
  - Lexical nesting structure
  - Logical nesting of Lexical Environment values

ES3와 ES6의 명칭이 다른점은 서로 중첩된 EC를 참조하는 방식이 달라서 이지 않을까 생각합니다..

ES3 : List 구조로 중첩된 EC의 참조를 관리함.
ES6 : outer 프로퍼티로 직접 현재 EC의 상위 EC를 참조함.

식별자 탐색 방식

const globalName = 'Global';

const foo = () => {
  	const name = 'foo';
	const inner = () => {
      consoleo.log(name, globalName);
    }
    
    inner();
}

foo();

// ES3 scope chain
// 중첩된 Scope를 리스트 형태로 사용
0 - inner Function EC // name 식별자를 찾을때 현재 컨텍스트에 없으면 리스트를 타고 올라감.
1 - foo Function EC 
2 - global EC 

// ES6 scope chain
inner Function EC: {
	environment record: {/* 식별자: 값 */},
    outer: foo execution context, // inner 함수 객체는 foo 에서 생성
}
    
foo Function EC: {
  	environment record: {/* 식별자: 값 */},
    outer: global execution context, // foo 함수 객체는 global 에서 생성
}
    
global EC: {
		environment record: {/* 식별자: 값 */},
	    outer: null,
}    

😓😓추가로 업데이트 하겠습니다..😓😓