[JS] javascript는 어떻게 동작할까

javascript 런타임

javascript 런타임이란?

javascript가 실행되는 환경. 기본적으로 브라우저와 nodeJs가 존재한다.
런타임은 아래와 같은 구성요소를 가진다.

1. javscript 엔진

javascript 코드를 해석하고 실행하는 역할. 각 런타임마다 적절한 엔진을 사용한다.

• 종류는 아래와 같다.

  • V8 (Google Chrome, Node.js): Chrome 브라우저와 Node.js에서 사용.

  • SpiderMonkey (Mozilla Firefox)
    Mozilla Firefox에서 사용.

  • JavaScriptCore (Apple Safari): 모바일 기기 및 macOS의 Safari 브라우저와 Bun에서 사용.

  • Chakra (Microsoft Edge, Internet Explorer): Microsoft의 Edge 브라우저와 이전 버전의 Internet Explorer에서 사용.

• 구성요소는 아래와 같다.

  1. Memory Heap

     • 동적으로 할당된 메모리를 저장하는 곳.
     • 참조타입(객체, 배열, 함수 ...) 데이터 저장.

  2. Call Stack

     • 함수 호출을 추적하는 자료 구조다. 자바스크립트는 함수 호출을 스택에 추가하고 완료되면 스택에서 제거한다.
     • 자바스크립트는 단일 스레드 프로그래밍 언어이므로, 단일 호출 스택이다.
       = 한 번에 하나의 일(Task)만 처리할 수 있다.

2. 웹 API

• javascript 싱글 쓰레드의 영향을 받지 않고, 독립적으로 이벤트를 처리할 수 있게 하는 API- 비동기 처리
• DOM event, AJAX, setTimeout, setInterval, setImmediate 가 있다.
• Web API를 통제하기 위한 event loop와 message queue가 존재한다.

3. 메세지 큐(message queue = callback queue)

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

4. 이벤트 루프(event loop) :이벤트 루프를 시각화하여 보여준 블로그

• Call Stack과 message queue의 상태를 주기적으로 체크하는 역할: (tick)
  Call Stack 이 빈 상태가 되면, Callback Queue의 첫 번째 Callback fuction을 Call Stack 에서 실행시킨다.

javascript 비동기 처리

싱글 스레드

자바스크립트는 싱글스레드 언어이다. 즉, 한 번에 한 가지 일밖에 못한다.
이는 동기적이므로 블로킹(= Call Stack이 멈춘 상태)을 만든다.

그렇다면 이 상황을 어떻게 해결할까?

비동기 처리: Web APIs, Queue, event loop의 콜라보

1. Call Stack에서 비동기 함수가 실행되면, 자바스크립트 엔진은 브라우저에서 제공되는 Web APIs에게 비동기 작업을 위임한다.
2. Web APIs는 해당 비동기 작업을 수행한 후, 콜백함수를 event loop를 통해 callback queue에 넘겨준다.
3. event loop는 Call Stack이 비어있을 때, callback queue의 콜백함수를 Call Stack으로 넘겨준다.
4. 콜백함수가 실행되고 Call Stack에서 제거된다.

참고자료_1
참고자료_2
참고자료_3