Javascript 호출 스택(Call Stack)

호출 스택(Call Stack)이란, 함수의 호출을 기록하는 자료구조이다.

말 그대로 어떤 함수를 호출하는지 스택(Stack)에 쌓아두고, 가장 위에 놓여진 함수를 처리하는 것이다.

 

스택(Stack)은 한쪽 끝에서만 자료를 넣고 뺄 수 있는 Last In First Out (LIFO) 형식의 자료구조인데, 

그냥 쉽게 하나의 입구만 있는 상자를 생각하면 된다.

상자에 물건을 1, 2, 3, 4.. 순서대로 넣으면 상자의 가장 상위에는 4가 있어서 만약 상자 안에 있는 물건을 빼고 싶으면 4, 3, 2, 1 의 순서로 빼야한다. Stack은 이렇게 가장 최근에 추가한 내용을 가장 먼저 뺄 수 있는 형식의 자료구조이다.

 

만약 A함수, B함수, C함수 순서대로 호출이 된다면 C함수, B함수, A함수 순서대로 실행이 되기 때문에, 호출 "스택" 이라고 부르는 것이다.

 

아래는 내가 호출 스택을 이해하기 위해 활용했던 예시이다.

function first() {
	second();
   	console.log("첫 번째");
}

function second() {
	third();
   	console.log("두 번째");
}

function third() {
   	console.log("세 번째");
}

first();
third();

뭔가 처음에는 .. 아래와 같이 동작될 것이라고 생각했다. 

 

1. first() 실행 

호출 스택- second()

실행 - 첫 번째 (누적)

 

2. third() 실행 

호출 스택 - second()

실행 - 첫 번째, 세 번째 (누적)

 

3. second() 실행

호출 스택 - third()

실행 - 첫 번째, 세 번째, 두 번째 (누적)

 

4. third() 실행

호출 스택 - [완료]

실행 - 첫 번째, 세 번째, 두 번째, 세 번째 (누적)

 

그런데 이렇게 바로 바로 실행되면서 함수만 쌓이는게 아니라, 호출 Stack에 먼저 쌓이고, 순서대로 실행이 되는 것이었다. 허헛.

 

1. first() 실행 

  - 호출 스택

     -- 상자의 바닥 --

     [-] console.log('첫 번째')

     [-] console.log('두 번째')

     [-] console.log('세 번째')

  - 호출 

 

2. third() 실행

  - 호출 스택 

     -- 상자의 바닥 --

     [-] console.log('세 번째')

 

=> 호출 스택에 쌓인 대로 실행 : 선입 선출이기 때문에 상자의 위부터 실행된다.

그렇기 때문에 세 번째 -> 두 번째 -> 첫 번째 -> 세 번째 순서대로 실행이 된다!

 

되게 쉬워보여서 이게 왜 헷갈리는지.. 자괴감이 오지만 ^__^,, 자꾸 헷갈린다.

뭔가 예시를 더 가져와서 봐야겠다.