[javascript] 호출 스택과 이벤트 루프

1. 호출 스택(call stack)

 

호출 스택은 함수를 저장하는 자료구조다.

함수를 호출하면 호출된 순서대로 쌓으면서 가장 위에 쌓인 함수를 먼저 처리한다.

 

 

2. 이벤트 루프

 

제로초님의 예제를 빌려서 설명을 해보자면!

function run() {
  console.log('동작');
}
console.log('시작');
setTimeout(run, 3000);
console.log('끝');

 

① main(크롬에서는 anonymous)과 setTimeout이 호출 스택에 순서대로 쌓이면

② setTimeout 실행 시 콜백 run은 백그라운드에 담김

③ 백그라운드에서 3초 후 태스크 큐로 보냄

④ 호출 스택에 있는 함수들이 모두 실행되어 비워지면

⑤ 이벤트 루프가 태스크 큐에 있던 run을 호출 스택으로 보냄

⑥ run 함수가 실행된 후 호출 스택에서 지워짐

⑦ 이벤트 루프는 태스크 큐에 새로운 함수가 들어올 때까지 대기함

 

결과 : 콘솔에 시작과 끝이 찍힌 후 3초 뒤에 동작이 찍힘

 

setTimeout이 0초여도 결과는 같다.

setTimeout을 사용하는 순간 백그라운드에 담기고 태스크 큐를 지나 실행되기 때문

(setTimeout은 기본적으로 4ms의 지연 시간을 갖고 있기도 하다.)

 

또, 백그라운드에서 정확히 3초를 세어 주었다 하더라도 호출 스택에 함수들이 가득 차 있다면

원하는 시간에 실행이 되지 않을 수도 있다.

 

https://www.zerocho.com/category/JavaScript/post/597f34bbb428530018e8e6e2

https://www.zerocho.com/category/JavaScript/post/597f34bbb428530018e8e6e2