[JavaScript] 호출스택

호출스택이란?

호출 스택은 현재 어떤 함수가 동작하고 있는지, 그 함수 내에서 어떤 함수가 동작하는지, 다음에 어떤 함수가 호출되어야하는지 등을 제어한다.
MDN

호출 스택은 스택이라는 단어에서 알 수 있듯이 LIFO(Last In First Out) 구조이다.

호출되는 모든 함수는 호출 스택에 추가되고 추가되는 역순으로 실행되는 구조이다.

 

예제

function a() {
  b();
  console.log("aaa");
}

function b() {
  c();
  console.log("bbb");
}

function c() {
  console.log("ccc");
}

a();

위의 코드를 실행했을 때 결과는 어떻게 나올까?

정답은 아래와 같다.

ccc
bbb
aaa

 

위 코드는 다음과 같이 실행된다. 호출스택은 아래에서 위로 쌓이는 구조로 그렸다.

1. a() 함수를 호출

2. 호출 스택에 a() 함수를 추가

호출스택
a()

콘솔창

3. a() 함수를 실행

4. a() 함수 안에 있는 b() 함수를 호출 스택에 추가

호출스택
b()
a()

콘솔창

5. b() 함수 실행

6. b() 함수 안에 있는 c() 함수를 호출 스택에 추가

호출스택
c()
b()
a()

콘솔창

7. c() 함수 안에 있는 console.log("ccc") 실행하고 c() 함수를 호출 스택에서 제거

호출스택
b()
a()

콘솔창
ccc

8. b() 함수 안에 있는 console.log("bbb")를 실행하고 b() 함수를 호출 스택에서 제거

호출스택
a()

콘솔창
ccc
bbb

9. a() 함수에 있는 console.log("aaa")를 실행하고 a() 함수를 호출 스택에서 제거

호출스택

콘솔창
ccc
bbb
aaa

10. 끝