이벤트 루프와 비동기 이해하기 (자바스크립트 동작원리)

자바스크립트는 싱글 쓰레드 언어이다. 코드가 순차적으로 실행된다.

(멀티 쓰레드: C/C++ 등)

싱글 쓰레드의 단점은 무엇일까?
처리하는데 엄청난 시간이 걸리는 함수가 있다고 치자 (ex. 복잡한 이미지 변환 알고리즘)

함수가 끝날 때 까지 앱이 멈춘다.

이러한 단점을 극복하는 해결책이 브라우저의 '비동기 처리'이다.

(자바스크립트의 런타임 = 실행환경 = 브라우저)
(동기: 순차적 / 비동기: 순차적이지 않음)

 

브라우저는 '이벤트 루프'를 통해 비동기 처리를 한다.

브라우저의 구성요소를 보자.

• 힙에서 메모리 할당이 발생한다. (변수, 함수 등..)
• 함수 호출시 콜 스택에 쌓인 후, 쌓인 순서대로 실행된다. (= 싱글 쓰레드)
• 이러한 함수 중 Web API에 해당하는 함수들은, 바로 실행되는 것이 아니라 콜백 큐에 쌓인다.
• 이벤트 루프란? 콜 스택이 비었을 경우, 콜백 큐에서 함수를 꺼내 콜 스택에 추가하는 행위

토막지식
스택: 후입선출, Last In First Out
큐: 선입선출, First In First Out

 

시각화 예시를 보자

https://www.jsv9000.app/

http://latentflip.com/loupe

 

 

async/await는 어떻게 비동기로 동작할까?

1. 콜스택에서 async 함수를 꺼내서 실행
2. await를 만나면 Microtask Queue로 이동
3. promise가 완료되면 이벤트 루프를 통해 다시 콜스택으로 이동되어 실행됨

참고: https://pozafly.github.io/javascript/event-loop-and-async/#AsyncAwait