JS기초_보충(실행 컨텍스트)

실행 컨텍스트

자바스크립트의 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.

자바스크립트는 실행 컨텍스트가 활성화되는 시점에 다음을 수행한다.

1. 선언된 변수 호이스팅 (hoisting)
2. 외부 환경 정보를 구성
3. this 값을 설정

위와 같은 현상들 때문에 다른 언어와는 다른 자바스크립트만의 특징이 나타난다.

 

 

콜 스택 (Call Stack)

실행 컨텍스트를 이해하기 위해서 먼저 콜 스택에 대한 이해가 반드시 필요하다.

그 전에 스택에 대해 간단하게 짚고 넘어간다.

 

스택이란?

큐와는 반대 개념으로 마지막에 쌓인 것이 가장 먼저 나간다고 해서 LIFO(Last In, First Out)라고도 한다.

(이미지 출처 : https://velog.io/@leejuhwan/스택STACK과-큐QUEUE)

실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 동일 환경에 있는 코드를 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 콜스택에 쌓아 올린다. 가장 위에 있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장한다.

 

 

실행 컨텍스트의 구성 예시 코드

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

예시 코드 실행 컨텍스트 구성 순서

코드 실행 > 전역(in) > 전역(중단) > outer(in) > outer(중단) + inner(in) > inner(out) + outer(재개)

> outer(out) + 전역(재개) > 전역(out) > 코드 종료

 

결국 특정 실행 컨텍스트가 생성 또는 활성화되는 시점이 콜 스택의 맨 위에 쌓이는 순간을 의미한다.

현재 실행할 코드에 해당 실행 컨텍스트가 관여하게 되는 시점을 의미한다고 이해하면 된다.

 

실행 컨텍스트의 실체 (=담기는 정보)

1. VariableEnvironment
   
   1. 현재 컨텍스트 내의 식별자 정보(=record)
   2. 외부 환경 정보(=outer)
   3. 선언 시점 LexicalEnvironment의 snapshot
2. LexicalEnvironment
   1. VariableEnvironment와 동일하지만 변경사항을 실시간 반영
3. ThisBinding
   1. this 식별자가 바라봐야할 객체