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

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

@@ -0,0 +1,100 @@
+## 23장. ✨ 실행 컨텍스트
+
+실행 컨텍스트의 개념을 이해하면 아래와 같은 자바스크립트의 특징에 대해 함께 이해할 수 있다.
+
+- 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값(식별자 바인딩)을 관리하는 방식
+- 호이스팅이 발생하는 이유
+- 클로저의 동작 방식
+- 태스크 큐와 함께 동작하는 이벤트 핸들러
+- 비동기 처리의 동작 방식
+
+실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 개념이다.
+
+---
+
+### 📌 23-1. 소스코드의 타입
+
+ECMAScript 사양은 `소스코드(ECMAScript code)를 4가지 타입으로 구분`한다.
+
+소스코드를 4가지 타입으로 구분하는 이유는 **소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르기 때문**이다.
+
+**아래의 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다.**
+
+| 소스코드의 타입 |                                                     설명                                                      |                   실행 컨텍스트 생성                    |
+| :-------------: | :-----------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------: |
+|    전역 코드    |      **전역에 존재하는 소스코드**를 말하며, 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다.      | 전역 코드가 평가되면 **전역 실행 컨텍스트가 생성**된다. |
+|    함수 코드    | **함수 내부에 존재하는 소스코드**를 말하며, 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않는다. | 함수 코드가 평가되면 **함수 실행 컨텍스트가 생성**된다. |
+|    eval 코드    |                  빌트인 전역 함수인 **eval 함수에 인수로 전달되어 실행되는 코드**를 말한다.                   | eval 코드가 평가되면 **eval 실행 컨텍스트가 생성**된다. |
+|    모듈 코드    |    **모듈 내부에 존재하는 소스코드**를 말하며, 모듈 내부의 함수, 클래스 등의 내부 코드는 포함되지 않는다.     | 모듈코드가 평가되면 **모듈 실행 컨텍스트가 생성**된다.  |
+
+<br>
+
+#### 🔎 전역 코드
+
+- 전역 코드: 전역에 존재하는 소스코드
+
+> `전역 코드`는 전역 변수를 관리하기 위해 `최상위 스코프인 전역 스코프를 생성`해야 한다.
+
+또한, var 키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수를 전역 객체의 프로퍼티와 메서드로 바인딩하고 참조하기 위해 `전역 객체와 연결`되어야 한다.
+
+따라서, **전역 코드가 평가되면 전역 실행 컨텍스트가 생성된다.**
+
+<br>
+
+#### 🔎 함수 코드
+
+- 함수 코드: 함수 내부에 존재하는 소스코드
+
+> `함수 코드`는 `지역 스코프를 생성`하고 `지역 변수, 매개변수, arguments 객체를 관리`해야 한다.
+
+또한, `생성한 지역 스코프를 전역 스코프에서 시작하는 스코프 체인의 일원으로 연결`해야 한다.
+
+따라서, **함수 코드가 평가되면 함수 실행 컨텍스트가 생성된다.**
+
+<br>
+
+#### 🔎 eval 코드
+
+- eval 코드: 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 코드
+
+> eval 코드는 `strict mode(엄격 모드)에서 자신만의 독자적인 스코프를 생성`한다.
+
+**eval 코드가 평가되면 eval 실행 컨텍스트가 생성**된다.
+
+<br>
+
+#### 🔎 모듈 코드
+
+- 모듈 코드: 모듈 내부에 존재하는 소스코드
+
+> 모듈 코드는 `모듈별로 독립적인 모듈 스코프를 생성`한다.
+
+**모듈 코드가 평가되면 모듈 실행 컨텍스트가 생성**된다.
+
+<br>
+
+---
+
+### 📌 23-2. 소스코드의 평가와 실행
+
+![](https://velog.velcdn.com/images/ninto_2/post/4d5c661c-df75-46ad-9563-d6b70f8e8469/image.png)
+
+모든 소스코드는 **실행에 앞서 평가 과정**을 거치며 **코드를 실행하기 위한 준비**를 한다.
+
+> 자바스크립트 엔진은 소스코드를 `소스코드의 평가`와 `소스코드의 실행` 2가지의 과정으로 나누어 처리한다.
+
+#### 🔎 소스 코드의 평가 과정
+
+> 소스 코드의 평가 과정이 끝나야 런타임이 시작된다.
+
+1. 실행 컨텍스트를 생성
+2. 변수, 함수 등의 선언문만 먼저 실행
+3. 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프(렉시컬 환경의 환경 레코드)에 등록
+
+위와 같은 **소스코드의 평가과정이 끝나면 선언문을 제외한 소스코드가 순차적으로 실행**되기 시작한다. (런타임 시작)
+
+이때, **소스코드 실행에 필요한 정보(변수나 함수의 참조)를 실행 컨텍스트가 관리하는 스코프에서 검색해서 취득**한다.
+
+변수 값의 변경 등 **소스코드의 실행 결과는 다시 실행 컨텍스트가 관리하는 스코프에 등록**된다.
+
+---