JavaScript - 실행 컨텍스트와 콜 스택(Call Stack)

이번 글에서는 JavaScript의 동작 원리를 깊이 이해하는 데 필수적인 개념인 실행 컨텍스트(Execution Context)와 콜 스택(Call Stack)에 대해 다뤄보자.

이 개념을 이해하면 JavaScript의 호이스팅, 스코프, 클로저, 비동기 처리 등의 동작 방식을 보다 명확하게 파악할 수 있다.

 

---

1. 실행 컨텍스트란?

 

실행 컨텍스트(Execution Context)는 JavaScript 코드가 실행될 때 생성되는 환경을 의미한다.

코드가 실행되는 동안 변수, 함수, this의 값 등을 추적하며, JavaScript 엔진이 코드를 실행하는 방식을 결정한다.

 

* 실행 컨텍스트의 주요 역할 * 

- 코드 실행을 위한 환경 생성

- 변수와 함수 선언 저장

- 스코프와 this를 관리

- 호이스팅 처리

 

---

2. 실행 컨텍스트의 종류

 

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

- 자바스크립트가 실행될 때 가장 먼저 생성됨

- 전역 객체 (window 또는 global)와 전역 변수, 전역 함수 포함

- 코드가 실행되기 전 자동으로 생성됨

- this는 기본적으로 전역 객체를 가리킴

 

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

- 함수가 호출될 때마다 생성됨

- 함수 내부의 변수, 매개변수, 내부 함수 등을 관리

 

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

- eval() 함수가 실행될 때 생성됨 (보통은 사용을 지양한다)

 

---

3. 실행 컨텍스트 생성 과정 (메모리 구조)

 

실행 컨텍스트는 세 가지 단계를 거쳐 생성된다.

 

3-1. 생성 단계 (Creation Phase)

코드를 실행하기 전 메모리를 미리 할당하는 단계이다.

- 변수 선언 → undefined 할당 (var 키워드)

- 함수 선언 → 메모리에 전체 함수 저장

- this 값 설정

console.log(name); // undefined
var name = "Alice";

function sayHello() {
    console.log("Hello!");
}

Execution Context:
----------------------
name  →  undefined
sayHello  →  function() {...}
this  →  window (브라우저)

 

3-2. 실행 단계 (Execution Phase)

코드를 한 줄씩 실행하며, 변수를 할당하고 함수 호출을 수행한다.

name = "Alice"; // 값 할당
sayHello(); // "Hello!" 출력

 

3-3. 종료 및 제거 (Destroy Phase)

- 함수 실행이 끝나면 해당 실행 컨텍스트가 콜 스택에서 제거된다.

- 전역 실행 컨텍스트는 페이지가 닫힐 때까지 유지된다.

 

---

4. 콜 스택(Call Stack)이란 ?

 

콜 스택은 실행 컨텍스트를 관리하는 관리하는 자료구조로, LIFO (Last-In, First-Out) 구조를 가진다.

* LIFO : 마지막에 실행된 함수가 가장 먼저 제거

 

콜 스택의 동작 방식

function first() {
    console.log("First function");
    second();
}
function second() {
    console.log("Second function");
    third();
}
function third() {
    console.log("Third function");
}
first();

콜 스택의 변화를 보자.

1. first() 함수 호출 : first 실행 컨텍스트가 스택에 추가됨

2. second() 함수 호출 : second 실행 컨텍스트가 추가됨

3. third() 함수 호출 : third 실행 컨텍스트가 추가됨

4. third() 실행 완료 → 제거

5. second() 실행 완료 → 제거

6. first() 실행 완료 → 제거

 

---

5. 실행 컨텍스트와 비동기 처리

 

자바스크립트는 싱글 스레드(Single Thread) 환경에서 비동기 처리를 수행해야 한다

(* 자바스크립트는 싱글 스레드 기반 언어로, 한 번에 하나의 작업만을 처리할 수 있다. 이로 인해 시간이 오래 걸리는 작업이 실행되면 다른 작업들이 대기해야 하는 문제가 발생해서 비동기 처리로 수행해야 한다.)

이때 콜 스택과 이벤트 루프가 협력하여 비동기 처리를 관리한다.

 

* 이벤트 루프 : 싱글 스레드 환경에서 비동기 작업을 효율적으로 처리하기 위한 메커니즘

 

비동기 예제

console.log("Start");

setTimeout(() => {
    console.log("Async Operation");
}, 2000);

console.log("End");

1. console.log("Start") 실행 → 콜 스택에서 제거

2. setTimeout() 실행 → Web API에 넘기고 즉시 제거

3. console.log("End") 실행 → 콜 스택에서 제거

4. 2초 후, 콜백 함수가 태스크 큐(Task Queue)에 추가

5. 이벤트 루프가 콜 스택이 비어있는지 확인 후 실행

 

실행 결과

Start
End
Async Operation

 

---

정리

개념	설명
실행 컨텍스트	코드 실행 환경을 정의 (변수, 함수, this 포함)
콜 스택	실행 컨텍스트를 관리하는 LIFO 구조의 스택
호이스팅	변수와 함수 선언이 실행 컨텍스트 생성 단계에서 메모리에 할당됨
이벤트 루프	콜 스택과 Web API(Task Queue)를 연결하여 비동기 코드 실행
비동기 처리	Web API, 태스크 큐, 이벤트 루프가 협력하여 수행한다. 콜 스택이 비워져야 비동기 콜백이 실행된다.

 

 

끝.