JS에서 비동기가 이루어지는 방식

자바스크립트에서 비동기가 어떻게 이루어지나요? ⭐⭐⭐

JS는 싱글 스레드 언어로 하나의 힙, 콜 스택을 가진다. 그러면 비동기 처리를 대체 어떻게 할까? 이를 이해하려면 런타임 환경에 대해 알아야 한다.

JS 런타임 환경(브라우저, Node.js 등)

1. JS 엔진으로 메모리 힙, 콜 스택이 있다.

2. 그 외 브라우저, Node.js에서 담당하는 Web APIs, 콜백 큐, 이벤트 루프가 있다.

메모리 힙

변수와 객체에 메모리 할당에 사용되는 비정형 메모리이다. 비정형이라는 것은 형식이 없다 즉, 구조화되어 있지 않다는 뜻이다. 그 이유는 객체는 원시 값과는 달리 크기가 정해져 있지 않기 대문에 메모리 공간의 크기를 런타임에 결정(동적 할당)해야 하기 때문이다.

콜 스택

현재 서브루틴에 관한 정보를 저장하는 스택 자료구조이다.

함수를 호출하면 함수 실행 컨텍스트가 순차적으로 콜 스택에 푸시되어 순차적으로 실행된다.

하나의 실행 컨텍스트 스택(콜 스택)을 가지며 이는 함수를 실행할 수 있는 창구가 단 하나이며, 동시에 2개 이상의 함수를 동시에 실행할 수 없다는 것이다.

최상위 실행 컨텍스트가 종료되어 콜 스택에서 제거되기 전가지는 다른 어떤 태스크도 실행되지 않는다.

-> JS가 싱글 스레드로 한 번에 한 가지 작업 밖에 실행하지 못하는 이유이다.

Web APIs

웹 브라우저에서 제공하는 API로 AJAX, setTimeout 등 비동기 실행되는 코드를 가져온다.

콜백 큐(태스크 큐)

태스크 큐라고도 하며 비동기 함수로부터 넘겨 받은 콜백 함수, 이벤트 핸들러를 저장한다.

큐 자료구조로 FIFO 방식이다.

이벤트 루프

콜 스택이 비어있는지 확인하고 태스크 큐의 작업을 콜 스택으로 옮긴다. 이때 콜 스택으로 이동한 함수는 실행된다. 즉, 콜백 큐에 일시 보관된 함수들은 비동기 처리 방식으로 동작한다.

-> 비동기 처리에서 소스코드의 평가와 실행을 제외한 모든 처리는 JS 엔진을 구동하는 환경인 브라우저, Node.js가 담당한다.

비동기가 이루어지는 방식

setTimeout의 콜백 함수는 태스크 큐에 푸시되어 대기하다가 콜 스택이 비게 되면, 전역 코드 및 명시적으로 호출된 함수가 모두 종료하면 비로소 콜 스택에 푸시되어 실행된다.

주의할 것

JS는 싱글 스레드 방식으로 동작한다. but 싱글 스레드 방식으로 동작하는 것은 JS 엔진이다.(not 브라우저) 만약 모든 JS 코드가 JS 엔진에서 싱글 스레드 방식으로 동작한다면 JS는 비동기로 동작할 수 없다. 즉, JS 엔진은 싱글 스레드로 동작하지만 브라우저는 멀티 스레드로 동작한다.

결론

JS 엔진 혼자만으로는 비동기 처리를 할 수 없다. JS엔진을 구동하는 브라우저, Node.js의 힘을 빌려 함께 비동기를 처리하는 것이다. 이를 처리하는 방식은 콜백을 태스크 큐에 이동시킨 다음 콜 스택이 비어있는지 확인하고 태스크 큐의 작업을 콜 스택으로 옮기는 이벤트 루프로 인해 가능한 것이다.

참고자료

모던 자바스크립트 Deep Dive 42장 비동기 프로그래밍