Javascript 22장 - 인터프리터, 컴파일러, Node.js, 호이스팅

Javascript

• 처음부터 다시 보는 딥 다이브

개념 정리

• 자바스크립트는 마크업 언어인 HTML과 달리 프로그래밍 언어이다.
  • 마크업 언어 : 태그 등을 이용하여 문서나 데이터의 구조를 작성하는 언어
  • 프로그래밍 언어 : 쉽게 말해 구동시키기 위해 작성되는 언어로, 깡통인 마크업 언어에 추가, 삭제와 같은 기능을 부여하기 위해 작성하는 언어
• 또한 명령형, 함수형, 프로토타입 기반 객체 지향형 을 모두 지원하는 멀티 패러다임 프로그래밍 언어이다.
• 자바스크립트는 별도의 컴파일 작업을 필요로 하지 않는 인터프리터 언어이다.

컴파일러와 인터프리터

• 프로그래밍 언어를 사용하여 프로그램을 작성한 후, 이를 컴퓨터가 이해할 수 있는 기계어로 바꿔주는 번역기가 필요하다. 이러한 번역기를 말한다.
• 대부분의 브라우저에서 사용되는 인터프리터는 전통적인 컴파일러 언어처럼 컴파일 단계를 거치지 않고, 복잡한 과정을 거쳐 소스코드를 컴파일 하고 실행한다.
• 이를 통해 인터프리터의 실행 속도가 느리다는 단점을 극복하였고, 컴파일러와 인터프리터의 기술적 구분이 모호하다.
• 자바스크립트는 HTML을 동적으로 만들어주기 위한 목적으로 탄생한 가벼운 인터프리터 언어이다.

컴파일러 언어

• 코드가 실행되기 전 단계인 컴파일 단계에서 소스코드 전체를 한 번에 CPU가 바로 실행할 수 있는 기계어인 머신 코드로 변환 후 실행한다.
• 컴파일 단계와 실행 단계가 분리되어 있으며, 컴파일 단계를 거치고 실행 파일을 실행한다.
• 컴파일과 실행 단계가 분리되어 있어 코드 실행 속도가 빠르다.

인터프리터 언어

• 코드가 실행되는 단계인 런타임에, 한 줄씩 해석하여 가상 머신에서 실행하도록 만든 바이트 코드로 변환 후 실행한다.
• 인터프리터와 실행 단계가 분리되어 있지 않아, 해석 - 실행이 반복되므로 실행 속도가 비교적 느리며, 이와 같은 과정을 매번 반복 수행한다.

자바스크립트는 인터프리터 언어이지만 컴파일 과정을 거침

• 자바스크립트는 인터프리터 언어이지만, 브라우저마다 존재하는 엔진 내부에서 컴파일 과정을 거친다.
• 따라서 성능이 비약적으로 향상되었다.

1. 엔진이 실행할 자바스크립트 파일을 받게 되면, 파싱과 트리를 구축하는 과정을 거친다.
2. 인터프리터가 코드를 읽으며 실행하고, 코드를 수행하는 과정에서 최적화 할 수 있는 코드를 컴파일러에게 전달한다.
3. 이렇게 전달된 코드로, 반복되는 코드 블록을 최적화(컴파일)하여 원래 있던 코드를 컴파일된 코드로 바꿔준다.

• 자바스크립트는 실행되는 브라우저에 따라 인터프리팅과 컴파일이 혼합되어 사용된다.

Node.js

• V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다.
• 코드를 실행하고 메모리를 관리하며 필요한 라이브러리와 API를 제공한다.
• 이 외에도, 주로 브라우저에서만 실행되던 자바스크립트를 외부에서도 실행할 수 있게 만들어주어, Express를 이용한 웹 서버 개발 등의 새로운 영역을 가능케 한다.

호이스팅

• 변수 선언 이전에 변수를 먼저 호출하는 경우가 있다고 가정했을 때, 참조 에러가 발생하지 않고 아직 정의되지 않은 undefined가 출력된다.

console.log(score); // undefined
var = score;

• 이처럼 호이스팅이란, 모든 선언문(변수, 함수 등)을 찾아내어 먼저 실행하는 것을 말한다.
• 소스 코드가 실행되는 시점이 런타임(코드가 읽힐 때)이 아니라 그 이전 단계에서 먼저 실행된다.
• 자바스크립트 엔진이 소스코드를 한 줄씩 실행하기에 앞서, 모든 소스코드의 평가 과정을 거치면서 소스코드를 실행하기 위한 준비를 한다.
• 소스 코드의 평가 과정이 끝나면 모든 선언문을 제외한 소스코드를 한 줄씩 순차적으로 실행한다.
• 모든 선언문은 이처럼 어디에 있든 상관없이 다른 코드보다 먼저 실행되며, 선언이 어디에 위치하는지와 상관없이 변수를 참조할 수 있다.

변수와 함수의 호이스팅

변수

• 선언만 호이스팅되고 초기화는 원래 위치에서 이루어진다.
• 선언 이전에 접근하면 undefined가 발생한다.
• var는 호이스팅되며 undefined가 발생하지만, let과 const는 TDZ(Temporal Dead Zone)로 인해 초기화 전 접근이 금지된다.

함수

• 함수 표현식은 변수 호이스팅의 규칙을 따르며, 함수 선언문은 전체가 호이스팅된다.
• 변수와 함수명이 같을 경우, 함수 선언이 변수 선언보다 우선된다.
• 함수 선언문의 전체가 호이스팅 된다는 것은, 식별자만 호이스팅 되는 것이 아니라 함수의 정의(function의 부분) 또한 끌어올려져서 함수 선언 전 호출(기능 가능)이 가능하다는 것이다.

// 함수 표현식
method1(); // TypeError

const method1 = () => {
  console.log("함수 표현식");
};

// 함수 선언문
method2(); // 함수 선언문

function method2() {
  console.log("함수 선언문");
}