자바스크립트 개발자라면 알아야 할 Concept 33 [#1. Call Stack]

노마드 코더 유튜브를 통해 자바스크립트를 공부하려고 동영상을 찾아보던 중 흥미를 끈 동영상이 있었다.

 

"자바스크립트 개발자라면 알아야하는 핵심 컨셉 33개"

33개의 개념은 다른 개발자가 Github에 올려준 내용을 바탕으로 한다. [https://github.com/yjs03057/33-js-concepts]

 

직접 번역해서 공부하고 싶지만, 노마드가 친절하게 설명해주고 있기에 노마드의 영상을 보고 공부하고 이해하고자 한다.

 

 

 

---

 

Call Stack이란?

Call Stack은 단어에서 알 수 있듯 Stack 구조이다. 이 Call Stack은 자바스크립트가 함수를 실행하는 방법 중 하나이다. 어떤 함수를 실행하면 그 함수를 스택에 맨 위에 Push 해주고, 함수가 실행이 완료되면 Pop 되는 것이다.

그림처럼 스택은 책을 쌓아 올리듯 함수를 쌓아 올리는 것이다. 차곡 차곡 쌓아 올리며 함수가 완료되면 제거하는 구조이다. 함수는 return 값을 반환하거나 실행이 완료되면 종료된다.

 

 

 

Call Stack을 확인하면 다음과 같다.

function d(){
    console.log("JS Call Stack");
}
function c(){
    d();
}
function b(){
    c();
}
function a(){
    b();
}

a();

 

이 같은 코드를 같고 있는 index파일을 열어보면 다음같이 JS Call Stack 문구만 호출된 것을 볼 수 있다.

 

그러나 크롬의 콘솔 창에서 보면 Call Stack을 보기 위해 하나하나 정지하면서 실행할 수 있다. 하나하나 정지해서 확인해보면 다음과 같다.

함수가 a부터 차례로 호출이 되고 있다. a라는 함수는 b를 호출하고 있어 b함수가 호출이 되었다. 그다음 b는 c라는 함수를 호출하고 있어 c를 호출했고, c는 d를 호출해 d를 불러왔다. d는 "JS Call Stack"을 반환하면 된다. d가 호출될 때까지 콘솔 창에는 "JS Call Stack"이 찍히지 않는다.

 

 

마지막 함수 d가 "JS Call Stack"을 출력하면, 완료된 함수부터 차례로 제거(Pop)가 된다. 

1. "JS Call Stack"을 출력한 d함수가 Call Stack 리스트에서 제거된다.

2. d 함수를 호출한 c함수 제거

3. c함수를 호출한 b함수 제거

4. b 함수를 호출한 a함수 제거

5. 리스트엔 아무것도 남지 않는다.

이렇게 프로그램은 종료되고, Call Stack에서 불러올 것은 없게 된다.

 

중간에 에러가 생기면?

처음 코드를 다음과 같이 수정했다.

function d(){
    console.log("JS Call Stack");
}
function c(){
    d();
}
function b(){
    c();
}
function a(){
    b();
    throw Error("Error");
}

a();

 

그리고 처음과 같은 방법으로 확인을 했다. a함수가 호출되어 d함수까지 호출되고 콘솔에 "JS Call Stack"이 출력되는 과정까지는 똑같이 진행되었다. 

1. "JS Call Stack" 출력을 끝낸 d함수 제거
2. d함수 호출한 c함수 제거
3. c함수 호출한 b함수 제거
4. a는 b를 호출했고, 다음 Error를 나타내야 한다
5. 여기서 Error를 나타내는 것이다

 

Call Stack은 이러한 순서로 진행되는 것이다.

---

 

그렇다면 에러의 위치를 바꾼다면?

코드를 다음과 같이 조금 수정해 보았다.

function d(){
    console.log("JS Call Stack");
}
function c(){
    d();
}
function b(){
    c();
    throw Error("Error");
}
function a(){
    b();
    
}

a();

d함수가 호출되고, "JS Call Stack"이 출력되는 과정까지는 동일하다. 

1. "JS Call Stack" 출력을 끝낸 d함수 제거
2. d함수 호출한 c함수 제거
3. c함수를 호출한 b함수, Error를 나타내야 한다.

에러를 나타내고 프로그램은 종료가 된다. 그리고 다음과 같은 에러를 확인 할 수 있다.

에러는 9번째 줄에서 발생했다고 알려주고 있다. 그리고 그 이하는 에러가 발생하지 않았다면 정상 처리가 되었어야 할 모든 Call Stack 들을 의미한다. 

 

정상적이었다면, c함수를 제거하고 나서 c함수를 호출 완료한 b함수가 제거되어야 하지만 Error가 발생해 제거되어야 할 b가 제거가 되지 못하게 된다. 그래서 에러 다음 문장들은 제거가 되어야 할 모든 Call Stack들을 표시하는 것이다.

---

 

Call Stack 요약

요약하자면 Call Stack은 자바스크립트의 To Do List 같은 것이다.

 

• 리스트가 존재
• 함수는 리스트에 추가
• 완료된 함수는 리스트에서 제거