[Javascript] 호출 스택(call stack)

출처

자바스크립트 중고급: 근본 핵심 이해 - 인프런 | 강의

 

 

---

 

🚀 호출 스택(call stack)

 

◽ call stack이란?

실행 콘텍스트의 논리적 구조이다.

 

 

◽ first in last out 순서 (=계단형 구조, FILO)

 

함수가 호출되면 스택의 가장 위에 실행 콘텍스트가 위치하게 된다.

function one() {
    two();
};
function two() {
    three();
};
function three() {};
one();

예를 들어, 위의 코드에서 one()이 호출되면 one()의 실행 콘텍스트가 스택의 가장 위에 놓인다.

여기서 one()에서 호출하는 two()가 실행되면 two()가 가장 위에 놓인다.

따라서 가장 위에 있는 것이 실행하고 있는 함수이며, 실행 콘텍스트라 할 수 있다.

three()까지 스택에 쌓인 후 three()가 실행되고 함수가 종료되면 스택에서 빠져나온다.

이 때, 가장 아래에는 글로벌 오브젝트인 one() 함수가 위치하고 있다.

 

 

◽ 이런 구조가 가능한 이유

자바스크립트는 싱글 스레드이기 때문이다.

 

 

◽ call stack 구조를 보는 방법

디버거를 건 후, 개발자 도구의 Sources 탭 오른쪽에서 [call stack]탭을 확인한다.