마이크로태스크 큐, 태스크 큐

마이크로태스크 큐, 태스크 큐

 

2개의 큐 모두 콜백함수가 들어간다는 점에서 동일하지만 어떤 함수를 실행하느냐에 따라 어디로 들어가는지가 달라집니다. 또한 명칭은 큐 (Queue) 이지만 자료구조의 큐와는 다릅니다. 엄밀히 말하자면 우선순위 큐 (Priority Queue) 라고 할 수 있는데, 이벤트 루프가 2개의 큐에서 태스크를 꺼내는 조건이 “제일 오래된 태스크” 이기 때문입니다. (동작방식)

 

• 콜백함수를 태스크 큐에 넣는 함수들
  • setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI 렌더링
• 콜백함수를 마이크로태스크 큐에 넣는 함수들
  • process.nextTick, Promise, Object.observe, MutationObserver

 

익숙한 함수인 Web API의 setTimeout() 의 콜백함수가 태스크 큐에 들어가고 Promise 의 콜백함수가 마이크로태스크 큐에 들어간다는 것을 알 수 있습니다. 이벤트 루프는 각 콜백함수를 태스크/마이크로태스크 큐에서 꺼내쓰는 것인데, 그렇다면 어떤게 먼저일까요?

 

결론부터 말씀드리자면, 마이크로태스크 큐가 먼저입니다.

 

이벤트 루프는 마이크로태스크 큐의 모든 태스크들을 처리한 다음, 태스크 큐의 태스크들을 처리합니다. 따라서 Promise의 콜백함수가 setTimeout()의 콜백함수보다 먼저 처리됩니다.

 

예시

console.log('콜 스택!');
setTimeout(() => console.log('태스크 큐!'), 0);
Promise.resolve().then(() => console.log('마이크로태스크 큐!'));

 

결과

콜 스택!
마이크로태스크 큐!
태스크 큐!

 

---

 

🛠️ 용어 공부

⚙️ 콜백함수

• 함수가 끝나고 난 뒤에 실행되는 함수입니다. 자바스크립트에서 함수는 객체입니다. 따라서 함수는 함수를 인자로 받고 다른 함수를 통해 반환될 수 있습니다. 인자로 대입되는 함수를 콜백함수라고 부릅니다.

⚙️ 우선순위큐

• 우선순위 큐(Priority Queue)는 먼저 들어오는 데이터가 아니라, 우선순위가 높은 데이터가 먼저 나가는 형태의 자료구조입니다. 일반적으로 힙(Heap)을 이용하여 구현합니다.

 

참고

• blog, Task와 Microtask의 동작방식
• blog, 콜백이란 무엇인가?
• blog, [자료구조] 우선순위 큐와 힙 (Priority Queue & Heap)

 

---

 

취업 준비를 하면서 알게된 프론트엔드 분야의 면접 질문들과 답을 중요도별로 용어 설명과 함께 정리하고 있습니다.
자세한 내용은 참고 링크를 확인하며 공부하시길 권장드립니다.
아래 링크로 이동하시면 다른 면접질문들도 용어 설명과 함께 공부하실 수 있습니다.

도움이 되셨다면 들어가셔서 star⭐️ 한번만 눌러주세요! 감사합니다. 🙇🏻‍♂️

 

GitHub - Esoolgnah/Frontend-Interview-Questions: 프론트엔드 중요도별 면접질문 + 용어 설명 ⭐️