Frontend/Javascript Essentials

실행 컨텍스트

JTB 2025. 10. 9. 22:37

먼저, 실행 컨텍스트를 바르게 이해하면

더보기

 

  • 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값(식별자 바인딩)을 관리하는 방식
  • 호이스팅이 발생하는 이유
  • 클로저의 동작 방식
  • 태스크 큐와 함께 동작하는 이벤트 핸들러
  • 비동기 처리의 동작 방식

을 이해할 수 있다.

 

 

1. 실행 컨텍스트란 ?

 

자바스크립트의 동작 원리를 담고 있는 핵심 개념으로서, 아래와 같은 특징을 갖는다.

 

실행 컨텍스트는

  • 자바스크립트 코드가 실행될 때, 해당 코드의 평가 및 실행에 필요한 환경 정보를 담는 객체이다.
  • 함수 호출 시마다 생성되며, 스코프 체인, 변수 환경, this 값 등을 포함한다.
  • 콜 스택에 쌓이며, 가장 위에 있는 컨텍스트만 실행된다.

 

2. 소스코드의 평가와 실행

모든 소스코드는 실행에 앞서 평가 과정을 거치며 코드를 실행하기 위한 준비를 한다.

 

즉, 자바스크립트 엔진은 소스코드를 2개의 과정인

1. 소스코드의 평가 2. 소스코드의 실행 과정으로 나누어 처리한다.

소스코드 평가

실행 컨텍스트를 생성하고, 변수, 함수 등의 선언문만 먼저 실행하는데,

이때 생성된 변수나 함수 식별자를 키로서 실행 컨텍스트가 관리하는 스코프(렉시컬 환경의 환경 레코드)에 등록한다.

규모순으로 실행 컨텍스트 > *렉시컬 환경 > 스코프 > 키-값(key-value) 이다.

 

*렉시컬 환경은 키와 값을 갖는 객체 형태의 스코프(전역, 함수, 블록 스코프)를 생성하여 식별자를 키로 등록하고 식별자에 바인딩된 값을 관리하는 자료구조이다. 실행 컨텍스트를 구성하는 컴포넌트로서 스코프와 식별자를 관리하는 메모리 공간이다.

소스코드 실행

소스코드 평가 과정이 끝나면 선언문을 제외한 소스코드가 순차적으로 실행되기 시작한다. 즉, 런타임이 시작된다.

런타임에서 필요한 변수나 함수의 참조를 실행 컨텍스트가 관리하는 스코프에서 검색 및 취득하여 사용한다.

그리고 소스코드의 실행 결과는 다시 실행 컨텍스트가 관리하는 스코프에 등록된다.

3. 실행 컨텍스트의 역할 상세

1. 전역 코드 평가

전역 코드의 변수 선언문과 함수 선언문이 먼저 실행되고,

생성된 전역 변수와 전역 함수가 실행 컨텍스트가 관리하는 전역 스코프에 등록된다.

var 키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수는 전역 객체의 프로퍼티와 메서드가 된다.

2. 전역 코드 실행

전역 코드 평가 과정이 끝나면 런타임 시작하여 전역 코드가 순차적으로 실행되는데, 전역 변수에 값이 할당되고 함수 호출된다. 순차적으로 실행되던 전역 코드의 실행을 일시 중단하고 코드 실행 순서를 변경하여 함수 내부로 진입한다.

3. 함수 코드 평가

매개변수와 지역 변수가 실행 컨텍스트가 관리하는 지역 스코프에 등록된다. 또한 함수 내부에서 지역 변수처럼 사용할 수 있는 arguments 객체가 생성되어 지역 스코프에 등록되고 this 바인딩도 결정된다.

4. 함수 코드 실행

함수 코드 평가 과정이 끝나면 런타임 시작, 함수 코드가 순차적으로 실행된다.

이때 매개변수와 지역 변수에 값이 할당되고 console.log 메서드가 호출된다.

 

 

이처럼 코드가 실행되려면

  • 스코프를 구분하여 식별자와 바인딩된 값이 관리되어야 한다.
  • 중첩 관계에 의해 스코프 체인을 형성하여 식별자를 검색할 수 있어야 한다.
  • 전역 객체의 프로퍼티도 전역 변수처럼 검색할 수 있어야 한다.
  • 함수 호출이 종료되면 함수 호출 이전으로 되돌아가기 위해 현재 실행 중인 코드와 이전에 실행하던 코드를 구분하여 관리해야 한다.

 

이 모든 것을 관리하는 것이 바로 실행 컨텍스트다.

실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다.

식별자(변수, 함수, 클래스 등의 이름)를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘으로,  모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다.

식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으로 관리하고 코드 실행 순서는 실행 컨텍스트 스택으로 관리한다.

4. 실행 컨텍스트 스택

 

 

이처럼, 자바스크립트 엔진은 먼저 전역 코드를 평가하면서 전역 실행 컨텍스트(Global Execution Context)를 생성한다. 함수가 호출되면, 해당 함수 코드를 평가하여 함수 실행 컨텍스트(Function Execution Context)를 생성한다. 모든 실행 컨텍스트는 스택(Stack) 자료구조로 관리되며, 이를 실행 컨텍스트 스택(Execution Context Stack, ECS)이라고 부른다. 코드가 실행되는 동안, 실행 컨텍스트 스택에는 실행 컨텍스트가 추가(push)되었다가 함수 실행이 끝나면 제거(pop)되는 방식으로 관리된다.

 

5. 마무리

결론적으로, 실행 컨텍스트는 자바스크립트 코드가 동작하는 근본적인 환경을 제공하고, 코드 실행과 데이터 관리를 총괄하는 핵심 구조다.

  • 변수, 함수, 클래스 등 식별자와 값의 바인딩을 스코프 단위로 관리하고,
  • 함수 호출과 종료에 따른 코드 실행 순서를 실행 컨텍스트 스택을 통해 조절하며,
  • 클로저, 호이스팅, 비동기 처리 등 자바스크립트 고유 동작 원리를 이해하는 기반이 된다.

즉, 실행 컨텍스트를 이해하면 자바스크립트 코드의 동작 방식과 내부 메커니즘을 명확히 파악할 수 있으며, 안정적이고 효율적인 코드 작성에 큰 도움이 된다.