호출 스택
함수 호출이 추적되는 방식을 살펴봅니다.
호출 스택은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
호출 스택이란 무엇인가요
호출 스택은 현재 실행 중인 함수와 함수가 돌아가야 할 위치를 JavaScript가 추적하는 방식입니다. 함수가 호출될 때마다 스택의 맨 위에 추가되고, 실행이 끝나면 제거됩니다.
이는 LIFO 구조입니다. 가장 나중에 들어온 것이 가장 먼저 나옵니다.
푸시와 팝
함수를 호출하면 스택 프레임이 추가됩니다. 함수가 반환되면 프레임이 제거됩니다. 호출이 중첩될 때 로그가 출력되는 순서를 살펴보세요.
function first() {
console.log('first start');
second();
console.log('first end');
}
function second() {
console.log('second');
}
first();실제로 동작하는 LIFO
가장 최근에 호출된 함수는 그 아래에 있는 함수가 재개되기 전에 완료되어야 합니다. 안쪽 호출은 나중에 시작되었지만 먼저 완료됩니다.
function a() {
console.log('enter a');
b();
console.log('exit a');
}
function b() {
console.log('enter b');
c();
console.log('exit b');
}
function c() {
console.log('c runs');
}
a();동기 실행은 차단을 의미합니다
JavaScript는 하나의 스레드에서 한 번에 한 가지 일만 실행합니다. 스택에 프레임이 있는 동안에는 다른 작업이 실행되지 않습니다. 동기 코드는 완료될 때까지 실행을 차단합니다.
console.log('start');
function busy() {
let sum = 0;
for (let i = 0; i < 1000; i++) sum += i;
return sum;
}
console.log(busy());
console.log('end');반환값은 아래로 흐릅니다
각 프레임이 제거될 때 반환값은 스택에서 아래쪽에 대기 중인 호출자에게 되돌아갑니다.
function square(n) {
return n * n;
}
function sumOfSquares(a, b) {
return square(a) + square(b);
}
console.log(sumOfSquares(3, 4));재귀는 스택을 늘립니다
재귀 호출이 발생할 때마다 프레임이 하나 더 추가됩니다. 기저 사례에 도달할 때까지 스택이 커진 다음, 프레임이 하나씩 풀리며 줄어듭니다.
function countdown(n) {
if (n === 0) {
console.log('liftoff');
return;
}
console.log(n);
countdown(n - 1);
}
countdown(3);스택 오버플로
스택의 크기는 유한합니다. 기저 사례가 없는 재귀는 엔진이 RangeError: 최대 호출 스택 크기를 초과했습니다를 발생시킬 때까지 프레임을 계속 추가합니다.
function endless(n) {
return endless(n + 1);
}
try {
endless(1);
} catch (e) {
console.log(e.name);
}실행 순서는 예측 가능합니다
스택은 엄격한 LIFO 방식으로 동작하고 실행이 동기적이므로 동기 로그의 순서는 항상 결정적입니다. 순서를 직접 추적할 수 있습니다.
function outer() {
console.log(1);
inner();
console.log(3);
}
function inner() {
console.log(2);
}
outer();
console.log(4);비동기 실행이 개입하는 지점
호출 스택은 동기 코드만 실행합니다. setTimeout과 같은 함수는 작업을 환경에 넘기고, 환경은 나중에 콜백을 대기열에 넣습니다. 이러한 콜백은 스택이 비어 있을 때만 실행됩니다.
이것이 이벤트 루프로 이어지는 다리입니다.
console.log('A');
setTimeout(() => console.log('B (later)'), 0);
console.log('C');먼저 스택이 비워져야 합니다
0밀리초 타이머라도 모든 동기 코드가 완료될 때까지 기다립니다. 스택에 프레임이 남아 있는 동안에는 콜백이 실행될 수 없습니다.
console.log('sync 1');
setTimeout(() => console.log('timeout'), 0);
console.log('sync 2');
console.log('sync 3');호출 스택이 중요한 이유
호출 스택을 이해하면 긴 동기 반복문이 페이지를 멈추게 하는 이유, 재귀가 오버플로를 일으킬 수 있는 이유, 비동기 콜백이 항상 마지막에 실행되는 이유를 알 수 있습니다. 호출 스택은 이벤트 루프의 모든 내용을 이해하는 기반입니다.
function compute() {
return [1, 2, 3].reduce((a, b) => a + b, 0);
}
console.log('before');
console.log(compute());
console.log('after');빠른 확인
호출 스택은 어떤 순서 원칙을 따를까요?
복습: 호출 스택
엔진의 실행 핵심을 배웠습니다.
- 호출 스택은 실행 중인 함수를 LIFO 순서로 추적합니다.
- JavaScript는 단일 스레드로 동작하며 동기 코드는 실행을 차단합니다.
- 재귀는 스택을 증가시키며 오버플로를 일으킬 수 있습니다.
- 비동기 콜백은 스택이 비워질 때까지 기다리며, 이를 통해 이벤트 루프로 이어집니다.
자주 묻는 질문
“호출 스택” 강의는 무료인가요?
네 — “호출 스택” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“호출 스택”에서 뭘 배우나요?
함수 호출이 추적되는 방식을 살펴봅니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“호출 스택” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.