작성 전..
=> 실행 컨텍스트는 이전 생활코딩 유튜브의 스코프 부분을 보며 잠시동안 공부한 적이 있었다. 딥다이브 스터디를 계기로 깊게 공부해보게 되었다.

---

실행 컨텍스트

• 자바스크립트의 동작 원리를 담고 있는 핵심 개념이며, 런타임 이전에 생성된다.
• 변수, 함수 등의 선언문만 먼저 실행하여 생성된 변수나 함수 식발자를 키로 실행 컨텍스트가 관리하는 스코프에 등록한다.

실행 컨텍스트 스택

• 실행 컨텍스트 스택은 런타임 시기에 코드가 한 줄 씩 읽히면서 함수 호출문, eval, 모듈 관련 코드를 발견할 때마다 코드 평가 과정에 생성했던 관련 실행 컨텍스트를 callStack 이라고 불리는 스택에 푸시한다.

const x=1;

function foo() {
	const y=2;
  
  	function bar() {
		const z=3;
      	console.log(x+y+z);
    }
  	bar();
}

foo();

위의 코드는 실행 컨텍스트 스택이 다음과 같이 푸시되고 팝 된다.

1. callStack [] 
2. callStack [[Global.E.C]]
3. callStack [[Global.E.C],[foo.E.C]]
4. callStack [[Global.E.C],[foo.E.C],[bar.E.C]]
5. callStack [[Global.E.C],[foo.E.C]]
6. callStack [[Global.E.C]]
7. callStack []
8. 종료

=> 실행 컨텍스트는 Lexical Environment 와 Variable Environment 컴포넌트로 구성된다.

렉시컬 환경

• 렉시컬 환경(Lexical Environment)은 식별자와 식별자에 바인딩 된 값, 그리고 상위 스코프에 대한 참조를 기록하는 자료구조로 실행 컨텍스트를 구성하는 컴포넌트다.

• 렉시컬 환경(Lexical Environment) 에는 Enverionment Record 와 OuterLexical Environment Reference 두 개의 컴포넌트가 존재한다.

• 각각, 스코프에 포함된 식별자와 식별자에 바인딩 된 값을 관리하는 저장소, 상위 스코프를 가리킨다. 상위 스코프를 가리킴으로써 외부 렉시컬 환경을 참조하고 이로 인해 단방향 링크드 리스트인 스코프 체인을 구현한다.

전역 코드 평가

• 다음과 같은 순서로 진행된다.

1. 전역 실행 컨텍스트 생성
2. 전역 렉시컬 환경 생성
   2-1. 전역 환경 레코드 생성
   2-1-1. 객체 환경 레코드 생성 Object Environment Record
   2-1-2. 선언적 환경 레코드 생성 Declarative Environment Record
   2-2. this 바인딩
   2-3. 외부 렉시컬 환경에 대한 참조 결정

객체 환경 레코드

• var로 선언된 변수나 함수 선언문이 들어간다. 전역객체의 프로퍼티와 메서드가 된다.

선언적 환경 레코드

• let과 const로 선언된 변수가 들어간다.

this 바인딩

• 전역 환경 레코드의 [[GlobalThisValue]] 내부 슬롯에 this가 바인딩 된다. 전역 코드에서의 this는 window 전역 객체를 가리키므로 전역 객체가 바인딩 된다.

OuterLexical Environment Reference

• 외부 참조 정보를 저장한다. 즉, 상위 스코프를 가리킨다. 이를 통해 단방향 링크드 리스트를 통해 스코프 체인을 구성한다. 전역 컨텍스트는 상위 스코프가 없으므로 이 컴포넌트에는 null이 저장된다.

블록 레벨 스코프는 E.C 가 생성될까?

• 블록 레벨 스코프는 실행 컨텍스트가 생성되지 않는다.
• 기존 실행 컨텍스트의 Lexical Environment Record를 덮어쓰고 종료되면 다시 기존 실행 컨텍스트로 돌아간다!

회고

13장 스코프와 24장 클로저를 이해하기 위해 거쳐야 하는 필수 지식인 것 같다.. 공부하면서 JS에 대해 깊게 알수 있어 변태 같지만 너무 행복하다..