자바스크립트 실행 컨텍스트(Context)란 무엇인가? - 코드가 실행되는 진짜 순서 이해하기
개발/javascript&typescript1 2025. 12. 23. 07:55자바스크립트를 공부하다 보면 스코프, 호이스팅, this 같은 개념들이 한 번에 몰려 나오는 구간이 있습니다. 이때 거의 항상 같이 등장하는 개념이 바로 "실행 컨텍스트"입니다.
말이 조금 어려워 보이지만, 실행 컨텍스트는 자바스크립트가 코드를 어떻게 읽고, 어떤 순서로 실행하는지를 설명하는 핵심 개념이라고 보시면 됩니다.
이번 글에서는 실행 컨텍스트가 무엇인지, 왜 필요한지, 그리고 실제 코드 실행과 어떤 관계가 있는지 차근차근 풀어보겠습니다.
실행 컨텍스트란 무엇일까?
실행 컨텍스트(Execution Context)는 자바스크립트 엔진이 코드를 실행하기 위해 만들어 놓는 환경이라고 이해하시면 됩니다.
코드가 실행될 때 필요한 정보들을 한 덩어리로 묶어 관리하는 공간이라고 생각하면 조금 더 편합니다.
이 안에는 다음과 같은 정보들이 들어 있습니다.
- 현재 실행 중인 코드의 종류
- 변수와 함수 선언 정보
- 스코프 체인
- this가 무엇을 가리키는지에 대한 정보
즉, 실행 컨텍스트는 "이 코드를 어떤 환경에서, 어떤 규칙으로 실행할 것인가"를 정리해 둔 실행 단위입니다.
실행 컨텍스트는 언제 만들어질까?
자바스크립트 파일이 실행되면, 엔진은 가장 먼저 하나의 실행 컨텍스트를 생성합니다. 그리고 함수가 호출될 때마다 새로운 실행 컨텍스트가 추가로 만들어집니다.
정리하면 실행 컨텍스트는 다음과 같은 순간에 생성됩니다.
- 자바스크립트 코드가 처음 실행될 때
- 함수가 호출될 때
- eval 함수가 실행될 때(실무에서는 거의 사용하지 않음)
이 중에서 가장 중요한 것은 첫 번째와 두 번째입니다.
실행 컨텍스트의 종류
실행 컨텍스트는 크게 세 가지로 나눌 수 있습니다.
1) 전역 실행 컨텍스트(Global Execution Context)
자바스크립트 코드가 시작될 때 가장 먼저 생성되는 실행 컨텍스트입니다.
프로그램 전체에서 단 하나만 존재합니다.
전역 실행 컨텍스트의 특징은 다음과 같습니다.
- 전역 변수와 전역 함수가 여기에 등록됩니다
- 브라우저 환경에서는 this가 window를 가리킵니다
- Node.js 환경에서는 this가 module.exports를 가리킵니다
모든 실행의 출발점이라고 생각하시면 됩니다.
2) 함수 실행 컨텍스트(Function Execution Context)
함수가 호출될 때마다 새롭게 생성되는 실행 컨텍스트입니다.
같은 함수라도 호출될 때마다 서로 다른 실행 컨텍스트가 만들어집니다.
함수 실행 컨텍스트에는 다음 정보들이 포함됩니다.
- 함수의 매개변수
- 함수 내부에서 선언된 변수와 함수
- 외부 스코프에 대한 참조 정보
- this 바인딩 값
이 때문에 함수 호출이 중첩될수록 실행 컨텍스트도 차곡차곡 쌓이게 됩니다.
3) eval 실행 컨텍스트
eval 함수 내부에서 실행되는 코드를 위한 컨텍스트입니다.
보안과 성능 이슈 때문에 실무에서는 거의 사용되지 않으므로, 개념만 알고 넘어가셔도 충분합니다.
실행 컨텍스트의 생성 과정
실행 컨텍스트는 만들어질 때 두 단계로 나뉘어 처리됩니다.
1단계: 생성 단계(Creation Phase)
이 단계에서는 실제 코드 실행은 아직 하지 않고, 필요한 정보만 미리 준비합니다.
- 변수 선언을 메모리에 등록
- 함수 선언을 메모리에 등록
- 스코프 체인 구성
- this 값 결정
이 과정에서 바로 우리가 많이 들어본 호이스팅 현상이 발생합니다.
변수와 함수가 실제 코드보다 먼저 등록되는 이유가 바로 이 단계 때문입니다.
2단계: 실행 단계(Execution Phase)
생성 단계가 끝나면, 이제 코드가 한 줄씩 실행됩니다.
- 변수에 실제 값이 할당됩니다
- 함수가 호출됩니다
- 연산이 수행됩니다
이 단계에서야 비로소 우리가 작성한 코드가 눈에 보이는 결과를 만들어냅니다.
실행 컨텍스트와 호이스팅의 관계
아래 코드를 예로 들어보겠습니다.
console.log(a);
var a = 10;이 코드가 에러 없이 실행되는 이유는, 실행 컨텍스트 생성 단계에서 이미 a라는 변수가 메모리에 등록되었기 때문입니다.
다만 값 할당은 실행 단계에서 이루어지므로, 출력 결과는 undefined가 됩니다.
함수 선언문도 같은 원리로 동작합니다.
함수 전체가 생성 단계에서 등록되기 때문에, 선언 위치보다 위에서 호출해도 정상 동작하게 됩니다.
실행 컨텍스트와 콜 스택(Call Stack)
실행 컨텍스트는 콜 스택이라는 구조 안에서 관리됩니다.
- 전역 실행 컨텍스트가 가장 먼저 스택에 들어갑니다
- 함수가 호출되면 함수 실행 컨텍스트가 스택 위에 쌓입니다
- 함수 실행이 끝나면 해당 컨텍스트는 스택에서 제거됩니다
이 구조 덕분에 자바스크립트는 "어떤 함수가 끝난 뒤 어디로 돌아가야 하는지"를 정확히 알 수 있습니다.
실행 컨텍스트를 이해하면 뭐가 달라질까?
실행 컨텍스트를 이해하면 다음과 같은 개념들이 한 번에 정리됩니다.
- 변수와 함수가 어디에서 접근 가능한지
- 호이스팅이 왜 발생하는지
- this가 상황에 따라 달라지는 이유
- 함수 호출 순서와 실행 흐름
특히 코드가 예상과 다르게 동작할 때, 실행 컨텍스트 관점에서 바라보면 원인이 훨씬 명확해지는 경우가 많습니다.
실행 컨텍스트는 자바스크립트 엔진이 코드를 실행하기 위해 만들어 놓는 실행 환경입니다.
코드 실행의 출발점이자, 스코프, 호이스팅, this, 콜 스택 같은 핵심 개념들을 모두 연결해 주는 중심 축이라고 보셔도 무방합니다.
처음에는 추상적으로 느껴질 수 있지만, 실제 코드 실행 흐름과 함께 하나씩 짚어보면 자바스크립트가 생각보다 논리적으로 동작한다는 점을 느끼실 수 있을 겁니다.
