[Tech] 자바스크립트 Event Loop, Promise, Async/Await

이벤트 루프란?!

• 자바스크립트에서 비동기 동작을 처리하기 위한 것이다.

---

브라우저 내부 구성요소

• 자바스크립트를 사용하는 브라우저에는 이벤트 루프를 포함한 구성 요소가 있다.
• 구성 요소는 Call Stack, Web API, Callback Queue가 있다.
• 또, Callback Queue는 마이크로태스크 큐와 태스크 큐로 나뉜다.

---

이벤트 루프의 동작

• 이벤트 루프는 Call Stack이 다 비워지면, Callback Queue에 있는 함수를
  하나씩 Call Stack으로 옮긴다.

---

Callback Queue의 작업 분리

• Callback Queue는 마이크로태스크 큐와 태스크 큐로 작업을 나눈다.
• 태스크 큐에 들어가는 콜백함수
  • setTimeout()
  • setInterval()
  • setImmediate()
  • requestAnimationFrame
  • Input/Output
  • UI 렌더링
• 마이크로태스크 큐에 들어가는 콜백함수
  • process.nextTick
  • Promise
  • async/await
  • Object.observe
  • Mutation Observer

우선순위: 마이크로태스크 큐 > 태스크 큐

이벤트 루프는
마이크로태스크 큐의 작업이 모두 처리되고 나서, 태스크 큐의 작업을 처리한다.

---

Promise와 async / await의 차이는?!

• 두 문법 모두, 자바스크립트에서 비동기 작업을 처리하기 위한 것이다.

---

Promise

• 비동기 작업의 성공 or 실패의 정보를 가지는 객체
• 기존 콜백지옥을 해결하기 위한 방식으로 채택되었다.

---

async / await

• Promise를 더 쉽게 사용하는 ES8에서 도입된 문법이다.
• async: 해당 함수는 항상 promise를 반환함.
• await: promise가 처리될 때까지 대기.
• 단, 에러처리를 위한 문법이 별도로 필요하다.

---

✨ 출처

프론트엔드 기술 면접 질문

---