[Javascript] Execution Context란?

 

1. Execution Context란?

Execution Context(실행 컨텍스트)는 실행 문맥이라고도 합니다. Execution Context는 굉장히 추상적인 개념인데요. 자바스크립트 코드가 실행될 때 생성되는 환경 및 실행에 필요한 정보를 관리하는 중요한 개념입니다. 자바스크립트 엔진은 코드를 실행할 때 현재 실행 중인 컨텍스트를 추적하며, 이 컨텍스트에는 코드가 실행되는 동안 필요한 데이터와 정보가 저장됩니다. 이번 글을 통해 Execution Context에 대해 자세히 알아보도록 하겠습니다.
 
 

2. Execution Context 종류

컨텍스트는 두 개 이상의 종류가 있고, 종류마다 특정 조건에 생성이 됩니다.

• 전역 실행 컨텍스트
  • 가장 기본이 되는 실행 컨텍스트 입니다. 자바스크립트 코드가 처음 실행되면 생성이 되고 코드 전체의 정보를 가집니다.
• 함수 실행 컨텍스트
  • 함수가 호출되면 함수 컨텍스트가 생성이 됩니다.
• Eval 실행 컨텍스트
  • Eval은 많은 취약점이 있어 사용하지 말 것을 권고합니다. 따라서, 사용하지 않을 것으로 알고 여기서는 다루지 않겠습니다. 단지, Eval코드가 실행 컨텍스트를 생성한다는 것 정도만 알면 되겠습니다.

 *eval
사용자로부터 입력된 문자열을 직접 실행하므로, 악의적인 사용자가 해로운 코드를 주입할 수 있는 보안 취약점을 열 수 있습니다. 이 외에도 코드 가독성, 성능에도 좋지 못합니다.

 

3. Execution Context  순서

이 컨텍스트들의 실행 순서를 결정하는 것이 바로 스택(stack)입니다. (LIFO: Last In, First Out)
가장 처음에 코드가 실행될 때 생성되는 전역 컨텍스트가 스택에 쌓입니다.
그리고, 코드에서 함수가 호출되는 부분이 읽히면 함수 컨텍스트가 생성되어 스택에 쌓입니다.
자바스크립트 엔진이 코드를 모두 읽고, 컨텍스트를 모두 생성해서 스택에 쌓고 난 후 쌓여 있는 스택의 꼭대기부터 순서대로 실행됩니다.
 
 

4. Execution Context 생성 과정

 

1. 글로벌 컨텍스트(Global Execution Context) 생성

• JavaScript 프로그램이 시작될 때, 전역 컨텍스트가 생성됩니다. 이것은 가장 바깥쪽 컨텍스트로, 코드의 모든 범위에서 접근 가능한 전역 객체(window 객체 브라우저 환경에서)를 가지고 있습니다.

2. 함수 호출 시 컨텍스트 생성

• 함수가 호출될 때마다 해당 함수의 실행 컨텍스트가 생성됩니다.
• 각 함수 호출은 자체 실행 컨텍스트를 가지며, 이 컨텍스트에는 함수의 지역 변수, 매개 변수, this 값 등이 포함됩니다.

3. 변수 객체(Variable Object) 생성

• 실행 컨텍스트 내에서 사용되는 변수 및 함수 선언을 저장하는 변수 객체가 생성됩니다. 이 변수 객체는 해당 컨텍스트에서 사용 가능한 식별자와 값에 대한 매핑을 관리합니다.

4. 스코프 체인(Scoping Chain) 생성

• 실행 컨텍스트는 변수 객체와 그 부모 컨텍스트의 변수 객체에 대한 스코프 체인을 설정합니다. 이 스코프 체인은 변수 검색을 위해 사용됩니다. 내부 컨텍스트는 외부 컨텍스트의 변수에 접근할 수 있지만 반대로는 불가능합니다.

5. this 바인딩

• 실행 컨텍스트 내에서 this 키워드가 어떤 값을 참조할지를 결정합니다. this는 함수가 어떻게 호출되었는지에 따라 다르게 동작합니다.

6. 코드 실행

• 실행 컨텍스트의 모든 설정이 완료되면, 코드가 실행됩니다. 코드는 변수 객체 및 스코프 체인을 통해 변수와 함수에 접근합니다.

7. 컨텍스트 종료

• 코드 실행이 완료되거나 함수가 반환되면 해당 실행 컨텍스트는 종료됩니다. 변수 객체와 스코프 체인은 메모리에서 해제되고, 컨텍스트가 이전 컨텍스트로 돌아갑니다.

8. 콜 스택 관리

• 실행 컨텍스트는 콜 스택(Call Stack)에 푸시(push)되고 팝(pop)됩니다. 스택에 가장 위에 있는 컨텍스트가 현재 실행 중인 컨텍스트입니다.

 

이러한 실행 컨텍스트의 생성과 종료 과정은 JavaScript 엔진에 의해 관리되며, 코드 실행 중에 스코프, 변수 및 함수의 범위를 지정하는 데 중요한 역할을 합니다.

 

---

* Lexical Environment(렉시컬 환경)

Lexical Environment는 코드 block, function, script를 실행하기 앞서 생성되는 특별한 객체로, 실행할 스코프 범위 안에 있는 변수와 함수를 프로퍼티로 저장하는 객체입니다. 즉, 우리가 소스 코드를 실행하면서 참조가 필요한 변수의 값을 이 Lexical Environment라는 객체에서 식별자 이름을 키로 찾는다고 보면 됩니다. 주요 구성요소는 환경 레코드(Envrionment Record), 외부 렉시컬 환경(Outer Lexical Environment)입니다.
 
1) Environment Record(환경 레코드)

• 현재 스코프 내에서 선언된 모든 변수 및 함수 선언을 포함하고 있는 저장소 역할을 합니다.
• 변수 이름, 함수 이름, 값 및 참조 등의 정보가 포함됩니다.

2) Outer Lexical Envrionment(외부 렉시컬 환경)

• 현재 환경과 관련된 외부 렉시컬 환경으로의 참조를 가집니다. 이것은 스코프 체인을 형성하고 변수를 검색하는 데 사용됩니다.

 

코드로 예를 들어, 다음의 코드에서 렉시컬 환경은 어떤 역할을 하는지 살펴봅시다

function outer() {
  let a = 10;

  function inner() {
    let b = 20;
    console.log(a + b);
  }

  inner();
}

outer();

• outer 함수의 렉시컬 환경에는 a 변수의 정보가 포함됩니다.
• inner 함수의 렉시컬 환경에는 b 변수의 정보와 외부 렉시컬 환경으로의 참조가 포함됩니다. 외부 렉시컬 환경은 outer 함수의 렉시컬 환경입니다.

 

렉시컬 환경은 변수 스코프 및 스코프 체인을 구성하며, 코드 실행 중에 변수에 접근하는 방법을 결정합니다. 이를 통해 JavaScript 엔진은 변수의 값이 어떻게 결정되는지를 이해하고 코드를 실행할 때 적절한 변수를 찾을 수 있습니다.