자바 스크립트 엔진은 어떻게 동작하는가?

주의!) 본 글은 이 글의 작성자가 공부한 내용을 정리하기 위해 마음대로 써재낀 글이므로 이 글의 내용을 맹신했다가는 큰일 날 수도 있습니다.

 

1. 자바스크립트 엔진이란?

 

말 그대로 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터를 의미한다. 표준적인 인터프리터로 구현될 수도 있고, 혹은 자바스크립트 코드를 바이트 코드로 컴파일하는 JIT 컴파일러가 구현할 수도 있다. 여러 목적으로 사용될 수 있지만 일반적으로는 웹 브라우저를 위해 사용된다.

 

가장 유명한 자바스크립트 엔진은 구글의 V8 엔진이다. 오픈소스로 구글에서 개발했고 C++로 작성되었으며, 구글 크롬과 Node.js에서 사용되고 가장 유명하다.

구글의 V8 엔진

 

2. 자바스크립트 엔진은 어떻게 동작하는가?

자바스크립트는 싱글 스레드 언어로 한번에 하나의 태스크만 처리할 수 있다.(굉장히 의미가 큰 특성) 구글에서 개발한 V8을 비롯하여 대부분의 자바스크립트 엔진은 크게 세가지 영역으로 나뉘어 함수를 처리한다.

1. Call Stack
2. Task Queue(Event Queue)
3. Heap

2-1. Call Stack

자바스크립트에서 함수를 실행하면 Call Stack(콜 스택)에 태스크가 하나씩 쌓이고(push) 함수의 결과값을 반환하면 스택에서 제거(pop)된다.

자바스크립트는 단일 호출 스택을 사용하므로 하나의 함수가 실행되고 끝날때까지 다른 태스크들은 수행될 수 없다

 

2-2. Callback Queue(Event Queue)

• 자바스크립트의 Callback Queue(콜백 큐)는 처리할 메세지 목록과 실행할 콜백 함수들의 Queue이다. 버튼 클릭같은 이벤트, DOM 이벤트, HTTP Request, setTimeout과 같은 비동기 함수는 Web API를 호출하고 Web API는 콜백 함수를 콜백 큐에 보내준다. (Web API에 대한 내용은 바로 밑에 추가 설명함.)
• 콜백 큐는 대기하다가 콜 스택이 비는 시점에서 Event loop(이벤트 루프)를 돌려 해당 콜백 함수를 스택에 넣는다.
• 이벤트 루프의 기본 역할은 콜백 큐와 콜백 스택을 지켜보다가 콜백 스택이 비는 시점에 콜백 큐의 콜백 함수를 콜백 스택에 보내 실행시켜 주는 것이다.

Web APIs

• Web API는 호출만 가능한 쓰레드를 말한다고 한다.
• Web API에는 대표적으로 AJAX, DOM, Timer가 있다.

https://developer.mozilla.org/ko/docs/Web/API

Web API

2-3. Heap

여기서의 Heap(힙)도 동적으로 만들어진 객체가 메모리에 할당되는 곳을 말한다.

 

3. 자바스크립트에서 비동기 처리

자바스크립트는 서버로 특정 요청을 할 경우, 그 요청에 대한 응답이 돌아오지 않아도 이후의 코드를 서슴치않고 먼저 실행해버린다. 이처럼 선행 코드의 수행이 끝나지 않았음에도 뒷 코드를 먼저 실행해버리는 것을 비동기 처리라고 한다.

이런 문제를 해결하기 위해 즉시 처리하지 못하는 이벤트들을 Web API를 이용하여 콜백함수와 함께 콜백 큐로 보내고 이벤트 루프를 통해 콜 스택이 비었을 경우에 차례로 실행하게 된다.

 

하지만, 행복도 잠시 개발자들은 Callback Hell(콜백 지옥)을 맞이하게 되고 이를 해결하기 위해서 Promise, Async/Await와 같은 방법을 찾게 된다. (Promise, Async/Await는 To be Continued...)

 

참조

https://miaow-miaow.tistory.com/45

[JS] JavaScript Engine 이란

https://velog.io/@imacoolgirlyo/JS-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%97%94%EC%A7%84-Event-Loop-Event-Queue-Call-Stack

[JS] 자바스크립트 엔진, Event Loop, Event Queue, Call Stack

https://medium.com/@yoohl/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B9%84%EB%8F%99%EA%B8%B0-%EB%8F%99%EA%B8%B0-ac9495e42d0

자바스크립트 비동기처리