JavaScript 동작 원리

JavaScript Engine

JavaScript Engine은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터이다.

 

인터프리터란?

프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경이다.

원시 코드(저수준 언어)를 기계어로 번역하는 컴파일러와 대비된다.

인터프리터는 다음의 과정 가운데 적어도 한 가지 기능을 가진 프로그램이다.

1. 소스 코드를 직접 실행한다.

2. 소스 코드를 효율적인 다른 중간 코드로 변환하고, 변환한 것을 바로 실행한다.

3. 인터프리터 시스템의 일부인 컴파일러가 만든, 미리 컴파일된 저장 코드의 실행을 호출한다.

- Js엔진은 크게 Memory Heap, Call Stack으로 나눌 수 있다.

 

Memory Heap

메모리 힙은 동적으로 할당된 데이터(객체, 배별, 함수 등)를 "저장하는 영역"이다.

 

JS에서 객체와 변수 같은 데이터 구조가 동적으로 생성 및 해제 될 수 있고,

이러한 데이터들이 메모리 힙에 저장된다.

 

메모리 힙은 크기와 생존 기간에 대한 동적인 특성을 가지고 있으며,

Garbage Collection을 통해 더 이상 사용되지 않는 메모리를 해제한다.

 

Call Stack

콜 스택은 함수 호출고 관련된 정보를 저장하는 영역(후입선출)이다.

 

JS에서 함수가 호출될 때 스택에 정보가 푸시(push)되고,

함수가 반환될 때 스택에서 팝(pop)된다.

 

즉, 수행할 작업들을 밑에서부터 하나씩 쌓고

메모리 힙에서 작업 수행에 필요한 것을 찾아 작업을 수행하는 공간이다.

 

JavaScript 런타임

- JS는 기본적으로 싱글 스레드(Single Thread) 기반 언어이기 때문에,

  Call Stack이 하나이다.

  따라서 한 번에 하나의 작업만 처리할 수 있다.

 

이를 보다 효율적으로 동작하기 위해 Web API , Call Queue , Event Loop 가 있다.

 

Web API

ajax 요청 , serTimeout() , 이벤트 핸들러의 등록과 같이 비동기 작업 등을 웹 브라우저에서 제공하는 기능이다.

이를 통해 백그라운드에서 비동기적으로 작업을 처리할 수 있고

이러한 작업이 끝나면 자바스크립트 엔진(콜 스택)에게

해당 작업이 끝났음을 알려주아 계속해서 작업을 수행해 나갈 수 있게 된다.

Call Queue

Web API에서 종료된 작업들이 Call Stack으로 넘어가기전 저장되는 공간(선입선출)이다.

 

JS에는 Task Queue(Event Queue) , Microtask Queue(Job Queue) , Animation Frames 가 있다.

 

Call Queue에서 Call Stack으로 넘겨주기 위해 탐색하는데

 

이때 탐색하는 순서다.

 

Microtask Queue => Animation Frames => Task Queue

 

Promise - Microtask Queue

setTimeout - Task Queue

requestAnimationFrame - Animation Frames

 

Event Loop

Call Queue에서 Call Stack으로 넘겨주기 위해 순서에 맞게 탐색한다.

 

그리고 Call Stack이 비어있다면 Call Stack으로 넘겨준다.

 

이러한 탐색 방식을 Event Loop라고 한다.