이벤트 루프 & task que

만약 이런 코드가 있다면 ? console 창에는 어떻게 찍힐까요?

console.log("부먹? 찍먹?");
setTimeout(() => { console.log("부먹") }, 1000);
console.log("찍먹");

• 답

이게 가능한 이유를 알려면 브라우저의 동작 원리에 대해 알아야 합니다.

브라우저는 Call Stack, Heap, Task Queue 등으로 이루어져 있습니다.

Call STACK

• 코드 실행해주는 곳(하나 밖에 없음 ⇒ 싱글 스레드이기 때문)
• one thread == one call stack == one thing at a time!!! 중요 합니다!

console.log("부먹? 찍먹?");
setTimeout(() => {console.log("부먹")}, 1000);
console.log("찍먹");

위 코드가 실행 된다면 다음과 같이 작동합니다.

Call Stack

console.log("부먹? 찍먹?");
// 비동기 코드는 Task Queue로 보냄
// 부먹? 찍먹?

console.log("찍먹");
// 찍먹

Task Queue

// 비동기 코드
// Ajax 요청, 이벤트 리스너, setTimeout 등
// stack이  비었는 지 확인 후 올려보냄
console.log("부먹")