실행 컨텍스트 (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
스택 구조를 잘 생각해보면 한 실행 컨텍스트가 콜 스택의 맨 위에 쌓이는 순간 곧 현재 실행할 코드에 관여하게 되는 시점임을 알 수 있다. 그리고 실행 컨텍스트가 활성화될 때 자바스크립트 엔진은 해당 컨텍스트에 관련된 코드들을 실행하는데 필요한 환경정보들을 수집해서 실행 컨텍스트 객체에 저장하게되는데 거기에 담기는 정보들은 아래와 같다.
VariableEnvironment: 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경정보, 선언 시점의 LexicalEnvironment의 스냅샷으로 변경 사항은 반영되지 않는다.
LexicalEnvironment: 처음에은 VariableEnvironment와 같지만 변경 사항이 실시간으로 반영된다.
ThisBinding: this 식별자가 바라봐야 할 대상 객체.
VariableEnvironment 같은 경우는 담기는 내용은 LexicalEnvironment와 동일하다, 하지만 최초 실행 시의 스냅샷을 유지한다는 점이 다르다. 실행 컨텍스트가 실행되면 VariableEnviroment에 정보가 담긴다음 복사본인 LexicalEnvironment를 만들어 코드 진행에 따라 달라지는 부분을 LexcialEnvironment 저장하게 된다.
LexicalEnvironment는 어휘적환경, 정적환경이라는 번역이 있지만, 이보다는 '사전적인'이 더욱 어울리는 표현이다. 즉 '현재 컨텍스트의 내부에는 a,b,c와 같은 식별자들이 있고 그 외부 정보는 d를 참조하도록 구성돼있다'라는, 컨텍스트를 구성하는 환경 정보들을 사전에서 접하는 느낌으로 모아놓은 것이다.
to be continued..