[JavaScript] 자바스크립트의 실행 컨텍스트란 무엇일까?

✅ 실행 컨텍스트 ( Execution Context )

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

 

스택

스택은 출입구가 하나인 LIFO ( Last in First Out ) 구조이다.

스택에 a,b,c,d를 순서대로 저장하면 꺼낼 때 d,c,b,a 순서대로 나온다.

 

실행 컨텍스트 예시

// --------------------------- (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. 처음 JS 코드를 실행하는 순간 전역 컨텍스트가 콜 스택에 담긴다. 전역 컨텍스트는 코드 내부에서 별도의 실행 명령이 없어도 브라우저에서 자동으로 실행하므로 자바스크립트 파일이 열리는 순간 전역 컨텍스트가 활성화된다고 이해하면 된다.
2. outer 함수를 호출하면 outer에 대한 환경 정보를 수집해서 outer 실행 컨텍스트를 생성한 후 콜 스택에 담는다.
3. 이후 outer 함수가 실행되고 inner 함수에 접근하여 inner 함수의 실행 컨텍스트가 콜 스택에 쌓인다.
4. inner 함수 실행이 끝나면 pop 되면서 inner 함수가 콜 스택에서 제거된다.
5. 바깥의 outer 함수 코드를 실행하고 끝나면 outer 함수가 콜 스택에서 제거된다.
6. 마지막으로 맨 아래에 있던 전역 컨텍스트 마저 실행시키고 콜 스택에서 제거된다.

 

콜 스택에 담기는 과정을 그림으로 나타내면 다음과 같다.

실행 컨텍스트가 콜 스택의 맨 위에 쌓이는 순간이 곧 현재 실행할 코드에 관여하게 되는 시점이다. 

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

실행 컨텍스트의 구성

VariableEnvironment

VariableEnvironment는 현재 컨텍스트 내의 식별자들에 대한 정보와 외부 환경 변수를 말한다.
최초 실행 시의 스냅샷을 유지하며, 변경 사항은 반영되지 않는다.

LexicalEnvironment

LexicalEnvironment는 변경사항이 실시간으로 반영된다.
LexicalEnvironment 내부는 OuterEnvironmentReference 와 EnvironmentRecord로 구성되어 있다.

ThisBinding

this 식별자가 바라봐야 할 대상 객체를 의미한다.

 

VariableEnvironment와 LexicalEnvironment에 담기는 내용은 같지만, 최초 실행 시의 스냅샷을 유지하는지의 유무에 따라 다르다.

실행 컨텍스트를 생성할 때, VariableEnvironment에 정보를 먼저 담은 다음 이를 그대로 복사해서 LexicalEnvironment를 만들고 이후에는 LexicalEnvironment를 주로 활용한다.

 

OuterEnvironmentReference

상위 스코프를 가리킨다. 즉, 현재 environment record보다 바깥에 있는 environment record를 참고한다는 뜻이며 해당 실행 컨텍스트를 생성한 함수의 바깥 환경을 가리킨다. 코드 상에서 어떤 변수에 접근하려고 하면 현재 컨텍스트의 LexicalEnvironment를 탐색해서 발견되면 그 값을 반환하고, 발견하지 못할 경우 다시 outerEnvironmentRecord에 담긴 LexicalEnvironment를 탐색하는 과정을 거친다. 전역 컨텍스트의 LexcialEnvironment까지 탐색해도 해당 변수를 찾지 못하면 undefined를 반환한다.

 

EnvironmentRecord

EnvironmentRecord 에는 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장된다.

컨텍스트 전체를 처음부터 끝까지 훑으며 순서대로 식별자들을 수집하는데 여기에서 수집되는 식별자들은 매개변수 식별자, 선언된 함수, var로 선언된 변수의 식별자 등이 해당된다.

 

변수 정보를 수집하는 과정을 모두 마쳐도 아직 실행 컨텍스트가 관여할 코드들은 실행되기 전의 상태이다.

즉, 자바스크립트는 식별자들을 최상단으로 끌어올려놓은 다음 실제 코드를 실행한다 => 호이스팅

 

📚 호이스팅 ( hoisting )

호이스팅이란 식별자가 코드의 최상단으로 끌어올린 것처럼 보이게 되는 것을 의미한다. 즉, 자바스크립트 엔진이 실제로 끌어올리지는 않지만 편의상 끌어올린 것처럼 간주하는 것이다. 

function a (x) {
  console.log(x);
  var a = 1;
  var b = 2;
  function foo() {
    console.log('work');
  };
}

a(1);

 

위의 코드에서 실행 컨텍스트의 environmentRecord에는 식별자 a,b,x와 함수 foo가 수집된다.

 

호이스팅은 코드 해석을 더 수월하게 하기 위해 environmentRecord의 수집 과정을 추상화한 개념으로, 실행 컨텍스트가 관여하는 코드 집단의 최상단으로 이들을 "끌어올린다"고 해석하는 것이다. 변수 선언과 값 할당이 동시에 이뤄진 문장은 "선언부"만을 호이스팅하고, 할당 과정은 원래 자리에 남아있게 된다.

---

다음에는 호이스팅에 대해서 더 자세히 다뤄봐야겠다~