자바스크립트 호출 스택(Call Stack) 동작 예제

아래의 예제들은 자바스크립트 호출 스택과 이벤트 루프, Web API가 어떤식으로 동작하는지 보여줍니다. 예제 코드의 동작 환경은 웹 브라우저 입니다.

일반적인 호출 스택 / 이벤트 루프

코드와, 호출 스택, 이벤트 루프, Web API는 아래와 같은 관계로 표현됩니다.

처음 시작하면 모든 것들이 빈 상태입니다.

---

코드가 실행되면 글로벌 스택 프레임이 호출 스택에 Push됩니다.

---

그리고 나서, 첫번째 라인(setTimeout 호출)이 실행됩니다. 실행된 함수를 스택안에 넣습니다.

이름에서부터 알 수 있듯이 호출 스택은 스택(Stack) 입니다. 이는 Push된 마지막 항목이 Pop에서는 가장 먼저 나오는 LIFO(Last In First Out) 구조를 의미합니다. (쌓여있는 접시를 꺼내는 상황을 생각해보세요!)

---

setTimeout을 실행하면 JS가 아닌 코드가 호출됩니다. 이는 브라우저가 우리에게 제공하는 웹 API 입니다. 노드 환경에서는 노드에서 사용할 수 있는 다른 API가 제공됩니다.

---

setTimeout의 실행이 끝납니다. 그러나 setTimeout으로 호출된 Web API는 요청된 시간동안 대기하게 됩니다.

---

실행할 자바스크립트 코드가 더 이상 없기때문에 호출 스택은 비워집니다.

---

Web API의 timeout이 만료되면 Web API는 이벤트 루프에 코드를 추가하여 자바스크립트에 알릴 수 있습니다. 

이벤트 루프는 호출 스택에 이미 실행중인 코드가 존재할 수 있으므로 , 이벤트 루프에 대기 중인 Function을 호출 스택에 바로 Push하지 않습니다.

참고로, 이벤트 루프는 큐(Queue) 입니다. 첫 번째로 들어온 값이 첫 번째로 나가는 FIFO(First In First Out)의 구조를 가지고 있습니다. (영화나 놀이공원의 대기열을 생각해보세요!)

---

호출 스택이 비게 될 때마다 자바스크립트 실행 환경은 때때로 이벤트 루프에 대기중인 것이 있는지 확인합니다. 대기중인 항목이 있으면 호출 스택으로 이동(Push)되어 함수가 실행됩니다.

---

함수가 실행되면 코드 내부의 console.log가 호출되고 Call Stack에도 Push 됩니다.

---

 

console.log 의 실행이 끝나면 hi가 인쇄되고 console.log는 호출 스택에서 제거가 됩니다.

---

마지막으로 함수에서 실행할 다른 명령이 없으므로, 최종적으로 호출 스택에서도 제거 되며, 이제 스택은 텅 빈 상태가 됩니다. 이렇게 우리 프로그램은 실행은 정상적으로 종료합니다.

추가로, 굉장히 느린 함수가 호출 스택을 차지하고 있을 때 나타나는 오류에 대해 궁금하시다면 하단 링크의 Starved Event Loop를 참고 하시기 바랍니다.

출처

What is the JS Event Loop and Call Stack?