[JavaScript] 자바스크립트의 비동기 처리 방식

⏱ 자바스크립트 비동기 처리 (setTimeout)

// 1번
let num = 1;

// 2번
setTimeout(() => {
  num = 2;
}, 0);

// 3번
num = 3;

console.log(num);

위 코드를 실행하면 console.log(num)은 무엇을 출력할까?

console.log(num) // 3

결과는 3이 출력된다.

그 이유는 setTimeout이 비동기 함수이기 때문이다.

 

⛓️ setTimeout 실행 흐름

1. 동기코드

• 콜 스택(Call Stack)에 들어간 즉시 실행된다.
• 1번 (let num = 1), 3번 (num = 3), console.log(num)이 순서대로 콜 스택에 들어가서 실행된다.

2. 비동기 코드

• setTimeout 같은 비동기 함수는 호출되면 잠깐 스택에 올라왔다가, 바로 Web APIs 영역으로 전달된다.
• Web APIs는 두 번째 인자로 받은 시간이 지나면, setTimeout의 콜백 함수를 Callback Queue(Task Queue)로 보낸다.

3. 이벤트 루프

• 이벤트 루프(Event Loop)는 콜 스택이 비어 있는지 계속 확인한다.
• 콜 스택이 비면, 태스크 큐에 쌓인 콜백 함수를 콜 스택으로 옮겨서 실행한다.

따라서 setTimeout의 콜백 함수는 console.log(num)이 실행된 이후에 콜 스택에 들어올 수 있다.

그래서 출력되는 값은 2가 아니라 3이다.

 

🌐 async/await

console.log("1");

async function getData() {
    // await #1
  const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  // await #2
  const data = await res.json();
  console.log("2", data.title);
}

getData();

console.log("3");

위 코드는 비동기 코드인 async 함수 예제이다.

코드를 실행하면 출력 결과는 아래와 같다.

1
3
2 delectus aut autem

 

⛓️ async/await 실행 흐름

1. 동기 코드

• console.log("1") 실행 → 1 출력
• 동기 코드이므로 바로 콜 스택에서 처리된다.

2. async 함수 진입

• getData()가 호출된다.
• 내부에서 fetch(...) 실행 → 네트워크 요청은 Web APIs로 넘어간다.
• 동시에 fetch는 Promise { <pending> }을 반환한다.
• await를 만나면 getData 함수는 일시 중단되고, fetch Promise가 fulfilled될 때 await의 다음 줄인 const data = await res.json();이 마이크로태스크로 예약된다.

3. 동기 코드 계속 실행

• 콜 스택이 비었으므로, 바깥에 있는 console.log("3") 실행 → 3 출력

4. 네트워크 응답 (fetch 완료 ~ 그 이후)

• 네트워크 응답이 완료되면 Promise가 fulfilled 상태가 된다.
• 이때 예약해 두었던 코드가 마이크로태스크 큐에 전달된다.
• 큐에 전달된 코드를 이벤트 루프가 콜 스택으로 옮겨서 코드를 실행한다.
• res.json()도 Promise { <pending> }을 반환한다.
• 다시 await를 만나서 그 아래 코드(console.log("2", data.title))는 두 번째 마이크로태스크로 예약된다.
• res.json()이 fulfilled 되면 console.log(”2”, data.title)는 마이크로태스크 큐에 전달되고 이벤트 루프가 콜스택에 전달해서 실행한다.

 

⚖️ setTimeout과 Promise의 차이점

• setTimeout의 콜백 → Task Queue(매크로태스크 큐)에 들어간다.
• Promise의 then과 await, async → Microtask Queue(잡큐)에 들어간다.

이벤트 루프는 항상 마이크로태스크 큐를 먼저 처리하기 때문에,

같은 조건이라면 Promise의 콜백이 setTimeout보다 먼저 실행된다.

console.log("start");

setTimeout(() => {
  console.log("setTimeout");
}, 0);

Promise.resolve().then(() => {
  console.log("promise");
});

console.log("end");

위 코드를 실행하면 다음과 같이 출력된다.

start
end
promise
setTimeout

 

💡 태스크 큐와 마이크로태스크 큐 비교

구분	태스크 큐 (매크로태스크 큐)	마이크로태스크 큐 (잡 큐)
주요 항목	setTimeout, setInterval, addEventListener, XMLHttpRequest 이벤트 등	Promise의 .then, .catch, .finally 콜백 함수, async/await
우선순위	낮음	높음
실행 시점	마이크로태스크 큐가 모두 비워진 후, 큐에서 하나씩 꺼내어 실행	현재 실행 중인 동기 코드가 종료된 직후, 큐가 모두 빌 때까지 전부 실행

 

📚 참고

모던 자바스크립트 Deep Dive

http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIkNsaWNrIHRoZSBidXR0b24hIik7Cn0sIDUwMDApOwoKY29uc29sZS5sb2coIldlbGNvbWUgdG8gbG91cGUuIik7%21%21%21