비동기 실행의 특징

1. 비동기 함수는 이후에 있는 코드를 모두 실행하고 콜백을 실행

예를 들어 setTimeout() 함수의 두번째 파라미터로 0을 넘겨준다면? 3000을 적어줬을 때 뜻이 3000밀리초, 즉 3초였기 때문에 0은 바로 실행하라는 뜻이다. 하지만 아래 코드를 실행해보면 결과는 예상한 것과 다르게 나온다.

console.log('1');

setTimeout(() => console.log('2'), 0);

console.log('3');
console.log('4');
console.log('5');
console.log('6');
console.log('7');
console.log('8');
console.log('9');
console.log('10');

1
3
4
5
6
7
8
9
10
2

setTimeout(() => console.log('2'), 0) 아래에 있는 코드들이 먼저 실행되고 콜백이 실행됐다. 비동기 함수의 콜백은 아무리 빨리 실행돼도 비동기 함수 이후에 있는 코드가 모두 실행된 후에 실행된다. 반대로 생각해보면 비동기 함수 이후에 있는 코드가 굉장히 오래 걸려도 그걸 모두 실행하고 콜백을 실행한다는 의미이다.

예시를 바꿔서 실행해도 console.log('2')는 가장 마지막에 실행된다.

console.log('1');

setTimeout(() => console.log('2'), 1000);

// 1초 이상 걸리는 작업들

하지만 대부분의 경우에는 비동기 함수 이후에 코드가 아무리 많다고 해도 비동기 작업이 훨씬 오래걸린다. 콜백의 실행 타이밍이 몇 밀리초 단위까지 중요한 경우는 별로 없기 때문에 문제가 되는 경우는 드물다.

2. 실행할 콜백이 여러 개일 경우, 동기적으로 실행

console.log('1');

setTimeout(() => console.log('2'), 1001);

setTimeout(() => console.log('3'), 1000);

console.log('4');

위 코드의 실행 순서를 잠깐 생각해보자.

우선 1, 4가 출력되는건 예상할 수 있다. 그 이후 콜백이 어떻게 되는지가 관건인데 시간을 잘보면 두번째 setTimeout() 의 콜백이 실행되는 동안 첫번째 setTimeout() 의 타이머가 끝난다. 이런 경우엔 콜백은 동기적(순차적)으로 실행된다.

중요한 점은 비동기 작업이 비교적 오래 걸리는 작업들이라는 것인데, 예를 들면 특정 시간을 기다리거나 사용자의 상호작용을 기다리는 작업, 웹 리퀘스트의 결과를 기다리는 작업들처럼. 이런 비동기 작업들은 병렬적으로 처리되기 때문에 충분히 효율적인 코드를 작성할 수 있다.