[JavaScript] Runtime Stack, Queue, Eventloop

Problem

자바 스크립트는 동기적 언어인데 아래의 코드를 실행하면  1번, 2번, 3번 순으로 실행되야하는게 맞지만 실제 콘솔에서는 1번,3번,2번 순으로 실행된다. JS를 처음 사용할 때에는 무지성으로 사용하여 궁금하지 않았었는데 이제는 스스로 코드를 칠 때 이해가 되지 않아 자바스크립트의 동작 원리를 간단히 정리하려고 한다.

console.log('1번')
setTimeout(function() {
  console.log('2번');
}, 0);
console.log('3번')

 

1. JS ENGINE

JavaScript 엔진은 Memory Heap, Call Stack으로 구성되어 있다. JavaScript 엔진 중 가장 인기 있는건 크롬의 V8 엔진입니다. V8 /엔진은 Node.js 내부에서도 사용됩니다.

 

Memory Heap: 메모리 할당이 발생하는 곳

• 코드 실행하는 곳, 순차실행한다.

Call Stack: 코드가 실행될 때 메모리 스택 프레임이 있는 곳, 함수실행 순서를 저장한다.

자바스크립트는 단일 스레드 (sigle thread) 프로그래밍 언어이다. 이 의미는 Call Stack이 1개다.

one thread === one call stack === one thing at at time

(자바스크립트 언어는 웹브라우저가 해석한다.

 

2. JS Rnutime

Runtime: 프로그래밍 언어가 구동되는 환경

자바스크립트 런타임은 자바스크립트 엔진, Web API, 콜백 큐, 이벤트 루프, 렌더 큐로 구성됩니다.

V8은 구글에서 개발한 오픈소스 자바스크립트 엔진입니다. C++로 만들어져 있으며, Node.js, 크롬 브라우저에서 사용된다.

V8은 싱글 스레드를 제공합니다. 싱글 스레드는 하나의 콜 스택(Call Stack)과 하나의 힙(Heap)을 제공합니다. 콜 스택은 위에서 이야기했듯이 함수의 호출 순서를 저장합니다. 힙은 할당된 메모리들이 저장되는 영역입니다.

하나의 콜 스택을 가지고 있다는 말은 한 번에 하나의 동작만 할 수 있다는 의미입니다. 하지만 버젓이 setTimeout이나 ajax(HTTP 요청), DOM 이벤트 등 콜백으로 비동기 동작을 하도록 코딩하고 있습니다. 심지어 V8 소스에는 이러한 메서드들이 정의되어 있지도 않습니다.

 

3. WEB API

Web API 는 브라우저에서 제공하는 API 로, DOM, Ajax, Timeout 등이 있다.
Call Stack에서 실행된 비동기 함수는 Web API를 호출하고,
Web API는 콜백함수를 Callback Queue에 밀어 넣는다. Web API에 있는 콜백함수는 아무때나 stack에 밀어넣을 수가 없다.

이때 Event Loop가 역할을 한다.

 

4. Callback Queue

비동기적으로 실행된 콜백함수가 보관 되는 영역.

• Queue(큐) : 선입선출( First In First Out; FIFO)의 자료구조. 대기열이라고도 한다. Queue라는 단어 자체가 표 같은 것을 구매하기 위해 줄서는 것을 의미한다.

 

5. Event Loop

위에서 말했듯이 Web API에 있는 콜백함수는 아무때나 stack에 밀어넣을 수가 없는데 이때 Event Loop는 Call Stack과 Callback Queue의 상태를 구독하여, Call Stack이 빈 상태가 되면, Callback Queue의 첫번째 콜백을Call Stack으로 밀어넣는다.

 

6. REVIEW

자바스크립트는 동기적 언어이며 setTimeout, eventLitener, ajax 함수로 비동기 처리가 가능하다. 이벤트루프를 파면 추가내용이 필요한것 같아 추가로 정리하려고한다.

 

 

참고
https://www.youtube.com/watch?v=8aGhZQkoFbQ

https://beomy.github.io/tech/javascript/javascript-runtime/