Front-end33-js-concepts

33 JavaScript Concepts - Call Stack(호출 스택)

⏱ 읽기 소요 시간: 11 분

이 문서는 33 Concepts Every JavaScript Developer Should Know 주제로 노마드 코더(Nomad Coders)님이 강의한 내용을 정리하였습니다.

Call Stack(호출 스택)

  • Call Stack은 자바스크립트가 함수 실행을 핸들하는 방법 중 하나이다.
  • 자바스크립트가 실행해야하는 함수를 보면, 스택(Stack) 위에 올릴 것이다.
  • 스택(Stack)은 쌓아 올리는 것이다. (ex) 책을 쌓아올리거나 카드 스택을 만들거나 등등)
  • 자바스크립트는 함수를 그 스택 위에 올리고, 함수를 다 실행하면 제거한다.
  • 스택을 다 처리하면 실행할 게 없으므로 끝나는 것이다.
  • 예시를 위해 자바스크립트가 실행해야 하는 함수 리스트를 만들어 보자.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function three() {
  console.log("i love js");
}
function two() {
  three();
}
function one() {
  two();
}
function zero() {
  one();
}

zero();

// 스택에 올라가는 순서: zero -> one -> two -> three
// 스택에서 제거되는 순서: three -> two -> one -> zero

여기에 에러가 생기면 어떻게 될까?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function three() {
  console.log("i love js");
}
function two() {
  three();
}
function one() {
  two();
}
function zero() {
  one();
  throw Error("omg i am an error");
}

zero();

// i love js
// Error: omg i am an erro

만약 콜스택 상단에 에러가 있다면 어떻게 될까?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 만약 콜스택 상단에 에러가 있다면 어떻게 될까?
function three() {
  console.log("i love js");
  throw Error("omg i am an error");
}
function two() {
  three();
}
function one() {
  two();
}
function zero() {
  one();
}
zero();
// i love js
// Error: omg i am an error
//     at three:41:9
//     at two:44:3
//     at one:47:3
//     at zero:50:3

// // 스택에 올라가는 순서: zero -> one -> two -> three(에러 발생)

정리

  • 리스트가 존재한다. 이를호출 스택(Call Stack)이라고 한다.
  • 함수는 리스트에 추가된다.
  • 함수는 실행이 완료되면 가장 최근에 추가된 것부터 차례로 리스트에서 제거된다.
  • 자바스크립트의 to do list(할일 목록)인 셈이다.

참고 링크

Share