From 70765d1aabad8a02a26e06a865ad7d03b8974e50 Mon Sep 17 00:00:00 2001 From: "DESKTOP-PDMTIQO\\hansu" Date: Mon, 11 Dec 2023 23:46:30 +0900 Subject: [PATCH] =?UTF-8?q?:memo:=20docs:=2023-3=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.6=20?= =?UTF-8?q?=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" | 131 ++++++++++++++++++ 1 file changed, 131 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 15993bb1..5b855fea 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" @@ -214,3 +214,134 @@ function foo() { - 현재 변수 환경이 중첩된 스코프를 가지고 있을 때, 외부(상위) 스코프에 대한 참조를 나타냄. --- + +### 📌 23-6. 실행 컨텍스트의 생성과 식별자 검색 과정 + +```js +var x = 1; +const y = 2; + +function foo(a) { + var x = 3; + const y = 4; + + function bar(b) { + const z = 5; + console.log(a + b + x + y + z); + } + bar(10); +} + +foo(20); // 42 +``` + +🔎 위 예제 코드를 통해
+`실행 컨텍스트의 생성, 코드 실행 결과의 관리, 식별자 검색` 과정들을 알아보자. + +#### 1. 전역 객체 생성 + +> **전역 객체는 전역 코드가 평가되기 이전에 생성**된다. + +**전역 객체도 프로토타입 체인의 일원**이기에 `Object.prototype`을 상속받는다. + +
+ +#### 2. 전역 코드 평가 + +> **소스코드가 로드**되면 **자바스크립트 엔진은 전역 코드를 평가**한다. + +**전역 코드 평가의 순서** + +- 1. 전역 실행 컨텍스트 생성 +- 2. 전역 렉시컬 환경 생성 + - 2-1. 전역 환경 레코드 생성 + - 객체 환경 레코드 생성 + - 선언적 환경 레코드 생성 + - 2-2. this 바인딩 + - 2-3. 외부 렉시컬 환경에 대한 참조 결정 + +위와 같은 과정을 걸쳐 생성된 전역 실행 컨텍스트와 렉시컬 환경은 아래와 같다. + +![](https://velog.velcdn.com/images/ninto_2/post/e4a3e5d9-0a5d-4a13-8faf-3f0cb7af8866/image.png) + +
+ +#### 3. 전역 코드 실행 + +전역 코드가 순차적으로 실행되기 시작하면, **변수 할당문이 실행되어 전역 변수에 값이 할당**된다. + +식별자 결정을 위해 식별자를 검색할 때는 **실행 중인 실행 컨텍스트에서 식별자를 검색하기 시작**한다. + +- 식별자 결정: 어느 스코프의 식별자를 참조하면 되는지 결정하는 것. + +**선언된 식별자는 실행 컨텍스트의 렉시컬 환경의 환경 레코드에 등록**되어있다. + +#### 4. foo함수 코드 평가 + +foo함수가 호출되면 **전역 코드의 실행을 일시 중단**하고 foo 함수 내부로 **코드의 제어권이 이동**된다. + +그리고 **함수 코드를 평가하기 시작**한다. + +**함수 코드의 평가 순서** + +- 1. 함수 실행 컨텍스트 생성 +- 2. 함수 렉시컬 환경 생성 + - 2-1. 함수 환경 레코드 생성 + - 2-2. this 바인딩 + - 2-3. 외부 렉시컬 환경에 대한 참조 결정 + +
+ +#### 5. foo함수 코드 실행 + +**런타임이 시작**되어 foo 함수의 **소스코드가 순차적으로 실행되기 시작**한다. + +이때 **식별자 결정을 위해 실행 중인 실행 컨텍스트의 렉시컬 환경에서 식별자를 검색하기 시작**한다. + +
+ +#### 6. bar함수 코드 평가 + +bar 함수를 호출하기 직전 상황에서, +bar 함수가 호출되면 bar 함수 내부로 **코드의 제어권이 이동**된다. + +그리고 bar 함수 코드를 평가하기 시작한다. + +
+ +#### 7. bar함수 코드 실행 + +**런타임이 시작**되어 bar 함수의 **소스코드가 순차적으로 실행되기 시작**한다. + +- 1. console 식별자 검색 +- 2. log 메서드 검색 +- 3. 표현식 a + b + x + y + z의 평가 + +
+ +#### 8. bar함수 코드 실행 종료 + +bar 함수 코드의 실행이 종료되면, 실행 컨텍스트에서 bar 함수 실행 컨텍스트가 pop되어 제거된다. + +그 뒤, foo 실행 컨텍스트가 실행중인 컨텍스트가 된다. + +bar 함수 실행 컨텍스트가 제거되었다고 bar 함수 렉시컬 환경도 즉시 소멸되는 것은 아니다. + +`렉시컬 환경은 독립적인 객체`이기 때문에 bar 함수의 실행 컨텍스트가 소멸되었다 하더라도 **누군가 참조하고 있지 않을 때 비로소 가비지 컬렉터의 대상이 된다.** + +
+ +#### 9. foo함수 코드 실행 종료 + +bar함수가 종료하면 더 이상 실행할 코드가 없으므로 foo 함수 코드의 실행이 종료된다. + +이때 컨텍스트 스택에서 foo 함수 실행 컨텍스트가 pop되어 제거되고,
+전역 실행 컨텍스트가 실행 중인 실행 컨텍스트가 된다. + +
+ +#### 10. 전역 코드 실행 종료 + +foo함수가 종료되면 더는 실행할 전역 코드가 없다. + +따라서 전역 코드의 실행이 종료되고 전역 실행 컨텍스트도 실행 컨텍스트 스택에서 pop되어 **실행 컨텍스트 스택에는 아무것도 남아있지 않게 된다.**