자바스크립트를 공부하는 사람들이라면 누구나 한번쯤은 스코프(Scope), 호이스팅(Hoisting), 클로저(closure), this 등의 개념을 들어본적이 있을 것입니다. 하지만 이것들은 이해하기 어려운 것들이기에 많은 사람들이 공부하는데 어려움을 겪곤 합니다.

오늘 바로 알아볼 실행 컨텍스트를 이해하고 난다면 더 이상 스코프(Scope), 호이스팅(Hoisting), 클로저(closure), this 등의 개념을 이해하기 어렵지 않을 것입니다.

실행 컨텍스트 (Excution Context)

자바스크립트 파일을 실행할때 “실행할 코드에 제공할 환경 정보들을 모아놓은 객체”

자바스크립트 엔진은 코드를 실행하게 되면 코드를 실행하는데 필요한 환경 정보 몇가지를 모아 컨텍스트를 구성하고, 이를 콜 스택(call stack)에 쌓아올립니다.

여기서 stack(스택)이란??

스택(stack)

(스택 설명)

---

다시 본론으로 돌아와봅시다.

코드를 실행할 때마다 (*함수를 호출할 때) 컨텍스트(Context)가 구성이 되며 콜 스택에 쌓아올리는데, 이때 스택의 특징을 이용하여 가장 위에 쌓여있는 컨텍스트(Context)와 관련 있는 코드를 실행하는 식으로 전체 코드의 환경과 순서를 보장합니다.

// --------------------------- (1)
var test = 'hello'

function outer(){

	function inner(){
		console.log(test);
		var test = 'world'
	}
	
	inner(); // ----------------- (2)
	comsole.log(test);
}

outer(); // ------------------- (3)
console.log(test);

위와 같은 코드를 실행한다고 한다면, 과연 자바스크립트 엔진 내부에서는 어떤 일이 일어나는 것일까? 아래와 같은 순서로 작업이 일어납니다.

1. 전역 컨텍스트(global context)가 콜스택에 담긴다.
2. 순차적으로 진행하다가 (3)에서 outer함수를 호출하면 JS엔진은 outer()에 대한 환경정보를 수집해서 outer 실행 컨텍스트를 생성 후 콜 스택에 담는다. (이때 전역 컨텍스트와 관련된 코드 실행을 중단하고, outer()함수의 코드들을 실행한다.
3. 계속 진행하다 outer함수 내부의 inner 함수의 호출문을 만나게 되면, 똑같이 inner()함수의 컨텍스트를 생성하고 콜 스택에 담는다.
4. inner함수의 실행이 종료되면 inner 실행 컨텍스트가 콜 스택에서 제거 된다.
5. outer함수의 실행이 종료되면 outer 실행 컨텍스트가 콜스택에서 제거 된다.
6. 전역 공간에 더 이상 실행할 공간이 없다면, 콜 스택에서 전역 컨텍스트도 제거되고, 실행이 종료가 됩니다.

즉, 다시 정리하면 다음과 같은 순서로 실행 컨텍스트가 동작한다고 할 수 있다.

• 자바스트립트 코드 실행 시 콜 스택에 전역 컨텍스트(Global Context)가 쌓임
• 함수가 실행(호출)될 때 해당 함수의 Context가 콜 스택에 쌓임
• 함수가 종료되면 Context도 제거됨
• 모든 코드가 종료되면 (자바스크립트 파일 하나를 거대한 함수로 볼 수 있음) 전역 컨텍스트도 제거됨

---

실행 컨텍스트에 담기는 정보

실행 컨텍스트를 구성할 때 담기는 정보에는 무엇이 있을까?
다음 3가지의 정보가 담깁니다. 지금부터 하나씩 자세히 알아보도록 하겠습니다!!

1️⃣ VariableEnvironment

2️⃣ LexicalEnvironment

3️⃣ ThisBinding

실행 컨텍스트의 3가지 정보 한 눈에 알아보기

---

1️⃣ VariableEnvironment

현재 컨텍스트 내의 식별자들에 대한 정보 (environmentRecord : 줄여서 Record)
외부 환경 정보
(outerEnvironmentReference : 줄여서 outer)

현재 컨텍스트 내의 식별자들에 대한 정보 (environmentRecord : 줄여서 Record)

→ 현재 컨텍스트와 관련된 식별자와 식별자에 바인딩된 값을 기록하는 공간

Ex.) 변수명, 매개변수명, 선언한 함수의 함수명 등

외부 환경 정보(outerEnvironmentReference : 줄여서 outer)

→ 선언 시점. 즉, 바로 직전에 올려져 있는 컨텍스트(Context)의 LexicalEnvironment의 스냅샷입니다.

이때 코드가 실행되는 대로 변경된 사항은 반영되지 않습니다.

관련내용

• 호이스팅(Hoisting)

2️⃣ LexicalEnvironment

현재 컨텍스트(Context)와 관련된 코드의 식별자 정보들, VariableEnvironment와 동일한 정보가 저장됩니다.

현재 컨텍스트 내의 식별자들에 대한 정보 (environmentRecord : 줄여서 Record)
외부 환경 정보
(outerEnvironmentReference : 줄여서 outer)

해당 내용은 생성 초기에는 VariableEnvironment의 정보를 그대로 복사해서 LexicalEnvironment를 만들기 때문에 동일한 내용을 가지고 있습니다.

하지만, LexicalEnvironment는 “변경 사항이 실시간으로 적용”되어 저장이 된다는 차이점이 있습니다.

outerEnvironmentReference 를 통해 상위 컨텍스트의 LexicalEnvironment 에 접근하여 상위 컨텍스트의 environmentRecord 에서 변수나, 함수를 사용할 수 있게 됩니다.

더불어 outerEnvironmentReference 는 오직 자신이 선언될 당시의 LexicalEnvironment 를 참조하기에 순차적으로만 접근이 가능하며, 여러 스코프에서 동일한 식별자를 생성하였다 하더라도 가장 먼저 발견된 식별자만 접근이 가능합니다.

관련내용

• 스코프, 스코프 체인(Scope chain)

3️⃣ ThisBinding

this로 지정된 객체를 저장

실행 컨텍스트가 활성화 되는 당시에 지정된 this 객체가 저장됩니다. this는 함수를 호출하는 방법에 따라 바인딩되는 객체가 달라지게 됩니다.

자세한 내용은 다음 게시글에서 자세하게 따로 다뤄보겠습니다. 👉 [JAVASCRIPT] this

관련내용

• this

---

참조

JS Execution Context (실행 컨텍스트) 란? | 감구마 개발블로그

[JS] 자바스크립트 실행 컨텍스트(Execution Context)란?

자바스크립트 엔진과 호이스팅

[우아한 Tech] - 실행컨텍스트

책 <코어 자바스크립트> - 정재남