[JS] 비동기 실행의 간단한 동작 순서

비동기 실행

특정 작업을 시작(리퀘스트 보내기)하고 완벽하게 다 처리(리스폰스를 받아서 처리)하기 전에, 실행 흐름이 바로 다음 코드로 넘어가고, 나중에 콜백이 실행되는 것.

console.log('Start!');

fetch('https://www.google.com')
  .then((response) => response.text())
  .then((result) => { console.log(result); });

console.log('End');

위와 같은 코드가 있을 때, fetch는 비동기 실행을 하는 함수이므로 코드는 아래와 같은 순서로 작동한다.

1. console.log('Start');
2. fetch 함수(리퀘스트 보내기 및 콜백 등록)
3. console.log('End');
4. 리스폰스가 오면 2. 에서 then 메소드로 등록해뒀던 콜백 실행

fetch 이외에 비동기 실행을 하는 다른 함수들

1. setTimeout 함수
   • 특정 함수의 실행을 원하는 시간만큼 뒤로 미루기 위해 사용하는 함수
2. setInterval 함수
   • 특정 콜백을 일정한 시간 간격으로 실행하도록 등록하는 함수 (계속 실행됨)
3. addEventListener 메소드
   • 클릭과 같은 특정 이벤트가 발생했을 때 실행할 콜백을 등록하는 addEventListener 메소드. 파라미터로 전달된 콜백이 당장 실행되는 것이 아니라, 나중에 특정 조건(클릭 이벤트 발생)이 만족될 때(마다) 실행되기 때문에 비동기 실행과 관련이 있음.

fetch 함수는 다른 함수들과 달리 콜백을 파라미터로 바로 전달받는 게 아니라, fetch 함수가 Promise 객체를 리턴하고, Promise 객체의 then 메소드를 사용해서 콜백을 등록

---

// 1번
let num = 1;

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

// 3번
num = 3;

// 4번
console.log(num);

따라서 위와 같은 코드의 실행 순서를 정리하면,

1. 변수 num에 정수 1이 할당됨.
2. setTimeout 함수에 0밀리초 후에 실행될 콜백 함수(num = 2)가 등록됨.
3. 변수 num에 정수 3이 할당됨.
4. 정수 3이 출력됨.
5. setTimeout 함수에 의해 변수 num에 정수 2가 할당됨.

비동기 실행의 정의에 대입해보자면,

비동기 실행
특정 작업을 시작(리퀘스트 보내기 -> 0밀리초 delay 시키기)하고 완벽하게 다 처리(리스폰스를 받아서 처리 -> num = 2)하기 전에, 실행 흐름이 바로 다음 코드로 넘어가고(3번, 4번), 나중에 콜백이 실행되는 것(num = 2)

이므로, 콘솔에 출력되는 값은 2가 아니라 3이 된다.