setTimeout함수를 실행했을 때 일어나는 과정은?

🤔아래의 문장은 맞는 문장일까??

setTimeout(print, 3000);
print 함수는 3초후 호출된다 ???

:: print 함수는 호출 시점이 정확히 3초후라는 걸 보장할 수 없어 틀렸다.

💨이벤트 기반 프로그래밍

이벤트?
이벤트는 사용자가 클릭하는 마우스, 입력하는 키보드 등의 행위가 이벤트이다. 우리는 이 이벤트의 대응해 맞는 행동을 취한다.
컴퓨터는 이 이벤트가 언제 발생할 지 모르지만 브라우저는 이를 감지할 수 있다. 때문에 우리는 브라우저에게 특정 이벤트 발생시 처리할 내용을 알려주고 이벤트 처리를 위임한다.

정리
:: 이벤트 기반의 프로그래밍에서는 어떤 이벤트가 발생할 때, 실행할 작업을 미리 등록해두는데, 작업 내용이 담긴 함수를 이벤트 핸들러라고 하며 브라우저에게 이벤트 처리를 위임하는 것을 이벤트 핸들러 등록이라고 한다.

♐이벤트 발생 순서

🎈콜스택 (Call stack)

함수가 호출될 경우 해당 함수는 실행 순서대로 콜 스택에 쌓이게 (push) 된다.
이후 함수가 실행 완료디면 스택에서 제거(pop)된다.

📚태스크 큐 (Task Queue)

태스크 큐는 이벤트 핸들러, setTimeout 등의 함수들이 Call Stack으로 이동되기 전 보관되는 곳이다.

🍳이벤트 루프 (Event Loop)

실행할 함수(콜백)들을 관리한다. 콜스택에 실행 중인 함수가 있는 지 확인하고, CallStack이 비었다면 태스크 큐에 대기중임 함수들을 Call Stack으로 이동시킨다.

const print = () => console.log('Javascript');

console.log('Hello');
setTimeout(print, 3000);
console.log('World!');

위의 내용을 바탕으로 보면 위의 코드의 실행 순서는 어떻게 될까?
Hello World! Javascript 순으로 실행될 것이다.

setTimeout(callback, delay)함수는 delay 시간 후 callback 함수를 실행하는 메서드이다.
그럼! setTimeout의 print 함수는 언제 Call Stack으로 들어가는 것일까?
delay 시간으로 전달한 정확한 3초후에 들어가서 실행되는 것일까?

1. setTimeout이 Call Stack에 쌓인다. 
2. setTimeout이 실행되고 콜백함수인 print 함수를 브라우저(WEB API)에 전달한다. 
3. timeout이 발생하면, 즉 delay 시간이 지나면 전달받은 콜백함수를 task queue에 전달한다. 
4. Call Stack이 비면 task queue의 콜백함수를 Call Stack으로 옮긴다. 
5. Call Stack의 콜백함수를 실행한다. 

이 과정에서 call stack이 비면 콜백함수를 call stack으로 옮길 수 있다는 것은, 우리가 전달한 3초 후에 만약 call stack이 비어있지 않다면 우리가 전달한 콜백 함수는 3초 뒤에 실행되지 못하고 task queue에 대기해야 한다는 의미이다.
따라서 3초 후에 실행된다는 말보다는
3초 이후의 시점에 실행된다 가 좀 더 정확한 말이다.

결론적으로 delay 시간으로 설정된 타이머가 만료된 이후 바로 콜백 함수가 실행된다는 것을 보장할 수 없고, dealy 시간은 테스크 큐에 콜백 함수를 넣는 타이밍을 늦추는 역할이라고 보면 된다.

😎정리

setTimeout은 timeout 발생 시 Task Queue에 들어가고, 이벤트는 이벤트가 발생한 시점에 Task Queue에 들어간다. Call Stack이 비어있는 지 확인될 때까지 대기하다가 Call Stack으로 옮겨진다.
이러한 과정은 싱글 스레드인 자바스클비트에서 발생할 수 있는 Blocking 문제를 방지하고 병렬로 처리하기 위함이다.

 

 

참고 

https://velog.io/@qhsh866/JS-setTimeout-%EC%9D%98-%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98-%EC%8B%A4%ED%96%89-%EC%8B%9C%EC%A0%90