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

Frontend Performance Lab

JavaScript

나중에 끝나는 작업 기다리기

비동기 작업은 결과를 기다리는 동안 다른 코드가 진행될 수 있습니다.

이럴 때 필요해요

요청이 끝나기 전과 끝난 후의 코드를 구분합니다.

어떻게 동작하나요?

네트워크 응답처럼 바로 결과를 받을 수 없는 작업이 있습니다. 비동기 코드는 결과가 준비되었을 때 이어서 할 일을 표현하는 방식입니다.

아래 setTimeout은 함수를 나중에 실행하도록 예약합니다. 콘솔에는 시작과 다음 줄이 먼저 나오고 예약한 함수의 내용이 나중에 나옵니다. 설정한 시간이 정확한 실행 시각을 보장하는 것은 아닙니다.

await는 Promise의 완료를 기다리는 코드를 읽기 쉽게 표현하지만 CPU 계산을 별도 스레드로 옮기지는 않습니다. 이번에는 나중에 실행된다는 뜻부터 익히고 Promise와 이벤트 루프는 다음 단계에서 읽으세요.

코드 예제

동작을 설명하는 읽기 전용 예제입니다.

example.js
console.log("시작");
setTimeout(() => console.log("예약한 작업"), 0);
console.log("다음 줄");
javascript · 읽기 전용3줄

출력은 시작 → 다음 줄 → 예약한 작업 순서입니다.

자주 헷갈리는 포인트

  • 0ms 타이머가 현재 코드보다 먼저 실행되는 것은 아닙니다.
  • 비동기를 별도 스레드에서 계산한다는 뜻으로 받아들이지 않습니다.

내 말로 설명해 보기

타이머 시간을 0으로 줬는데 왜 다음 줄이 먼저 출력될까요?

생각할 단서 예제의 값을 하나 바꿔 보고, 바뀌는 부분과 그대로인 부분을 구분해 보세요.

예시 답변 확인

설명에 들어갈 핵심

  • 비동기 작업은 결과를 기다리는 동안 다른 코드가 진행될 수 있습니다.
  • 출력은 시작 → 다음 줄 → 예약한 작업 순서입니다.

예시 답변

함수를 예약한 뒤 현재 코드를 계속 실행하기 때문입니다. 예약한 함수는 현재 실행이 끝난 뒤 실행 기회를 얻습니다.

문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.

함께 읽으면 좋은 개념

공식 참고 자료

← JavaScript