From b7b78c84988488f0486182df52a25a4b68e6e60a Mon Sep 17 00:00:00 2001 From: "DESKTOP-PDMTIQO\\hansu" Date: Sun, 10 Dec 2023 01:50:11 +0900 Subject: [PATCH] =?UTF-8?q?:memo:=20docs:=2023-2=EC=9E=A5=20=EC=8B=A4?= =?UTF-8?q?=ED=96=89=EC=BB=A8=ED=85=8D=EC=8A=A4=ED=8A=B8=2023.3=20~=2023.5?= =?UTF-8?q?=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\355\225\234\354\210\230\354\247\200.md" | 116 ++++++++++++++++++ 1 file changed, 116 insertions(+) diff --git "a/docs/23_\354\213\244\355\226\211 \354\273\250\355\205\215\354\212\244\355\212\270/\355\225\234\354\210\230\354\247\200.md" "b/docs/23_\354\213\244\355\226\211 \354\273\250\355\205\215\354\212\244\355\212\270/\355\225\234\354\210\230\354\247\200.md" index 19b953e3..15993bb1 100644 --- "a/docs/23_\354\213\244\355\226\211 \354\273\250\355\205\215\354\212\244\355\212\270/\355\225\234\354\210\230\354\247\200.md" +++ "b/docs/23_\354\213\244\355\226\211 \354\273\250\355\205\215\354\212\244\355\212\270/\355\225\234\354\210\230\354\247\200.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(외부 렉시컬 환경에 대한 참조) : 상위 스코프를 가리키며, 이때 상위 스코프란 외부 렉시컬 환경(= 해당 실행 컨텍스트를 생성한 소스코드를 포함하는 상위 코드의 렉시컬 환경)을 의미한다. (단방향 링크드 리스트인 스코프 체인을 구현함) + - 현재 변수 환경이 중첩된 스코프를 가지고 있을 때, 외부(상위) 스코프에 대한 참조를 나타냄. + +---