Javascript와 Event Loop

유다송·2023년 7월 30일

JavaScript

목록 보기

4/8

자바스크립트는 싱글 스레드 기반 언어
Event Loop를 통해 비동기적 동작 가능

Javascript 내부 동작 원리

자바스크립트는 싱글 스레드 기반 언어.(멀티 스레드가 불가능한것은 아님) 자바스크립트의 메인 스레드인 Event Loop가 싱글 스레드.

그렇다면 자바스크립트는 싱글 스레드인데 왜 비동기가 가능할까?

자바스크립트 코드는 반드시 브라우저를 통해 실행되게 되어있다. 그리고 이 브라우저 때문에 싱글 스레드 언어인 자바스크립트가 우리 눈으로 보기엔 동시성을 갖는 작업을 해내는 것으로 보이게 된다.
자바스크립트 언어 자체가 비동기 동작을 지원하는 것은 아니고 비동기로 동작하는 핵심요소는 자바스크립트 언어가 아니라 브라우저가 가지고 있다. (Node에서는 libuv 라이브러리 등)
브라우저는 Web APIs의 Event Table Callback Queue Event Loop 등으로 구성되며 자바스크립트 코드가 실행될 때 브라우저와의 동작은 아래 그림으로 표현할 수 있다.

Heap

메모리 할당이 발생하는 곳. 선언한 변수, 함수가 담겨져 있다.

Call Stack

코드가 실행될 때 쌓이는 곳. 현재 어떤 함수가 동작하고있는지, 그 함수 내에서 어떤 함수가 동작하는 지, 다음에 어떤 함수가 호출되어야하는지 등을 제어. DOM, AJAX요청 코드, setTimeout Event Listener 함수가 들어간 걸 감지하고 Web API 대기실로 보냄.

Web APIs

DOM, AJAX요청 코드, setTimeout Event Listener등 브라우저가 제공하는 API. 자바스크립트 엔진이 아님.

Callback Queue

대기실에서 처리가 완료된 코드들을 정렬.

Event Loop

Stack과 Queue를 감시. Stack이 비었을때만 Stack으로 하나씩 올려보냄.

내부 동작 원리 예시

console.log(1 + 1)
setTimeout(function() {console.log(2 + 2)}, 10) // 10초 후에 실행
console.log(3 + 3)

// 2
// 6
// 4 (10초 후에)

모든 코드를 갖고 있는 anonymous(node.js에선 main)가 Call Stack에 담긴다.

console.log(1 + 1)가 Call Stack에 담긴다

console.log(1 + 1) 실행 후 출력. Call Stack에서 빠짐.

익명 함수가 Call Stack에 담긴다. (setTimeout을 감지)

setTimeout이 실행되면서 Call Stack에서 Web Api으로 이동. console.log(3 + 3)이 Call Stack에 담긴다.

console.log(3 + 3) 실행 후 출력.

anonymous가 Call Stack에서 빠짐

10초 후에 Web api의 setTimeout 함수가 Callback Queue로 넘어감.

Event Loop가 Call Stack을 감시해서 비어있음을 감지. Call Stack으로 익명 함수를 넘김.

익명 함수가 Call Stack에 담김.

console.log(2 + 2) 실행 후 출력.

익명 함수가 Call Stack에서 빠짐.