[JS] 콜 스택 Call Stack

Javascript 는 단일 쓰레드 (Single-Thread) 프로그래밍 언어로 단일 호출 스택(call stack)을 가진다.
단일 스택을 가지고 있다는 것은 한번에 하나의 task 만 처리할 수 있다는 의미이다.
콜 스택은 함수를 호출 하기 위한 정보를 담는 구조이다.
스택이라는 이름에서도 알수 있듯이 콜 스택은 후입선출(LIFO, Last In First Out) 으로 동작한다.

스택(Stack)과 큐(Queue)

스택은 출입구가 하나인 데이터 구조이다. 순서대로 a, b, c가 들어갔다면 꺼낼때는 반대로 c, b, a 순서로 꺼낸다.

큐는 양쪽이 열려있는 파이프이다. 종류에 따라 양쪽 모두 입/출력이 가능한 큐도 있으나 일반적으로 큐에 순서대로 a, b, c 데이터를 넣었다면 꺼낼때도 a, b, c 같은 순서로 꺼내게 된다.

콜 스택(Call Stack)

호출 스택은 여러 함수들(functions)을 호출하는 스크립트에서 해당 위치를 추적하는 인터프리터 (웹 브라우저의 자바스크립트 인터프리터같은)를 위한 메커니즘이다.
현재 어떤 함수가 동작하고있는 지, 그 함수 내에서 어떤 함수가 동작하는 지, 다음에 어떤 함수가 호출되어야하는 지 등을 제어한다.

함수를 사용할 때마다 그와 관련된 정보들이 쌓이는 곳
디버깅 시에 오류 위치를 찾을 때에도 좋다.(stack trace)

예시1)

function third() {
    console.log('hello!')
   // throw new Error('error T.T') 
}

function second() {
  third();
}

function first() {
  second();
}

first();

가장먼저 first가 호출되고 first내에서 second 호출, second에서 third를 호출하고 있다.
가장 마지막에 호출된 third가 가장 먼저 콜스택에서 사라지며, 가장 먼저 호출된 first가 스택에서 마지막에 사라지는 LIFO 를 확인할 수 있다.

								 |third |
                     |second|    |second|    |second|
none -> |first | ->  |first | -> |first | -> |first | -> |first| -> none

콜 스택을 시각화하여 표현하면 위와 같이 나오게 된다.

콜스택 확인해보기

아래는 콜 스택을 확인해보기 위해 함수내에서 Error 객체로 오류를 발생 시켜보는 흔하디 흔한 예제이다.
third 함수내에서 Error 객체를 사용하여 오류를 발생시키자 순차적으로 third, second, first 함수의 호출 정보와 코드라인까지 확인이 가능하다.

예시2)

function multiply(x, y) {
    return x * y;
}
function printSquare(x) {
    var s = multiply(x, x);
    console.log(s);
}
printSquare(5);

아래 이미지는 위 코드를 실행하는 과정을 호출스택이미지로 나타낸것이다.