What is a JavaScript Engine?

• 자바스크립트 코드를 실행하는 프로그램
• 자바스크립트 엔진은 언제나 CALL STACK과 HEAP이 포함된다.

  1. CALL STACK
     • execution contexts를 사용하여 코드가 실제로 실행되는 곳
  2. HEAP
     • 애플리케이션에 필요한 모든 개체를 저장하는 비구조화 메모리 풀

compilation vs interpretation

• compilation: 코드 전체가 한번에 machine code로 변환되어 컴퓨터에 의해 실행될 수 있는 바이너리 파일에 기록된다
• interpretation: 코드 전체가 아닌 한줄 한줄 실행된다

  많은 사람들이 여전히 JavaScript가 인터프리터 언어라 생각하지만 더 이상 그렇지 않다
  Modern JavaScript 엔진은 컴파일과 인터프리터를 혼합해서 사용하고 있다

• just-in-time(JIT) compilation: 코드 전체를 한번에 machine code로 변환 후 바이너리 파일에 기록하지 않고 즉시 실행된다

Modern just-in-time compilation of JavaScript

0. javascript code가 javascirpt engine에 들어간다
1. 코드를 parsing 한다 (코드를 읽는 과정)
   • parsing 과정을 거치면서 추상 구문 트리(AST)라 불리는 데이터 구조로 parsing 된다

     AST 작동방식 -> 코드의 각 줄을 const나 function 같은 언어에 의미있는 키워드들을 조각으로 나눈 다음 모든 조각을 구조화된 방식으로 트리에 저장하여 작동한다

2. parsing하며 생성된 AST을 machine code로 컴파일된다
3. modern javascript는 just-in-time compilation를 사용하기 때문에 컴파일 된 machine code가 즉시 실행된다

이 과정들은 JavaScript engine - call stack에서 일어난다

Modern javascript의 최적화 전략

• 처음에 최적화가 되지않는 머신 코드를 빠르게 생성하여 최대한 빠르게 실행하게 하고 'background'에서 다시 Optimization(최적화)를 거쳐 다시 컴파일 된다
• 최적화를 거치고 나서 최적화가 안된 (이미 실행중인) 코드를 중지하지 않고 최적화된 코드로 간단하게 스위프된다

THE BIGGER PICTURE: JAVASCRIPT RUNTIME

• 브라우저 안에서 JAVASCRIPT RUNTIME 과정에는 javascript engine만 필요한게 아니라 web APIs도 같이 필요합니다
• javascript는 global window object를 경유하여 web APIs에 접근합니다
• JAVASCRIPT RUNTIME에는 이른바 CALLBACK QUEUE도 포함되어 있습니다

  DOM event listener가 Callback function 중 하나이다

• 콜백 함수가 설정 되고 콜백 큐에 넣고 스택이 비어 있는 경우 콜백 함수가 스택에 전달됩니다
• 이런 일들은 event loop가 발생되고 event loop는 콜백 함수가 실행될 수 있도록 콜백 큐에서 콜 스택으로 넣어줍니다

  브라우저 외부에서도 javascript가 RUNTIME 할 수 있는 환경 = node.js

RUNTIME IN NODE.JS

• 브라우저 RUNTIME과 다른 점은 webAPIs에 접근 할 수 없다는 점과 webAPIs 대신 C++ BINDINGS과 THREAD POOL를 사용합니다