[JS] Execution context

자바스크립트의 **Execution Context(실행 컨텍스트)**는 코드가 실행되는 환경을 의미하며, 자바스크립트 엔진이 코드를 평가하고 실행할 때마다 만들어지는 개념입니다. 각 함수 호출이나 코드 실행 시 마다 새로운 실행 컨텍스트가 생성되며, 이는 자바스크립트 코드가 어떻게 실행되고 변수 및 함수가 어떻게 접근 가능한지를 결정합니다. Execution Context는 크게 세 가지 유형으로 나뉩니다:

 

1. Global Execution Context (전역 실행 컨텍스트):

• 스크립트가 처음 실행될 때 만들어지는 컨텍스트입니다.

• 전역 객체와 전역 변수, 함수들이 저장됩니다.

• 하나의 전역 실행 컨텍스트만 존재하며, 자바스크립트 프로그램 종료 시까지 유지됩니다.

2. Function Execution Context (함수 실행 컨텍스트):

• 함수가 호출될 때마다 생성되는 컨텍스트입니다.

• 각 함수 호출마다 새로운 실행 컨텍스트가 만들어지고, 함수가 종료되면 컨텍스트가 사라집니다.

• 함수 내부에 정의된 변수와 함수가 포함되며, 호출된 함수의 로컬 변수, 매개변수, 내부 함수 등을 처리합니다.

3. Eval Execution Context (Eval 실행 컨텍스트):

• eval() 함수로 코드를 실행할 때 만들어지는 컨텍스트입니다.

• 하지만 eval() 함수는 보안 문제와 성능 문제로 인해 사용이 권장되지 않습니다.

 

Execution Context의 구성 요소

 

실행 컨텍스트는 아래 세 가지 요소로 구성됩니다:

 

1. Variable Environment (변수 환경):

• 해당 컨텍스트에서 선언된 변수를 저장합니다.

• let, const로 선언된 변수는 TDZ(Temporal Dead Zone) 상태에 있다가 초기화되면 사용됩니다.

2. Lexical Environment (렉시컬 환경):

• 변수와 함수 선언을 포함한 코드의 물리적 범위 정보를 담고 있습니다.

• 스코프와 클로저가 동작하는 원리의 기반이 되는 환경입니다.

3. This Binding (this 바인딩):

• 실행 컨텍스트마다 this 값이 결정되며, 이는 호출 방식에 따라 다릅니다.

• 전역 컨텍스트에서는 this는 전역 객체(window 객체)를 참조하고, 함수 내부에서는 호출 방법에 따라 this 값이 결정됩니다.

 

Execution Context의 생성 및 실행 과정

 

1. Creation Phase (생성 단계):

• 자바스크립트 엔진이 코드를 평가하면서 실행 컨텍스트가 생성되는 단계입니다.

• 이때 변수 선언(var), 함수 선언, 그리고 this 바인딩이 설정됩니다.

• 변수 호이스팅이 이 단계에서 이루어지며, 선언된 변수와 함수는 메모리에 저장됩니다. (var 변수는 undefined로 초기화)

2. Execution Phase (실행 단계):

• 코드가 실제로 실행되는 단계입니다.

• 변수에 값이 할당되고, 함수가 호출되며, 연산이 이루어집니다.

 

스택 구조와 실행 컨텍스트

 

자바스크립트의 실행 컨텍스트는 스택 구조로 관리됩니다. 이 스택을 Execution Context Stack 또는 Call Stack이라고 합니다. 자바스크립트 엔진은 스택 구조를 사용하여 함수를 순서대로 실행하고, 마지막으로 호출된 함수가 먼저 처리됩니다(LIFO: Last In, First Out).

 

• 전역 실행 컨텍스트가 스택의 가장 아래에 위치합니다.

• 함수 호출 시 해당 함수의 실행 컨텍스트가 스택에 쌓이고, 함수 실행이 끝나면 스택에서 제거됩니다.

 

function foo() {
  console.log("foo");
}

function bar() {
  foo();
}

bar();

 

위 코드에서:

 

1. 전역 컨텍스트가 스택에 들어갑니다.

2. bar()가 호출되면, bar()의 실행 컨텍스트가 스택에 쌓입니다.

3. foo()가 bar() 내부에서 호출되면, foo()의 실행 컨텍스트가 스택에 추가됩니다.

4. foo() 실행이 끝나면, foo()의 컨텍스트가 스택에서 제거되고, 그 다음 bar()가 제거됩니다.

 

이러한 구조 덕분에 자바스크립트는 함수를 호출하고 처리하는 순서를 관리합니다.

 

렉시컬 환경과 스코프 체인

 

렉시컬 환경은 **스코프 체인(Scope Chain)**을 통해 상위 컨텍스트에 접근할 수 있도록 연결됩니다. 함수 내에서 변수를 찾지 못하면 상위 스코프(렉시컬 환경)에서 해당 변수를 찾습니다.

 

let a = 10;
function outer() {
  let b = 20;
  function inner() {
    console.log(a, b); // a는 상위 스코프에서, b는 내부 스코프에서 찾음
  }
  inner();
}
outer();

 

여기서 inner 함수는 상위 함수 outer와 전역 스코프에서 변수 a와 b를 찾습니다. 이를 스코프 체인이라 합니다.

 

요약:

**Execution Context(실행 컨텍스트)**는 자바스크립트 코드가 실행되는 환경을 나타내며, 코드가 실행될 때마다 생성됩니다. 전역 실행 컨텍스트는 스크립트가 처음 실행될 때 생성되고, 함수 실행 컨텍스트는 함수 호출 시마다 생성됩니다. 각 실행 컨텍스트는 변수 환경, 렉시컬 환경, 그리고 this 바인딩으로 구성됩니다. 실행 컨텍스트는 스택 구조로 관리되며, 가장 마지막에 호출된 함수가 먼저 실행되는 방식으로 처리됩니다. 스코프 체인을 통해 상위 스코프에서 변수를 찾을 수 있습니다.