비동기 프로그래밍을 알기전에 동기적 프로그래밍에 대해서 먼저 알아보자.

1. 동기 프로그래밍(Synchronous)

Synchronous
요청과 결과가 동시에 일어나는 방식

코드가 작성된 순서대로 위에서 아래로, 순차적으로 실행되는 프로그래밍을 말한다.
이전 실행이 완료되어야 다음 실행이 순서대로 진행이 된다.
자바스크립트는 기본적으로 동기적인 프로그래밍을 지원하며, 싱글 스레드 언어이다.

즉, 자바스크립트는 동기 프로그래밍 언어 이기에 순서대로 코드가 실행이 되며, 싱글 스레드 기반이기 때문에 한 번에 한 가지 일만 수행할 수 있다.

이러한 동기적 프로그래밍은 코드를 작성하기 쉽고, 직관적이며 결과를 예측하기가 쉬운 편이다.

console.log('1');
console.log('2');
console.log('3');

// -> '1' '2' '3'

Blocking

하지만 그렇기에 동기 프로그래밍은 Blocking(블로킹) 이라 하는 현상을 마주하게 된다.

순차적으로 작업이 실행되기 때문에 앞에 있는 작업이 많은 시간을 차지하면, 그 뒤에 있는 작업들은 앞 작업이 끝날 때 까지 시작조차 하지 못하고 무한정 대기하는 블로킹 상태에 빠지게 된다.

2. 비동기 프로그래밍(Asynchronous)

Asynchronous
요청과 결과가 동시에 일어나지 않는 방식

특정 작업이 끝날 때까지 기다리지 않고 다음 작업을 수행하는 프로그래밍을 말한다.
자바스크립트는 기본적으로 동기적이고 싱글스레드 언어이지만, 비동기적으로 작동할 수 있는 언어이다.

console.log('1');
setTimeout(() => { //비동기 함수
  console.log('2');
}, 1000);
console.log('3');

// -> '1' '3' '2'

해당 예시에서 setTimeout()은 비동기 함수이다. 즉, 다음 작업을 blocking하지 않는다.

컴파일러는 '1'을 출력한 뒤setTimeout()을 마주하면 타이머를 작동시킨다.
해당 타이머가 끝날 때까지 기다리지 않고 '3'을 먼저 출력한 뒤 1000ms가 지나면 '2'를 출력한다.

JS는 싱글 스레드인데 비동기가 가능한 이유? Web API

싱글 스레드라는 것은 말그대로 하나의 스레드와 하나의 호출 스택(Call stack)을 가지고 있다는 의미로, 순차적으로, 동기적인 처리만 가능하다.

여기서 자바스크립트는 Web API의 도움으로 비동기 처리가 가능해진다.
브라우저/Node.js는 자바스크립트 엔진(V8)과 별도로 Web API를 통해 setTimeout(), fetch(), DOM API등을 제공한다.

이 Web API 환경은 멀티스레드 환경으로 비동기적 프로그래밍을 지원한다.

1. 자바스크립트가 setTimeout() 등의 비동기 작업을 실행한다.
2. WebAPI에 해당 작업을 요청하고, setTimeout() 내 콜백까지 같이 전달한다.
3. 호출 스택에서는 Web API 요청 이후 setTimeout 작업이 완료되어 제거된다.
4. 자바스크립트는 WebAPI에 작업을 맡겼으니, 다음 코드를 실행한다.
5. 그러다 타이머가 끝나면 자바스크립트 엔진은 다시 WebAPI로 부터 콜백을 받아 해당 콜백함수를 실행한다.

콜 스택과 이벤트 루프를 통해 해당 작동과정이 어떻게 작동하는지 더 자세하게 보자.

참조

• [Eamon.log] 자바스크립트 싱글스레드인데 왜 비동기적일까?
• [별코딩] 자바스크립트 비동기 프로그래밍 #1