2 실행 컨텍스트란?

 

실행 컨텍스트(execution context)는 실행할 코드에 제공할 환경 정보를 모아놓은 객체로, 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다. 어떤 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고(호이스팅), 외부 환경 정보를 구성하고, this 값을 설정하는 등의 동작을 수행한다

 

실행 컨텍스트를 살펴보기에 앞서 스택(stack)과 큐(queue)의 개념을 잠깐 알아보자.

 

스택과 큐

 

스택은 출입구가 하나뿐인 깊은 우물 같은 데이터 구조이다 비어 있는 스택이 a,b,c,d를 저장했다면 , 꺼낼 때는 반대로 d,c,b,a의 순서로 꺼낼 수밖에 없다 한편 큐는 양쪽이 모두 열려있는 파이프를 떠올리면 된다 종류에 따라 양쪽 모두 입력과 출력이 가능한 큐도 있으나 보통은 한쪽은 입력만, 다른 한쪽은 출력만을 담당하는 구조를 말한다 큐에 순서대로 데이터 a,b,c,d를 저장했다면 꺼날 때도 역시 a,b,c,d,의 순서로 꺼낼 수밖에 없다

 

앞서 실행 컨텍스트를 실행할 코드에 제공할 환경 정보들을 모아놓은 객체라고 했다. 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택(Call stack)에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다 흔히 실행 컨텍스트를 구성하는 방법은 함수를 실행하는 것이다 

 

// ------------------- (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)

 

위와 같은 코드가 있으면 처음 자바스크립트 코드를 실행하는 순간 전역 컨텍스트가 콜 스택에 담긴다 전역 컨텍스트라는 개념은 일반적인 실행 컨텍스트와 특별히 다를 것이 없다 최상단의 공간은 코드 내부에서 별도의 실행 명령이 없어도 브라우저에서 자동으로 실행하므로 자바스크립트 파일이 열리는 순간 전역 컨텍스트가 활성화된다고 이해하면 된다

 

코드들을 순차적으로 진행하다가 outer 함수를 호출하면 자바스크립트 엔진은 outer에 대한 환경 정보를 수집해서 outer 실행 컨텍스트를 생성한 후 콜 스택에 담는다 콜 스택의 맨 위에 outer 실행 컨텍스트가 놓인 상태가 됐으므로 전역 컨텍스트와 관련된 코드의 실행을 일시증단하고 대신 outer 실행 컨텍스트와 관련된 코드 즉 outer 함수 내부의 코드들을 순차로 실행한다 다시 inner 함수의 실행 컨텍스트가 콜 스택의 가장 위에 담기면 outer 컨텍스트와 관련된 코드의 실행을 중단하고 inner 함수 냐부의 코드를 순서대로 진행한다

 

inner 함수의 실행이 종료되면 inner 실행 컨텍스트가 콜 스택에서 제거된다 그러면 아래에 있던 outer 컨텍스트가 콜 스택의 맨 위에 존재하게 되므로 다음 줄부터 이어서 실행한다 a 변수의 값을 출력하고 나면 outer 함수의 실행이 종료되어 outer 실행 컨텍스트가 콜 스택에서 제거되고 , 콜 스택에는 전역 컨텍스트만 남아 있게 된다. 그런 다음, 실행을 중단했던 다음 줄부터 이어서 실행한다 a 변수의 값을 출력하고 나면 전역 공간에 더는 실행할 코드가 남아 있지 않아 전역 컨텍스트도 제거되고, 콜 스택에는 아무것도 남지 않은 상태로 종료된다

 

스택 구조를 잘 생각해보면 한 실행 컨텍스트가 콜 스택의 맨 위에 쌓이는 순간이 곧 현재 실행할 코드에 관여하게 되는 시점임을 알 수 있다 기존의 컨텍스트는 새로 쌓인 컨텍스트보다 아래에 위치할 수밖에 없기 때문이다 

 

이렇게 실행 컨텍스트가 활성화될 때 자바스크립트 엔진은 해당 컨텍스트에 관련된 코드들을 실행하는 데 필요한 환경 정보들을 수집해서 실행 컨텍스트 객체에 저장한다. 담기는 정보들은 다음과 같다

 

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

 

LexicalEnvironmental: 처음에는 VariableEnvironment와 같지만 변경 사항이 실시간으로 반영됨

 

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