[JavaScript] 동작 원리 ① – 실행 컨텍스트와 콜 스택 개념 정리

프론트엔드 개발을 하다 보면 자연스럽게 듣게 되는 말들이 있다.
"호이스팅", "콜 스택", "TDZ", 그리고 "실행 컨텍스트".
처음 들으면 뭔가 복잡하고 어려워 보이지만, 이건 결국 자바스크립트가 코드를 어떻게 읽고 실행하는지에 대한 이야기다.
오늘은 그중에서도 가장 기초가 되는 실행 컨텍스트와 콜 스택에 대해 정리해본다.

#  실행 컨텍스트란?

실행할 코드와 관련된 정보를 담고 있는 실행 환경이다.

자바스크립트는 코드를 실행하기 전, 먼저 해당 코드를 위한 실행 컨텍스트(Context)를 만든다.
이 안에는 아래와 같은 정보들이 담긴다

• 어떤 변수들이 있는지
• 어떤 함수가 정의되어 있는지
• 현재 this는 뭔지
• 어떤 스코프에 있는지

이런 정보들이 있어야 자바스크립트가 코드를 실행할 수 있다.

 

예를들어

function sayHi() {
  let msg = "Hi!";
  console.log(msg);
}
sayHi();

이 코드를 실행하면 브라우저는 다음과 같은 흐름으로 실행 컨텍스트를 만든다:

1. 전역 컨텍스트 생성 → sayHi 함수가 등록됨
2. sayHi() 호출 시 → 새로운 실행 컨텍스트 생성
3. msg 변수 선언 및 값 할당 → "Hi!" 출력
4. 함수 종료 → 컨텍스트 제거

##  실행 컨텍스트의 구성

실행 컨텍스트는 내부적으로 크게 세 가지로 구성된다.

1. Variable Environment(변수 정보들 (초기화 포함))
2. Lexical Environment(변수 + 외부 환경 참조)
3. this Binding(현재 this가 가리키는 객체)

복잡한 용어와 세부구조를 너무 파악하려하기보단
"자바스크립트는 코드를 실행할 때 실행 컨텍스트를 만들고, 이걸 스택처럼 쌓는다" 정도의 개념을 먼저 잡는 게 중요하다.

# 콜 스택(Call Stack)이란?

콜 스택은 여러 함수들(functions)을 호출하는 스크립트에서 해당 위치를 추적하는 인터프리터 (웹 브라우저의 JavaScript 인터프리터같은)를 위한 메커니즘

 

콜 스택은 실행 컨텍스트들이 쌓이는 자료 구조다.
간단히 말해서, 어떤 함수가 실행 중인지, 누가 누구를 불렀는지를 추적하는 용도.

 

예를들어

function one() {
  two();
}
function two() {
  console.log('hello');
}
one();

 

이 코드는 아래처럼 실행된다.

1. 전역 실행 컨텍스트 → one() 호출
2. → one 실행 컨텍스트 → two() 호출
3. → two 실행 컨텍스트 → 콘솔 출력
4. → two 종료 → one 종료 → 전역 종료

 이런 흐름이 전부 콜 스택 안에서 순서대로 관리된다.

 

그림으로 보면,

[ Call Stack ]
|             |
| two()       | ← 마지막으로 실행
| one()       |
| global()    | ← 처음 실행됨

→ 함수 실행 시 컨텍스트가 스택 위에 쌓였다가,
→ 함수 종료 시 스택에서 빠진다.

# 실행코드와 콜 스택을 예시로 완전 이해해보자.

예제코드

var x = 1;

function outer() {
  var y = 2;

  function inner() {
    var z = 3;
    console.log(x, y, z);
  }

  inner();
}

outer();

 

## 실행 흐름과 컨텍스트 스택

이 코드가 실행될 때 자바스크립트는 아래와 같은 실행 컨텍스트를 생성하고 관리한다.

 

1. 전역 컨텍스트(Global Execution Context)

 

• 코드 실행을 시작하면 가장 먼저 전역 실행 컨텍스트가 생성된다.
• 여기서 var x, function outer 가 메모리에 등록된다
• x는 1로 초기화되고, outer는 함수로 저장된다.

→ 콜 스택 상태

[ Global ]

 

2. outer() 함수 호출

 

• 자바스크립트는 outer()를 만나면 새로운 실행 컨텍스트를 생성해 콜 스택 위에 쌓는다.
• y = 2 선언, function inner 등록한다.

→ 콜 스택 상태

[ outer() ]
[ Global  ]

 

3. inner() 함수 호출

• inner() 함수 실행되면서 또 다른 실행 컨텍스트 생성
• z = 3 선언
• console.log(x, y, z) 실행

inner()의 실행 컨텍스트 안에는 다음과 같은 것들이 포함된다.

Variable Environment	z = 3
Lexical Environment	outer의 스코프 참조 (그래서 y 참조 가능)
this Binding	브라우저 환경이면 this === window (strict mode 아니면)

자바스크립트는 이때 각각의 값을 찾기 위해 스코프 체인(Lexical Environment)을 따라 올라간다.

• z → 현재(inner) 컨텍스트에서 찾음
• y → 한 단계 위(outer)에서 찾음
• x → 전역에서 찾음

그래서 출력 결과는,

1 2 3

 

→ 콜 스택 상태

[ inner() ]
[ outer() ]
[ Global  ]

 

4. 함수 종료 -> 콜 스택에서 제거

• inner() 종료 → 컨텍스트 제거
• outer() 종료 → 제거
• 마지막으로 전역 컨텍스트만 남음

→ 콜 스택 상태

[ Global ]

# 마무리 요약

• 실행 컨텍스트는 자바스크립트 실행에 필요한 정보의 묶음
• 함수가 호출될 때마다 새로운 컨텍스트가 만들어져 콜 스택에 쌓인다
• 이 개념을 이해하면 호이스팅, 비동기 처리, TDZ 등의 개념이 더 명확해진다

# [JavaScript] 동작 원리 다음글

[JavaScript] 동작 원리 ② – 이벤트 루프와 Queue 이해하기

 

 

 

 

# 참고

- ChatGPT

- https://developer.mozilla.org/ko/docs/Glossary/Call_stack