자바스크립트와 동시성

 
싱글 스레드의 자바스크립트 실행환경에서 동시성(Concurrency)을 어떻게 제공할까요?

동시성(Concurrency)
여러 작업이 동시에 진행되는 것처럼 보이드록 하는 프로그래밍 기법입니다.
하지만 이는 병렬성(Parallelism)과 구분되며 실제로는 동일 시점에 실행되는 것이 아닌 하나의 작업을 조금씩 진행하면서 다른 작업으로 전환하는 방식으로 이루어집니다. 예를 들어, 멀티태스킹 운영체제는 여러 프로그램을 동시에 실행하는 것처럼 보이게 하지만, 실제로는 CPU 시간을 분할하여 각 프로그램에 할당합니다.

 
자바스크립트는 싱글 스레드의 언어로 한 번에 하나의 작업만 처리할 수있습니다. 그러나 이벤트 루프와 큐를 통해 동시성을 구현합니다.
 
위 이미지에 표현된 구조에 대해 하나씩 살펴보도록 하겠습니다.
 

콜 스택 (Call Stack)

자바스크립트 엔진이 현재 실행 중인 함수를 쌓는 스택입니다.
함수가 호출되면 스택에 추가되고 함수 실행이 완료되면 스택에서 제거됩니다.
 

이벤트 루프(Event Loop)

이벤트 루프는 콜 스택과 이벤트 큐를 모니터링하면서, 콜 스택이 비어있으면 큐에서 대기중인 작업을 콜 스택에 추가하여 실행합니다. 이벤트 루프는 끊임없이 돌아가면서 동기적 작업과 비동기적 작업을 조화롭게 실행할 수 있도록 합니다.
 
 

Microtask queque

 promise와 mutation obserber의 task가 대기하는 큐입니다. promise가 리졸브되거나  MutationObserver 콜백이 발생하면 이 대기열로 이동합니다.

• Promise의 then, catch, finally 콜백
• MutationObserver 콜백
• queueMicrotask (명시적으로 마이크로태스크를 큐에 추가하기 위한 함수)
  • https://developer.mozilla.org/ko/docs/Web/API/queueMicrotask

Macrotask queque

타이머 함, I/O 작업, 이벤트 핸들러 등과 같은 큰 단위의 비동기 작업을 관리합니다

• setTimeout
• setInterval
• ajax
• I/O 
• 이벤트 핸들러 
• setImmediate (Node.js 환경)

 
정리해보면 자바스크립트 실행 환경에서 콜 스택을 이벤트 루프가 관찰하고 있다가 콜 스택이 비었을 때 마이크로 태스크큐의 대기열을 확인한 뒤 순차적으로 매크로 태스크큐의 대기열을 확인해 작업을 실행합니다. 이로써 싱글 스레드 언어인 자바스크립트에서 비동기 요청같은 동시성을 구현할 수 있습니다.