실행 컨텍스트 가볍게 이해하기

자바스크립트를 조금 공부하다보면 실행 컨텍스트라는 용어를 한 번쯤 들어보게 된다. 이 개념을 확실하게 이해하기 위해 간단한 예제 코드를 통해 실행 컨텍스택과 실행 컨텍스트를 저장하는 스택의 동작 방식을 알아보자.

실행 컨텍스트(execute context)란?

실행 컨텍스트는 말 그대로 코드를 실행할 때 필요한 정보(맥락)를 의미한다. 이 정보에는 구체적으로 변수, 함수 선언, this 값 등이 포함된다. 

자바스크립트 엔진은 코드를 실행할 때 실행 컨텍스트를 생성하고, 이를 실행 컨텍스트 스택에 쌓아 관리한다.

실행 컨텍스트의 종류는 크게 4가지로 구분할 수 있는데, 그 중 자주 쓰이는 전역 실행 컨텍스트(Global Execution Context)와 함수 실행 컨텍스트(Function Execution Context)에 대해서만 알아보고자 한다.

예제를 통해 실행 컨텍스트 알아보기

다음 코드를 통해 실행 컨텍스트 스택의 동작을 살펴보도록 하자.

function a() {
  console.log("🍌");
}

function b() {
  a();
  console.log("🍎");
}

b();

 

이 코드가 실행될 때 실행 컨텍스트 스택은 다음과 같이 변화한다.

실행 컨텍스트 스택의 변화

우선 자바스크립트 엔진이 전역 실행 컨텍스트 생성해 실행 컨텍스트 스택에 추가한다. 나머지 함수는 함수가 호출될 때마다 실행 컨텍스트에 추가된다. 함수의 실행이 종료되면 각 실행 컨텍스트는 스택에서 사라지게 된다. 그래서 가장 최근에 추가된 컨텍스트는 현재 실행 중인 컨텍스트라고 이해하면 된다.

실행 컨텍스트의 구성 요소

ecma262에 따르면 실행 컨텍스트는 LexicalEnvironment, VariableEnvironment, PrivateEnvironment 3가지 종류가 있다. 이 중 가장 중요한 LexicalEnvironment에 집중해서 살펴보겠다.

lexicalEnvironment

lexicalEnvironment는 environmentRecord 와 outerEnvironmentReference 2가지 정보를 수집한다. environmentRecord는 현재 컨텍스트와 관련된 코드의 식별자 정보를 순서대로 저장한다. 식별자 정보는 매개변수, var로 선언된 변수, 선언한 함수 자체 등이 있다.

마치 요리를 하기전 재료를 살펴 보는 것과 같은 느낌!?

JavaScript 엔진이 코드를 실행하기 전에 코드에서 사용할 변수와 함수를 모두 알고 있기 때문에 변수와 함수의 선언을 해당 스코프의 최상단으로 끌어올리는 것처럼 보이는 호이스팅이 일어나는 것이다.

environmentRecord

environmentRecord는 현재 컨텍스트와 관련된 코드의 식별자 정보를 순서대로 저장하고 있다.

 

 

outerEnvironmentReference 

outerEnvironmentReference에서는 현재 호출된 함수가 선언될 당시의 LexicalEnvironment를 참조한다.