JavaScript Event Loop

자바스크립트는 단일 스레드 기반으로 비동기를 처리하나요??

 

네. 자바스크립트는 단일 스레드 기반의 언어로 한 순간 하나의 작업만을 처리할 수 있습니다.

그리고, 자바스크립트는 비동기로 동작하기 때문에 단일 스레드임에도 불구하고 동시에 많은 작업을 수행합니다.

 

하지만 자바스크립트 언어 자체가 비동기 동작은 지원하는 것은 아닙니다.

비동기로 동작하는 핵심 요소는 자바스크립트 언어가 아니라 브라우저가 가지고 있습니다.

 

브라우저는 web APIs, Event Table, Callback Queue, Event Loop 등으로 구성되며

자바스크립트 코드가 실행될 때 브라우저와의 동작은 아래와 같이 표현할 수 있습니다.

구성 요소

• Heap : 메모리 할당이 발생하는 곳
• Call Stack : 실행된 코드의 환경을 저장하는 자료구조, 함수 호출 시 Call Stack에 push 됩니다.
• Web APIs : DOM, Ajax, SetTimeout 등 브라우저가 제공하는 API
• Callback Queue, Event Loop, Event Table 등이 있습니다.

setTimeout(function exec() {
  console.log('second')
}, 1000);

위 코드가 실행될 때 각 구성요소들이 어떤 역할을 하는지 보겠습니다.

• Web APIs: setTimeout이 Call Stack에 들어와 실행되면 Browser API인 timer를 호출합니다.
• Event Table: 특정 event(timeout, click, mouse move 등등)가 발생했을 때 어떤 callback 함수가 호출돼야 하는지를 알고 있는 자료구조입니다. 위 코드에서 호출된 timer가 종료되면 event가 발생하게 되는데 이때 exec callback 함수가 실행되어야 한다는 것을 Event Table이 알고 있습니다.
• Callback Queue: 이벤트 발생 시 실행해야 할 callback 함수가 Callback Queue에 추가됩니다.
• Event Loop: Event Loop의 역할은 간단합니다.
  1. Call Stack과 Callback Queue를 감시합니다.
  2. Call Stack이 비어있을 경우, Callback queue에서 함수를 꺼내 Call Stack에 추가합니다.

 

자세한 예제는 아래 사이트를 보면 됩니다.

JavaScript 비동기 핵심 Event Loop 정리

---

결론은 자바스크립트는 단일 스레드이지만 비동기로 작업하기 때문에 동시에 여러 가지 작업을 수행할 수 있습니다.

이는 자바스크립트 언어 자체가 비동기 특성을 제공하는 게 아니라 Browser의 구성 요소들이 제공하기 때문입니다.

 

(출처)

JavaScript 비동기 핵심 Event Loop 정리