학습 공간 개념 · 판단 · 실험

Frontend Performance Lab

이벤트 루프와 Microtask

Promise 안의 코드는 언제 실행될까요?

출력 순서를 예상하고, 직접 실행한 뒤 이유를 확인해 보세요.

지금 실행할 코드와 나중에 실행할 코드

다른 작업이 끝난 뒤 호출하도록 미리 전달해 두는 함수를 콜백(Callback)이라고 합니다.

아래 예제의 Promise.resolve()는 이미 완료된 Promise를 반환하지만, .then()에 넘긴 콜백 함수를 그 자리에서 바로 실행하지는 않습니다. 현재 실행 중인 동기 코드를 끝까지 마친 뒤에야 예약해 둔 함수를 실행합니다.

미리 알면 좋아요 · JavaScript 함수와 위에서 아래로 실행되는 동기 코드

01 · 퀴즈

A를 출력하고, B를 예약하고, C를 출력하면?

log는 전달받은 글자를 순서대로 기록하는 함수입니다. 아래 함수를 한 번 호출하면 A, B, C는 어떤 순서로 기록될까요?

microtask-example.ts
export function microtaskExample(log: (value: string) => void) {
  log("A");
  Promise.resolve().then(() => {
    log("B");
  });
  log("C");
}
TypeScript · 읽기 전용7줄
예상 출력 순서 (선택)
예상을 비워 두고 바로 실행해도 됩니다.
심화 · 대용량 비교 실험

같은 개념을 큰 데이터로 확인하고 싶을 때 펼쳐 보세요. 정렬 시간과 입력 반응을 비교하는 기존 실험입니다. 접으면 진행 중인 심화 실험은 종료됩니다.