006_코어 자바스크립트 챌린지_3

@코어 자바스크립트

 

제 2챕터: 실행 컨텍스트 (Execution Context)

 

01. 실행 컨텍스트란?

• 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다.
• 자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고(Hoisting), 외부 환경 정보를 구성하고, this 값을 설정하는 등의 동작을 수행하는데, 이로 인해 다른 언어에서 발견할 수 없는 특이한 현상들이 발생한다.
• 실행 컨텍스트를 살펴보기에 앞서 스택(Stack)과 큐(Queue)의 개념에 대해 이해해야 한다.

스택	- 출입구가 하나인 깊은 우물같은 데이터 구조 - a,b,c,d 순으로 데이터를 넣으면 d,c,b,a 순으로 꺼낼 수밖에 없는 구조이다. - LIFO( Last In, First Out)
큐	- 양 쪽이 모두 열려있는 파이프같은 구조 - 한 쪽은 입력만, 다른 한 쪽은 출력만을 담당하는 구조 - a,b,c,d 순으로 데이터를 넣으면 a,b,c,d 순으로 꺼낼 수밖에 없는 구조이다. - FIFO (First In, First Out)

스택, 큐를 설명하는 이미지

• 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택(Call Stack)에 쌓아올렸다가, 가장 위에 있는 컨텐스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다.
• 여기서 '동일한 환경', 즉 하나의 실행 컨텍스트를 구성할 수 있는 방법으로 전역 공간, eval() 함수, 함수 등이 있는데 우리가 흔히 실행 컨텍스트를 구성하는 방법은 함수를 실행하는 것이다.

// ------------------------------------ (1)
let a = 1;
function outer() {
	function inner() {
		let a = 3;
		console.log(a); // 3
	}
	inner(); // ------------------ (2)
	console.log(a); // 1
}
outer(); // -------------------------- (3)
console.log(a); // 1

• 위 예제에서 처음 자바스크립트 코드를 실행하는 순간(1) 전역 컨텍스트가 콜 스택에 담긴다.
• 그리고 (3)에서 outer 함수를 호출하면 자바스크립트 엔진은 outer에 대한 환경 정보를 수집해 outer 실행 컨텍스트를 생성한 후 콜 스택에 담는다. 이 때 콜 스택의 최상단에 outer 실행 컨텍스트가 놓인 상태가 됐으므로 전역 컨텍스트와 관련된 코드의 실행을 일시 중단하고 대신 outer 실행 컨텍스트와 관련된 코드, 즉 outer 함수 내부의 코드들이 순차로 실행한다.
• outer 함수를 실행하며 (2)에서 inner 함수의 실행 컨텍스트가 콜 스택의 가장 위에 담기면 outer 컨텍스트와 관련된 코드의 실행을 중단하고 inner 함수 내부의 코드를 순서대로 진행한다.

실행 컨텍스트 순서

• 여기서 궁금한 점은 inner 함수에서 a 변수에 3을 할당한 부분과 인데, 이는 inner 함수가 종료되면서 사라지기 때문에 outer 함수와 전역에 생성한 console.log(a) 에서는 1을 출력하게 된다. 실제 테스트 결과도 다음과 같이 나온다.

• 스택 구조를 보면 한 실행 컨텍스트가 맨 위에 쌓이는 순간이 곧 현재 실행할 코드에 관여하게 되는 시점임을 알 수 있다. 이렇게 어떤 실행 컨텍스트가 활성화될 때 자바스크립트 엔진은 해당 컨텍스트에 관련된 코드들을 실행하는 데 필요한 환경 정보들을 수집해 실행 컨텍스트 객체에 저장한다. 여기에 담기는 정보들은 다음과 같다.

활성화된 실행 컨텍스트의 수집 정보

1. VariableEnvironment: 현재 컨텍스트 내 식별자들에 대한 정보 + 외부 환경 정보.
2. LexicalEnvironment: 처음에는 VariableEnvironment와 같지만 변경 사항이 실시간으로 반영됨.
3. ThisBinding: this 식별자가 바라봐야 할 대상 객체.

가장 먼저 VariableEnvironment가 생성된다. 그리고 같은 초기 내용이 복사되어 LexicalEnvironment가 생성된다.
그리고 이후로는 계속 LexicalEnvironment를 활용해 처음 환경 정보인 VariableEnvironment와는 다른 내용을 갖게 된다.

02. VariableEnvironment

• 최초 실행시의 스냅샷 (읽기만 가능한 특정 시간의 가상 복제 파일) 을 유지한다.
• 여기에 정보를 먼저 담은 다음, 이를 그대로 복사해 LexicalEnvironment를 만들고, 이후에는 LexicalEnvironment를 주로 활용하게 된다.
• EnvironmentRecord (스냅샷)
• outerEnvironmentReference (스냅샷)