자바스크립트 런타임과 엔진 그리고 동작 원리

📌 TL;DR

• 자바스크립트 프로그래밍 => 자바스크립트 엔진과 웹 브라우저에서 제공하는 API 메소드로 프로그래밍을 하는 것이다.
  * 크롬 웹 브라우저는 V8 엔진이 탑제된 자바스크립트 런타임이다.
• 자바스크립트 엔진은 메모리 힙과 콜 스택으로 구성되어 있다.
• 자바스크립트는 싱글 스레드이기 때문에 한 번에 한 가지 일만 처리할 수 있지만, 비동기를 이용하면 하나의 요청이 완료될 때까지 기다리지 않고 동시에 다른 작업을 실행할 수 있다.
• Web APIs, Message Queue(= Event Queue)와 Event Loop가 비동기 처리를 해준다.
• Web API로 Callback 함수를 만들고, Queue 대기열에 넣어뒀다가 Call Stack이 빈 상태가 되면 Event Loop가 Callback 함수를 Call Stack에서 실행되도록 해준다.

 

자바스크립트 런타임 구조

📌 자바스크립트 런타임 (실행환경)

런타임이란 프로그래밍 언어가 구동되는 환경

런타임의 종류 => 웹 브라우저(크롬, 파이어폭스, 익스플로러 등) 프로그램과 Node.js 라는 프로그램

 

🌀 자바스크립트 엔진

자바스크립트 코드를 해석하고 실행하는 인터프리터(해석기)

엔진에 의한 인터프리터 방식이므로 별도의 컴파일 과정이 필요 없다. (즉, 웹브라우저에서 즉시 해석되어 실행된다 = 런타임)

 

🌀🌀자바스크립트 엔진의 구성 (하나의 힙과 하나의 콜 스택)

=> 메모리 힙

• 변수와 객체의 (메모리 할당)이 발생하는 곳
• 참조타입(객체, 배열, 함수 등) 데이터가 저장된다.
• 참조타입 데이터가 저장된 메모리힙의 주소값은 콜스택의 변수 식별자의 값으로 각각 저장된다.
  (객체, 배열, 함수 등의 참조타입에 대한 주소값이 지정되면, 그 주소값이 콜스택의 변수 식별자 값으로 저장된다. 함수 실행 시 주소값을 통해 해당 참조타입을 찾을 수 있도록)

=> 호출 스택

• 프로그램 상에서 코드 내부 실행 순서를 기록해 놓고, 하나씩 순차적으로 진행할 수 있도록 도와주는 곳
• 메모리에 존재하는 공간 중의 하나로, 코드를 읽어내려 가면서 수행할 작업들을 밑에서부터 하나씩 쌓고, 메모리 힙에서 작업 수행에 필요한 것들을 찾아서 작업을 수행하는 공간. 선입후출(LIFO)
• 한쪽에서만 삽입, 삭제 가능(입구가 하나)
• 자바스크립트는 단일 스레드 프로그래밍 언어이므로, 단일 호출 스텍이다. = 한 번에 하나의 일(Task)만 처리할 수 있다.
• 호출 스택은 전역함수 -> 지역함수 순으로 쌓인다. 즉, 전역함수가 제일 먼저 호출 된 후, 지역함수가 순차적으로 쌓이게 된다.
• 함수의 실행이 끝날 때(리턴 값을 돌려줄 때), 해당 함수를 호출 스택에서 제거한다. 그게 스택의 역할이다.
• 코드가 실행될 때마다 스택 프레임이 쌓이는 곳 (스택 프레임 = 호출 스택의 각 항목)
• setTimeout, DOM, AJAX(HTTP 요청)등과 같은 비동기 메소드가 없다.
• 콜스택은 원시타입 데이터가 저장된다.

• 스파이더몽키(SpiderMonkey)
  최초의 자바스크립트 엔진
  FireFox에서 사용
• Chakra
  마이크로소프트가 개발한 엔진
  Edge 브라우저에 사용
• JavaScript Core
  애플에서 개발한 JavaScriptCore는 처음에 WebKit 프레임워크를 위해 개발
  최근에는 Safari와 React Native App에서 사용
• V8
  구글에서 개발한 오픈 소스
  Chrome과 Node.js 에서 사용

 

🌀 웹 브라우저의 WEB APIs
- javascript 싱글 쓰레드의 영향을 받지 않고, 독립적으로 이벤트를 처리할 수 있게 하는 API
- 런타임 환경에 존재하는 별도의 API

- DOM event, AJAX, setTimeout, setInterval, setImmediate 가 있다.

- Web API를 통제하기 위한 Event Queue와 Event Loop가 존재한다.

🌀 Event Queue

Message Queue = Callback Queue = Task Queue

현재 실행 중인 코드가 끝난 후에, 실행 시킬 코드(Callback)를 Callback Queue에 저장해놓고 사용한다.
처리할 함수의 대기열

 

🌀 Event Loop

Call Stack과 Callback Queue의 상태를 주기적으로 체크하고, Call Stack 이 빈 상태가 되면, Callback Queue의 첫 번째 Callback fuction을 Call Stack 에서 실행시킨다.

* Event loop가 반복적으로 Call Stack 비어있는지 확인 하는 것을 tick이라고 한다.

 

 

📌 자바스크립트 동작 원리

자바스크립트는 싱글 스레드 프로그래밍 언어이다. (한 번에 한 가지 일 밖에 처리 할 수 없다.)

앞의 코드 실행이 오래 걸려 다른 코드를 실행하지 못하게 된다. (= 콜스택이 멈춘 상태 = block 상태)

앞의 작업 시간 길어지면 시간, 자원 낭비 심하다.

=> 하나의 요청이 완료될 때까지 기다리지 않고 동시에 다른 작업을 실행하는 비동기 방식으로 극복할 수 있다.

 

🌀 비동기 방식 (필요 요소 : Web APIs, Queue, Event Loop)

1. Web APIs
2. Message Queue = Callback Queue = Task Queue
3. Event Loop

🌀 코드 실행 예시

console.log('시작!');
setTimeout(function timeout(){
	console.log('1초가 지났습니다');
}, 1000);
console.log('끝!');

1. Call Stack에 console.log('시작!');  Push & 실행
2. Call Stack에
   setTimeout(function timeout(){
        console.log('1초가 지났습니다');
   }); Push
   setTimeout이 비동기 함수이기 때문에 바로 실행하지 않고, Web API에 콜백 함수인 timeout() Push
3. Call Stack에 console.log('끝!'); Push & 실행
   아직 1초가 지나지 않아서 timeout() 함수는 아직 Web API 에 있다.
4. 1초가 지난 후, Callback Queue에 timeout() 함수 Push
5. Event Loop는 Call Stack과 Callback Queue의 상태를 체크(tick)하고, Call Stack 이 빈 상태가 되면, Callback Queue의 첫 번째 콜백인 timeout() 함수를 Push
6. console.log('1초가 지났습니다'); 실행
7. 모든 함수가 호출되고 Call Stack은 빈 상태가 된다.

 

 

---

🫰🏻 참고 🫰🏻

https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript

https://developer.mozilla.org/ko/docs/Web/JavaScript/EventLoop

https://velog.io/@kirin/자바스크립트-엔진JavaScript-engine

https://hanamon.kr/javascript-런타임-작동-방식-비동기와-이벤트-루프/

https://blog.toycrane.xyz/진짜-쉽게-알아보는-자바스크립트-동작-원리-c7fbdc44cc97

https://new93helloworld.tistory.com/358

https://velog.io/@djaxornwkd12/호출스택과-이벤트-루프란-무엇인가