실행 컨텍스트, 클로저, 호이스팅

실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 의미한다. 이 글에서는 실행 컨텍스트의 전문적인 개념과 예제를 통해 이해를 돕고자 한다.

실행 컨텍스트의 구성 요소

실행 컨텍스트는 다음 세 가지 구성 요소로 이루어져 있다.

렉시컬 환경(Lexical Environment)

변수 환경(Variable Environment)

this 바인딩(This Binding)

렉시컬 환경(Lexical Environment)

렉시컬 환경은 실행 컨텍스트에서 변수와 함수를 저장하는 곳이다. 이는 환경 레코드(Environment Record)와 외부 렉시컬 환경(Outer Lexical Environment)으로 구성된다.

환경 레코드(Environment Record)

환경 레코드는 실제로 변수와 함수를 저장하는 공간이다. 이는 선언적 환경 레코드(Declarative Environment Record)와 객체 환경 레코드(Object Environment Record)로 나뉜다.

외부 렉시컬 환경(Outer Lexical Environment)

외부 렉시컬 환경은 상위 실행 컨텍스트의 렉시컬 환경을 참조하는 것으로, 스코프 체인을 구성한다.

변수 환경(Variable Environment)

변수 환경은 실행 컨텍스트 생성 시점의 렉시컬 환경을 복사한 것으로, var 선언 변수를 관리한다.

this 바인딩(This Binding)

this 바인딩은 함수 호출 시 this 키워드가 참조하는 객체를 저장한다.

실행 컨텍스트의 생성 및 관리

자바스크립트에서 코드 실행 시 실행 컨텍스트 스택(EC Stack)에 실행 컨텍스트가 생성되어 쌓인다. 실행이 완료되면 스택에서 제거된다.

예제

function outer() {
  var x = 10;

  function inner() {
    console.log(x);
  }

  inner();
}

outer();

전역 실행 컨텍스트 생성 및 실행 컨텍스트 스택에 쌓임

outer 함수 실행 컨텍스트 생성 및 실행 컨텍스트 스택에 쌓임

inner 함수 실행 컨텍스트 생성 및 실행 컨텍스트 스택에 쌓임

inner 함수 실행이 완료되면 inner 실행 컨텍스트 스택에서 제거

outer 함수 실행이 완료되면 outer 실행 컨텍스트 스택에서 제거

이처럼 실행 컨텍스트는 코드 실행 과정에서 생성되고 관리된다. 이를 통해 스코프와 클로저, 호이스팅 등과 같은 개념을 이해하는 데 도움이 된다.

클로저(Closure)

클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합으로, 함수 내부에서 외부 함수의 변수에 접근할 수 있는 기능이다. 실행 컨텍스트와 렉시컬 환경을 이해하면 클로저를 쉽게 이해할 수 있다.

예제

function outer() {
  var x = 10;

  function inner() {
    console.log(x);
  }

  return inner;
}

var innerFunc = outer();
innerFunc(); // 10

outer 함수 실행 컨텍스트가 생성되고 x 변수가 렉시컬 환경에 저장된다.

inner 함수는 outer 함수의 렉시컬 환경을 참조한다.

outer 함수 실행이 종료되어 실행 컨텍스트 스택에서 제거되더라도, inner 함수가 outer 함수의 렉시컬 환경을 참조하고 있기 때문에 x 변수에 접근할 수 있다.

호이스팅(Hoisting)

호이스팅은 변수와 함수의 선언이 코드 실행 전에 메모리에 할당되는 현상이다. 실행 컨텍스트의 생성 과정에서 이루어진다.

예제

console.log(a); // undefined
console.log(b); // ReferenceError: b is not defined

var a = 10;

console.log(a); // 10

전역 실행 컨텍스트 생성 시점에 변수 a가 메모리에 할당되고 undefined로 초기화된다. (변수 호이스팅)

변수 a의 값이 10으로 할당된다.

주의사항

함수 표현식과 함수 선언식의 차이로 인해 호이스팅이 다르게 동작한다.

console.log(func1); // [Function: func1]
console.log(func2); // undefined

function func1() {
  console.log('Function Declaration');
}

var func2 = function () {
  console.log('Function Expression');
};

함수 선언식은 호이스팅 시 함수 전체가 메모리에 할당되지만, 함수 표현식은 변수 호이스팅만 발생한다.

이처럼 실행 컨텍스트는 자바스크립트에서 핵심적인 역할을 수행한다. 실행 컨텍스트를 이해하면 자바스크립트의 동작 원리를 보다 명확하게 이해할 수 있으며, 클로저, 호이스팅 등과 같은 개념도 쉽게 파악할 수 있다.

Made with SlashPage