[JS] 실행 컨텍스트

실행 컨텍스트란?

코드가 실행될 때마다 생성되는 환경(상자)를 의미한다.

이 상자안에는 코드가 실행될 때 필요한 모든 정보가 담겨있다. 

예를 들어, 어떤 함수가 실행된다면 그 함수만의 실행 컨텍스트가 생성된다.

이 컨텍스트들은 Call Stack(= Execution Context Stack) 에 쌓이며 실행된다.

 

실행 컨텍스트가 만들어지는 경우

1. 전역 코드가 실행될때 전역 실행 컨텍스트가 생성된다.
2. 함수가 호출 될 때마다 함수 실행 컨텍스트가 생성된다.
3. eval 코드 실행 시 
4. 모듈 코드 실행 시

 

실행 컨텍스트의 구성

✔️ 실행 컨텍스트의 핵심적인 구성요소 : Lexical Environment (렉시컬 환경)

실행 컨텍스트가 참조하는 가장 중요한 데이터 구조

내부 구조는 다음과 같다.

EnvironmentRecord (EnvRec)	실제 변수/함수 등이 바인딩되는 저장소
OuterEnvironmentReference (OuterEnvRef)	현재 컨텍스트의 상위 스코프 참조 (스코프 체인 역할)

-> 즉, 렉시컬 환경은 현재 컨텍스트의 변수 저장소 + 상위 스코프 포인터로 이루어져있다.

 

✔️ 전역(Global) 컨텍스트 구성

GlobalExecutionContext	전역 컨텍스트는 Global Lexical Environment를 참조함
GlobalLexicalEnvironment	let, const, class 선언 등 관리 (strict mode도 여기 포함)
GlobalEnvironmentRecord	실제 전역에 선언된 변수와 함수 (var, function) 등이 들어감 + this → 글로벌 객체 (window 등)

여기서 Global Lexical Environment는 내부적으로 다음 두가지로 나뉜다.

• Object Environment Record: var, function 은 전역객체에 바인딩된다.
• Declarative Evironment Record: let, const, class, import 등은 별도로 이곳에 저장된다.

 

✔️ 함수 (블록, 모듈) 컨텍스트 구성

FunctionExecutionContext	함수 실행 시마다 생성되는 실행 컨텍스트
FunctionLexicalEnvironment	함수 내의 변수, 매개변수, 내부 함수 등을 저장
FunctionEnvironmentRecord	LexicalEnvironment와 VariableEnvironment가 포함됨
OuterEnvRef	이 함수가 어디서 선언되었는지를 기억함 (클로저의 핵심!)

실행 컨텍스트의 2단계

✔️ Memory Creation Phase (메모리 생성 단계)

• 전역 객체를 생성한다.  (브라우저-window, Node.js- global 객체)
• this 바인딩을 설정한다. (전역 컨텍스트에서 this는 글로벌 객체를 참조)
• 변수와 함수들을 메모리에 등록한다. (변수는 undefined 로 초기화, 함수 선언은 전체 함수 객체로 저장)
  👉 이 단계에서 바로 연결되는 개념이 바로 Hoisting(호이스팅)이다.

❓ 전역객체란?

JS Runtime(engine) process 시작 시 맨 먼저 생성된다.
Built-in API를 보유한다. (Infinity, NaN, undefined, null, eval(), isNaN(), parseInt(), encodeURI())
Host Object 및 우리가 var, function으로 선언한 전역 변수/함수도 보유한다. (let, const는 전역 객체에 등록X)

Host Object = 브라우저 - window, document, location / Node.js - process, require 등

⚠️ 전역 변수는 메모리상 영원히 존재한다.

전역 컨텍스트는 앱이 종료될 때까지 살아 있기 때문에, 전역 변수는 GC(가비지 컬렉션)에 수거되지 않는다.
메모리 낭비 위험이 있으며, 여러 스크립트가 공유하는 전역 객체를 오염시킬 수도 있다.
→ 따라서 모듈화, 클로저, 블록 스코프(let/const) 등을 적극 활용하는 게 좋다.

 

✔️ Execution Phase (코드 실행 단계)

• 한 줄씩 코드 실행한다.
• 값을 할당하거나 함수를 호출한다.
• 함수가 호출되면 → 새로운 실행 컨텍스트 생성 → 위 과정을 반복한다.

 

예제

function fn() {
  let l1 = 1;
  var v1 = 2;
  function ifn() {
    return this?.x ?? 0 + l1;
  }
  if (v1 > 1) {
    let l2 = 3;
    var v2 = 4;
    console.log(v1, v2);
  }
  return ifn;
}

var xf = fn();
var y = xf.bind({ x: 10 });
let x = 1;
console.log(y(), x);

위와같은 코드의 실행컨텍스트 구조를 대략 그려보면 다음과 같이 그려질 수 있다.