자바스크립트가 비동기처럼 보이는 이유

자바스크립트는 자바나 C언어 등과 달리 멀티스레드를 지원하지 않고 오직 하나의 스레드만 사용한다.

그런데 놀랍게도, 자바스크립트는 비동기 방식으로 여러 작업을 동시에 처리하는 것처럼 보인다.

싱글 스레드 언어가 어떻게 비동기 처리를 할 수 있을까?

 

호기심이 생겨서 이에 대해 조금 더 자세히 알아보았다.
핵심은 자바스크립트 엔진이 직접 비동기를 처리하는 것이 아니라,

브라우저가 제공하는 Web API가 이를 대신 처리한다는 점이었다.

이해를 돕기 위해 간단한 예제를 보자.

 

console.log("1");
setTimeout(() => console.log("2"), 1000);
console.log("3");

 

출력 결과는 다음과 같다.

1
3
2

 

 

이 결과가 나오는 이유를 살펴보면 

1. console.log("1") → 바로 실행된다.
2. setTimeout() → 자바스크립트 엔진이 브라우저의 Web API에게
   1초 후에 이 함수를 실행하라고 요청한다.
3. console.log("3") → 다음 줄로 넘어가 바로 실행된다.
4. 1초 후, Web API가 Callback Queue에 콜백 함수를 넣는다.
5. Event Loop가 콜 스택(Call Stack)을 확인하고,
   비어 있으면 Queue에 있는 콜백을 꺼내 실행한다.
6. 따라서 "2"가 마지막에 출력된다.

 

즉, 자바스크립트 엔진 자체는 비동기를 처리하지 않는다.
대신, 실행 환경(Web API + 이벤트 루프)이 비동기 동작을 가능하게 만들어준다.

 

그렇다면 Web API는 무엇일까?

Web API는 브라우저가 자바스크립트를 위해 제공하는 기능 집합이다.
자바스크립트 엔진(V8 등)은 코드를 해석하고 실행만 하지만
타이머를 재거나 서버에 요청을 보내는 기능은 가지고 있지 않다.
이런 일은 브라우저 내부의 Web API 영역이 대신 처리한다.

즉, 자바스크립트는 비동기 작업이 필요할 때 직접 실행하지 않고
브라우저(Web API)에게 “이 일을 대신 처리해줘”라고 부탁하는 방식이다.
Web API는 그 요청을 처리한 뒤, 결과가 준비되면 콜백 함수를 큐에 넣어
실행해도 된다는 신호를 보낸다.

 

대표적인 Web API 기능은 다음과 같다.

setTimeout, setInterval	일정 시간이 지난 뒤 함수를 실행
fetch, XMLHttpRequest	서버에 데이터를 요청하거나 응답을 받는 기능
DOM 조작 API	HTML 요소를 생성, 수정, 삭제하는 기능
Geolocation API	사용자의 위치 정보를 가져오는 기능
WebSocket, WebRTC	실시간 네트워크 통신 기능

 

이처럼 Web API는 자바스크립트 엔진이 처리할 수 없는 기능들을 대신 담당한다.
따라서 비동기 처리는 자바스크립트가 아닌 브라우저(Web API)가 주도하는 구조라고 볼 수 있다.

 

결국 자바스크립트의 비동기 동작은 싱글 스레드 언어임에도 불구하고,
브라우저 환경이 제공하는 Web API와 이벤트 루프 덕분에 가능해지는 것이다.

 

자바스크립트는 요청만 보내고, 비동기 처리는 브라우저가 담당한다.
결국 비동기 실행은 자바스크립트 엔진이 아닌, 실행 환경(Web API + 이벤트 루프)의 역할이다.