[Javascript/Typescript] 자바스크립트란?

자바스크립트란?

• 스크립트 언어
• 응용프로그램을 제어하기 위한 용도로 쓰이는 언어
• 인터프리터 형식의 언어
• 수정이 빈번하게 일어나는 곳에서 사용

기본적인 실행 방식

1. javascript는 기본적으로 text형태로 배포된다.
2. 처음에는 text 형태로 배포된 javascript code를 파싱하여 중간 언어로써 byte code 형태로 전환한다.
3. 이후 native code로 변경하기 위해서 interpreter 와 JITC의 각각의 동작 방식이 달라진다.

🤔 그럼 interpreter와 JITC의 차이점은 무엇일까?

• interpreter의 경우 변환된 바이트 코드를 한줄씩 읽어나가며 동작을 수행한다.
• JITC의 경우 바이트 코드를 기반으로 전체를 native code로 컴파일하여 동작을 수행한다.
  😎 물론, 바이트코드를 한줄씩 읽으면서 수행하는 인터프리터 방식보다, 통째로 Native code로 컴파일하여 수행하는 것이 실행 과정에서는 빠를지 모른다. 그러나, 많이들 알고 있는 것처럼 javascript에서는 변수에 대한 다양한 예외처리가 발생하기 마련이다. 즉, JAVA나 기타 언어에서 자료형이 명시되는 것과 달리, var 형태로 동적인 자료형이 할당되기 때문에, 이에 대한 자료형이 어떠한 것인지 통째로 Native code로 컴파일 하는 형태에서는 알기가 어렵다. 따라서, Native code로 변환하기 위해서는 변수에 따른 다양한 예외처리가 전체적으로 수행되어야 하기 때문에, 실행 속도면에서 잃는 부분이 더 많을 수 있다.

JIT Compiler 동작과정
1. AST를 통해 나무 구조로 변환된 코드는 인터프리터에게 전달된다. 인터프리터는 빠르게 코드를 Bytecode로 변환한다.
2. 인터프리터가 코드를 실시간으로 변환하면서 브라우저에게 특정 작업을 지시하는 동안, 프로파일러(Profiler)는 입력받은 코드에서 최적화할 수 있는 부분을 찾아서 기록해놓는다.
3. 최적화가 가능한 부분을 찾으면 프로파일러는 이를 컴파일러에게 전달하고, 컴파일러는 인터프리터에 의해 실시간으로 웹사이트가 구동되는 동안 필요한 부분을 기계어로 변환하여 최적화를 진행한다.
4. 최적화한 코드를 수행할 차례가 다가오면, Bytecode 대신 컴파일러가 변환한 최적화된 코드가 그 자리를 대체하여 실행된다.

자바스크립트는 컴파일 언어인가? 인터프리터 언어인가?

• 자바스크립트는 인터프리터 언어다. 개발자도구 콘솔에서 스크립트를 작성해서 실행하는데 컴파일이 필요하지 않다. 하지만, 자바스크립트도 컴파일 과정을 거친다. 다만 자바스크립트 엔진 내부에서 실행중 컴파일이 필요한 경우에 내부에서 컴파일 한다. 대표적인 예로 크롬 V8엔진이 있다.

자바스크립트의 표준화

• ECMA 인터내셔널에서 자바스크립트의 표준화를 담당

🤔 이렇게 다양한 버전의 자바스크립트가 모든 브라우저에서 동작한다고?
트랜스파일러(transpiler)인 바벨(Babel)을 사용하여,ES6 이상의 최신 문법으로 작성한 자바스크립트 코드를 ES5 이하의 예전 문법으로 작성한 것 처럼 소스 코드 내의 문법의 형태를 변경할 수 있다. 이렇게 Babel을 통해 문법 형태가 바뀐 소스 코드는 최신 문법을 지원하는 실행 환경 뿐만 아니라 아직 최신 문법들이 적용되지 않은 실행 환경에서도 문제없이 작동하게 되는거다.

싱글 스레드 프로그래밍 언어

• 콜스택이 하나이다.

싱글스레드라며? 어떻게 동시성을 가질 수 있는거지?

Web API

• Web API는 브라우저에서 제공하는 API로 DOM, Ajax, Timeout등이 있다.
• Call Stack에서 실행된 비동기 함수는 Web API를 호출하고, Web API는 콜백함수를 Callback Queue를 밀어 넣는다.

Callback Queue(= Task Queue)

• 비동기적으로 실행된 콜백함수가 보관 되는 영역이다.
• 예를 들어 setTimeout에서 타이머 완료 후 실행되는 함수(1st 인자), addEventListener에서 click 이벤트가 발생했을 때 실행되는 함수(2nd 인자) 등이 보관된다.

Event Loop

• Event Loop는 Call Stack과 Callback Queue의 상태를 체크하여, Call Stack이 빈 상태가 되면, Callback Queue의 첫번째 콜백을 Call Stack으로 밀어넣는다.

자바스크립트를 단일 스레드 프로그래밍 언어라 한번에 하나씩 밖에 실행할 수 없다. 그러나 Web API, Callback Queue, Event Loop 덕분에 멀티 스레드 처럼 보여진다.

😎 Event Loop는 중요한 개념이기에, 따로 정리해보자.