자바스크립트를 능숙하게 사용하기 위해서는 소스코드가 어떻게 실행되는지 이해할 수 있어야합니다.
이번 글에서는 자바스크립트의 동작 원리를 담고있는 핵심 개념 중 하나인 실행 컨텍스트(Execution Context)를 알아보겠습니다.

 
 

## 📌 실행 컨텍스트(Execution Context) 란?

**실행 컨텍스트**(execution context)는 실행할 코드에 제공할 환경 정보를 모아놓은 객체로서 자바스크립트에서 코드가 실행되기 위해서는 식별자, 스코프, 코드 실행 순서 등의 관리가 필요한데 이러한 환경들을 관리합니다.

 
 


## ⛏ 실행 컨텍스트 스택

자바스크립트 엔진을 실행하면 코드 평가 단계와 코드 실행단계가 이루어집니다.
실행 컨텍스트는 코드 평가 단계에서 생성되고 코드의 실행 순서를 관리하는 **실행 컨텍스트 스택**이라는 자료구조에서 관리됩니다.
실행 컨텍스트 스택은 스택(stack) 자료구조로 가장 마지막에 추가된 실행 컨텍스트가 가장 먼저 종료되게 됩니다.

 
> 예제
```js
function profile () {
 const name = "chan"
 const age = 25
 
 function print() {
 console.log(age)
 console.log(name)
 }
 
 print()
}

profile()
```

 

위의 코드를 예제로 실행 컨텍스트 스택의 동작을 알아보겠습니다.

 

> 예제의 실행 컨텍스트 스택

![](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/6e8429fb-4841-4935-d279-0024d1e55000/public)

예제 코드를 실행하면 가장 먼저 **전역 코드의 평가와 실행**이 이루어집니다.
 
전역 코드를 평가할 때 profile 함수가 컨텍스트에 등록된 뒤 평가 과정을 마칩니다.
다음으로 코드 실행과정을 시작하는데 실행 과정에서 전역 함수인 profile 함수를 호출하여 profile 함수 실행 컨텍스트를 실행 컨텍스트 스택에 추가(push)합니다.
이 때 전역 코드의 실행은 중단되고 코드의 제어권이 profile 함수 내부로 이동합니다.
 
profile 함수 내부에서도 코드 평가와 실행이 이루어집니다.
name, age 변수와 print 함수가 평가된 뒤 실행 과정에서 print 함수를 호출하고 실행 컨텍스트 스택에 print 함수 실행 컨텍스트를 추가함과 동시에 제어권을 넘깁니다.
 
이번에는 print 함수의 코드 평가와 실행이 이루어집니다.
print 함수는 name, age를 출력한 뒤 종료됩니다.
print 함수가 종료되었기 때문에 print 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝(pop)되고 제어권이 다시 profile 함수로 넘어갑니다.
 
제어권이 넘어오고 profile 함수를 계속 실행하지만 더 이상 실행할 코드가 없어 함수가 종료되고 전역 함수로 제어권이 넘어갑니다. 이후에 전역 함수에서도 실행할 코드가 없음으로 전역 함수 실행 컨텍스트도 팝되고 빈 실행 컨텍스트만 남게됩니다.

 

이처럼 실행 컨텍스트 스택은 코드의 실행 순서를 관리하는 것을 알 수 있습니다.

 
 


## 🗃 실행 컨텍스트의 구조

코드 평가 단계에서 실행컨텍스트를 생성하는데 이때 코드를 실행하는데 필요한 환경 정보를 관리하는 `Variable Environment` 와 `Lexical Environment` 를 생성합니다.
두 컴포넌트는 생성 초기에는 동일하지만 몇 가지 상황을 만나면서 달라지는 경우가 있다고합니다.

 

Variable Environment 컴포넌트와 Lexical Environment 컴포넌트는 **환경레코드**(EnvironmentRecord)와 **외부 렉시컬 환경에 대한 참조**(OuterLexicalEnvironmentReference)로 구성되어 있습니다.

 

**환경레코드**는 스코프에 포함된 식별자를 등록하고 식별자의 바인딩된 값을 관리합니다.

 

**외부 렉시컬 환경에 대한 참조**는 상위 코드의 렉시컬환경을 참조하는 것을 의미합니다.
특정 변수나 함수를 찾을 때 현재 스코프에서 발견할 수 없다면 상위 렉시컬 환경을 참조합니다.

자바스크립트를 능숙하게 사용하기 위해서는 소스코드가 어떻게 실행되는지 이해할 수 있어야합니다.
이번 글에서는 자바스크립트의 동작 원리를 담고있는 핵심 개념 중 하나인 실행 컨텍스트(Execution Context)를 알아보겠습니다.

 
 

## <span

Javascript 실행 컨텍스트 (execution context)