23-2장 실행 컨텍스트 - 한수지

docs/23_실행 컨텍스트/한수지.md

@@ -98,3 +98,119 @@ ECMAScript 사양은 `소스코드(ECMAScript code)를 4가지 타입으로 구
 변수 값의 변경 등 **소스코드의 실행 결과는 다시 실행 컨텍스트가 관리하는 스코프에 등록**된다.
 
 ---
+
+### 📌 23-3. 실행 컨텍스트의 역할
+
+`모든 코드는 실행 컨텍스트를 통해 실행되고 관리`된다.
+
+코드가 실행되려면 스코프, 식별자, 코드 실행 순서 등의 관리가 필요하기 때문이다.
+
+> **실행 컨텍스트는 소스코드를 실행하는데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역**이다.
+
+다시말해, 식별자(변수, 함수, 클래스 등의 이름)를 등록하고 관리하는 `스코프와 코드 실행 순서 관리를 구현`한 내부 메커니즘이다.
+
+**관리 환경**
+
+- `렉시컬 환경` : 식별자와 스코프를 관리한다.
+- `실행 컨텍스트 스택` : 코드 실행 순서를 관리한다.
+
+---
+
+### 📌 23-4. 실행 컨텍스트 스택 (= call stack)
+
+> 실행 컨텍스트 스택은 **스택 자료구조로 코드 실행 순서를 관리**한다.
+
+- 스택: 데이터가 순서대로 쌓이며 가장 마지막에 삽입된 자료가 가장 먼저 삭제되는 구조를 가짐 (LIFO, last in first out, 후입선출)
+
+```js
+// 전역 코드와 함수 코드로 이루어진 예제
+const x = 1;
+
+function foo() {
+	const y = 2;
+
+	function bar() {
+		const z = 3;
+		console.log(x + y + z);
+	}
+	bar();
+}
+
+foo(); // 6
+```
+
+위 **코드를 실행**하면 자바스크립트 엔진은 먼저 **전역 코드를 평가하여 전역 실행 컨텍스트를 생성**한다.
+
+그리고 **함수가 호출되면 함수 코드를 평가하여 함수 실행 컨텍스트를 생성**한다.
+
+결과적으로 아래와 같이 `코드가 실행되는 시간의 흐름에 따라 실행 컨텍스트가 추가되고 삭제`된다.
+
+![](https://velog.velcdn.com/images/ninto_2/post/e6c57511-b4ae-4162-9b00-f8c1156b64c9/image.png)
+
+▲ 실행 컨텍스트 스택
+
+> 실행 컨텍스트 스택의 **최상위에 존재하는 실행 컨테스트는 언제나 현재 실행중인 코드의 실행 컨텍스트**이다.
+
+- 실행 중인 실행 컨텍스트: 실행 컨텍스트 스택의 최상위에 존재하는 실행 컨테스트를 의미한다.
+
+---
+
+### 📌 23-5. 렉시컬 환경
+
+`렉시컬 환경은 식별자와 스코프를 관리한다.`
+
+> 렉시컬 환경은 **식별자와 식별자에 바인딩된 값, 그리고 상위 스코프에 대한 참조를 기록하는 자료구조**로 **실행 컨텍스트를 구성하는 컴포넌트**이다.
+
+**관리 과정**
+
+```js
+// 예시
+const x = 1;
+
+function foo() {
+	const y = 2;
+
+	console.log(x + y);
+}
+```
+
+렉시컬 환경에서 위와 같은 코드의 식별자와 스코프를 관리하는 과정을 살펴보자.
+
+![](https://velog.velcdn.com/images/ninto_2/post/f9bac085-bc06-4ff3-a9de-ad27c2877878/image.png)
+
+▲ 렉시컬 환경과 스코프 체인
+
+1. `키와 값을 갖는 객체 형태의 스코프(전역, 함수, 블록 스코프)를 생성`
+2. `식별자를 키로 등록`
+3. `식별자에 바인딩된 값을 관리`한다.
+
+> 렉시컬 환경이란 **스코프를 구분하여 식별자를 등록하고 관리하는 저장소 역할을 하는 렉시컬 스코프의 실체**이다.
+
+![](https://velog.velcdn.com/images/ninto_2/post/4038180a-465d-4e4d-bc14-a00bb22e36be/image.png)
+
+▲ 실행 컨텍스트와 렉시컬 환경
+
+**실행 컨텍스트와 렉시컬 환경의 구성**
+
+- 실행 컨텍스트: **LexicalEnvironment(렉시컬 환경 컴포넌트)와 VariableEnvironment(식별자 환경 컴포넌트)로 구성**된다.
+
+  - Lexical Environment Component(렉시컬 환경 컴포넌트) :
+
+    - 렉시컬 환경 컴포넌트는 코드의 렉시컬(정적) 스코프를 관리하는데 사용된다.
+    - 렉시컬 스코프란 코드가 어디에서 호출되었는지에 따라 변수 및 함수의 유효범위가 결정되는 것을 의미한다.
+    - 현재 실행 중인 코드 블록(함수, 블록 스코프)에 대한 식별자 및 변수에 대한 정보를 저장한다.
+    - 렉시컬 환경으로 구성되어 있다. (환경 레코드와 외부 렉시컬 환경에 대한 참조)
+
+  - Variable Environment Component(식별자 환경 컴포넌트):
+    - 식별자 환경 컴포넌트는 초기에는 렉시컬 환경과 동일한 값을 가지지만, 호이스팅에 의해 다르게 동작한다.
+    - 렉시컬 환경으로 구성되어 있다. (환경 레코드와 외부 렉시컬 환경에 대한 참조)
+
+- 렉시컬 환경: **EnvironmentRecord(환경 레코드)와 OuterLexicalEnvironmentReference(외부 렉시컬 환경에 대한 참조)로 구성**된다.
+
+  - EnvironmentRecord(환경 레코드) :
+    **스코프에 포함된 식별자를 등록하고 등록된 식별자에 바인딩된 값을 관리**하는 저장소 (소스코드의 타입에 따라 관리하는 내용에 차이가 있음)
+
+  - OuterLexicalEnvironmentReference(외부 렉시컬 환경에 대한 참조) : 상위 스코프를 가리키며, 이때 상위 스코프란 외부 렉시컬 환경(= 해당 실행 컨텍스트를 생성한 소스코드를 포함하는 상위 코드의 렉시컬 환경)을 의미한다. (단방향 링크드 리스트인 스코프 체인을 구현함)
+    - 현재 변수 환경이 중첩된 스코프를 가지고 있을 때, 외부(상위) 스코프에 대한 참조를 나타냄.
+
+---