TIL DAY.44 [코어 자바스크립트] 실행 컨텍스트

실행 컨텍스트 (exexcution context)는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다.

실행 컨텍스트란?

우선 실행 컨텍스트 개념을 파악하기에 앞서 자료구조의 핵심인 스택(Stack) 과 큐(Queue)에 대해서 살펴 보도록 하자.

스택(Stack): 출입구가 하나뿐인 깊은 우물 같은 데이터 구조이다, 그렇기에 비어 있는 스택에 a,b,c,d라는 데이터를 순서대로 저장하고 다시 사용할 시 d,c,b,a로 밖에 꺼낼수 없다.

큐(Queue): 양쪽이 모두 열려있는 파이프를 떠올리면 된다. 이 경우 비어있는 큐에 순서대로 데이터를 a,b,c,d를 저장했다면 꺼낼 때 또한 a,b,c,d의 순서로 꺼낼수 밖에 없다.

실행 컨텍스트 같은 경우에는 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택 ( call stack)에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 된 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다고 한다.

위에서 말한 동일한 환경은 하나의 실행 컨텍스트를 구성할 수 있는 방법으로 전역공간, eval()함수, 함수 등이 있다. 예제를 살펴 보며 이해 해보도록 하겠다.

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

1. 처음 자바스크립트 코드를 실행하는 순간(1) 전역 컨텍스트가 콜 스택에 담긴다.
2. 콜 스택에는 전역 컨텍스트 외에 다른 덩어리가 없으므로 전역 컨텍스트와 관련된 코드들을 순차로 진행하다가 (3)에서 outer함수를 호출하면 자바스크립트 엔진은 outer에 대한 환경 정보를 수집해서 outer 실행 컨텍스트를 생성한 후 콜 스택에 담는다.
3. 콜 스택 맨 위에는 outer 실행 컨텍스트가 놓인 상태가 됐으므로 전역 컨텍스트와 관련된 코드의 실행을 일시 중단하고 대신 outer 실행 컨텍스트와 관련된 코드, 즉 outer함수 내부의 코드들을 순차로 실행한다.
4. 다시 (2)에서 inner 함수의 실행 컨텍스트가 콜 스택 가장 위에 담기면 outer 컨텍스트와 관련된 코드의 실행을 중단하고 inner 함수 내부의 코드를 순서대로 진행한다.
5. inner 함수 내부에서 a 변수에 값 3을 할당하고 나면 inner 함수의 실행이 종료되면서 실행 컨텍스트가 콜 스택에서 제거된다.
6. 아래에 있던 outer 컨텍스트가 콜스택의 맨 위에 존재하게 되므로 중단했던 (2)의 다음 줄 부터 이어서 실행된다.
7. a 변수의 값을 출력하고 나면 outer함수의 실행이 종료되어 outer 실행 컨텍스트가 콜 스택에서 제거되고, 콜 스택에는 전역 컨텍스트만 남게 된다.
8. 실행을 중단 했던 (3)의 다음 줄부터 이어서 실행되며 a 변수의 값을 출력하고 나면 전역 공간에는 더이상 실행할 코드가 남아 있지 않아 전역 컨텍스트도 제거되고, 콜 스텍에는 아무것도 남지 않은 상태로 종료된다.

스택 구조를 잘 생각해보면 한 실행 컨텍스트가 콜 스택의 맨 위에 쌓이는 순간 곧 현재 실행할 코드에 관여하게 되는 시점임을 알 수 있다. 그리고 실행 컨텍스트가 활성화될 때 자바스크립트 엔진은 해당 컨텍스트에 관련된 코드들을 실행하는데 필요한 환경정보들을 수집해서 실행 컨텍스트 객체에 저장하게되는데 거기에 담기는 정보들은 아래와 같다.

• VariableEnvironment: 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경정보, 선언 시점의 LexicalEnvironment의 스냅샷으로 변경 사항은 반영되지 않는다.

• LexicalEnvironment: 처음에은 VariableEnvironment와 같지만 변경 사항이 실시간으로 반영된다.

• ThisBinding: this 식별자가 바라봐야 할 대상 객체.

VariableEnvironment

VariableEnvironment 같은 경우는 담기는 내용은 LexicalEnvironment와 동일하다, 하지만 최초 실행 시의 스냅샷을 유지한다는 점이 다르다. 실행 컨텍스트가 실행되면 VariableEnviroment에 정보가 담긴다음 복사본인 LexicalEnvironment를 만들어 코드 진행에 따라 달라지는 부분을 LexcialEnvironment 저장하게 된다.

LexicalEnvironment

LexicalEnvironment는 어휘적환경, 정적환경이라는 번역이 있지만, 이보다는 '사전적인'이 더욱 어울리는 표현이다. 즉 '현재 컨텍스트의 내부에는 a,b,c와 같은 식별자들이 있고 그 외부 정보는 d를 참조하도록 구성돼있다'라는, 컨텍스트를 구성하는 환경 정보들을 사전에서 접하는 느낌으로 모아놓은 것이다.

EnvironmentRecodrd와 호이스팅

to be continued..