Call stack (호출 스택)
Call stack이란?
콜스택은 말 그대로 콜을 관리하는 스택이다. 여기서 call(호출)이란 함수의 호출이라고 생각하면되는데 이것을 스택으로 관리하는 이유는 자바스크립트가 싱글 스레드 언어이기 때문이다. 싱글 스레드란 말은 한번에 하나의 작업만 실행시킬 수 있게 되는데 우리가 함수를 호출하는 코드를 작성하게되면 스레드가 호출된 함수가 있는 곳으로 이동해서 거기서부터 다시 코드를 실행시킨다. 이것을 분기라고도 하고 제어권 이동이라고도 한다.
그런데 이렇게 함수를 호출한 곳으로 이동하게 됐을 때 이미 실행되던 함수의 정보를 저장해야만 새로 호출해서 실행된 함수가 종료되었을 때 다시 작업하던 위치부터 실행을 이어나갈 수 있다. 이때 실행시키던 함수의 정보를 저장하기 위해 사용하는 곳을 콜 스택이라고 한다.
동작방식
function a() {
console.log("Hello my name is");
}
function b() {
a();
console.log("javascript");
}
b();실제로 위 코드를 실행시켰을 때를 보면 아래와 같다
스택 자료구조는 LIFO(후입 선출) 방식을 사용하기 때문에 함수가 실행되던 순서를 보장할 수 있다
- 우선 b 함수가 호출되었으니 b가 호출스택에 들어가 실행된다.
- 이때 a 함수가 호출되면서 b 정보(명령어가 어디까지 실행되었는지 등..)를 저장하고 a함수로 넘어간다
- a함수를 실행하다가 console.log()를 만나 다시 a의 함수정보를 저장하고 제어권을 이동해서 실행한 뒤 돌아온다
- consolelog를 실행시키고 a함수가 종료되면서 다시 b함수가 실행되던 지점을 불러와 그 지점부터 실행한다
- 다시 consolelog를 만나 제어권을 이동해서 실행시킨 뒤 저장되었던 곳으로 돌아와 다시 실행된다
- b 함수가 종료되면서 b함수를 스택에서 빼고 종료된다
확인 방법
실제로 확인해보려면 함수 안에 debugger를 입력하면 된다.
오른쪽 호출 스택을 살펴보면 제대로 호출 스택에 저장되는 것을 확인할 수 있다.
이 외에도 scope 같은 정보도 확인할 수 있다.
최하단에 (익명) 함수가 호출스택에 있는 이유는 우리가 코드를 저렇게 작성했다 하더라도 실제 엔진이 우리가 작성한 코드를 실행시키기 위해 하나의 main함수로 묶고 그것만 실행시킨다. 설명하기 조금 애매한데 우리가 작성한 코드를 실행시키기 위한 하나뿐인 메인 함수라고 이해했다.
다른 자바나 c/c++을 보더라도 하나의 main함수를 실행시키는 것이기 때문에 잘 이해가 안된다면 넘어가도 한가지 방법일거같다
주의해야할 점
함수가 점점 복잡해지고 겹치다보면 실제 어떤 함수가 실행되는지 눈으로보기 어려울 수도 있다. 따라서 함수 선언과 함수의 호출을 잘 이해하는 것이 첫 번째이고 실행되는 순서를 이해하는 것이 두 번째인거같다.
주로 재귀함수를 이해하기 위해 콜스택을 알아두는 것은 중요하기 때문에 어떤 방식으로 동작되는지 잘 이해하고자 글로 정리했고 조금 더 확장시켜서 생각해봐야겠다
https://www.youtube.com/watch?v=ZF6aDhBp5r8&list=PLcqDmjxt30Rt9wmSlw1u6sBYr-aZmpNB3&index=3