diff --git a/docs/basics/javascript/execution_context.md b/docs/basics/javascript/execution_context.md new file mode 100644 index 0000000..34de322 --- /dev/null +++ b/docs/basics/javascript/execution_context.md @@ -0,0 +1,78 @@ +# 실행 컨텍스트 + +실행할 코드에 제공할 환경 정보들을 모아놓은 객체 + +## 소스코드의 타입 + +1. 전역 코드 (전역에 존재하는 소스코드) + 전역변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성해야 한다. +2. 함수 코드 (함수 내부에 존재하는 소스코드) + 지역 스코프를 생성하고 지역변수, 매개변수, arguments객체를 관리해야한다. +3. eval 코드 +4. 모듈 코드 (모듈 내부에 존재하는 코드) + 모듈별로 독립적인 모듈 스코프를 생성한다. + +:::note +모든 소스코드는 소스코드를 평가하여 실행 컨텍스트를 생성한다. +::: + +## 소스코드의 평가와 실행 + +> 자바스크립트 엔진은 **소스코드의 평가**와 **소스코드의 실행** 2개의 과정으로 나누어 처리한다. + +- **소스코드 평가 과정(선언문)**: 실행 컨텍스트를 생성하고, 변수, 함수 등의 선언문만 먼저 실행하여 실행 컨텍스트가 관리하는 스코프에 등록한다. +- **소스코드의 실행(선언문 이외의 문)**: 실행 컨텍스트는 실행에 필요한 정보를 제공하고, 소스코드 실행이 완료된다면 실행결과는 실행 컨텍스트가 관리하는 스코프에 등록된다. + +### 예시 + +```ts +var x; +x = 1; +``` + +- 소스코드 평가: 변수 선언문 `var x;` 가 실행된다. + 생성된 변수 식별자 x는 **실행컨텍스트가 관리하는 스코프에 등록**되고 undefined로 초기화된다. +- 소스코드 실행: 변수 할당문 `x=1;` 만 실행된다. + x 변수가 등록되어있는지 확인(스코프로부터 정보 제공받음)하고 등록되어있다면 값을 할당하고 할당 결과를 실행 컨텍스트에 등록하여 관리한다. + +## 실행 컨텍스트의 역할 + +1. 전역 코드 평가 + 전역코드의 변수, 함수 선언문만 먼저 실행되고 생성된 전역변수, 함수가 실행 컨텍스트가 관리하는 전역 스코프에 등록된다. +2. 전역 코드 실행 + 런타임이 시작되어 전역 코드가 순차적으로 실행된다. 만약 함수가 호출되면 전역 코드의 실행을 일시 중단하고 코드 실행 순서를 변경하여 함수 내부로 진입한다. +3. 함수 코드 평가 + 생성된 매개변수, 지역변수가 실행 컨텍스트가 관리하는 지역 스코프에 등록된다. +4. 함수 코드 실행 + 런타임이 시작되어 함수 코드가 순차적으로 실행된다. + +## 실행 컨텍스트 스택 + +> 코드가 실행되는 시간의 흐름에 따라 실행 컨텍스트가 추가(push)되고 제거(pop)된다. + +```jsx +const x = 1; + +function foo() { + const y = 2; + + function bar() { + const z = 3; + console.log(x + y + z); + } + // highlight-next-line + bar(); +} +// highlight-next-line +foo(); //6 +``` + +1. 전역코드의 평가와 실행 → 자바스크립트 엔진은 전역 실행 컨텍스트를 생성하고 실행 컨텍스트 스택에 푸시한다. +2. foo 함수 코드의 평가와 실행 +3. bar 함수 코드의 평가와 실행 +4. foo 함수 코드로 복귀 +5. 전역 코드로 복귀 → 더 이상 실행할 전역코드가 남아있지 않다면 전역 실행 컨텍스트는 실행 컨텍스트 스택에서 팝된다. + +:::note +실행 컨텍스트 스택의 최상위에 존재하는 실행 컨텍스트는 언제나 현재 실행중인 코드의 실행 컨텍스트이다. +:::