자바스크립트는 어떻게 실행될까? 해석형 & JIT 컴파일 개념 설명

GoGoComputer·2025년 2월 1일

javaScript study

목록 보기

2/10

아직 낯설 수 있지만, “해석형(Interpreted), 즉석 컴파일(On-the-fly Compilation)”이라는 개념을 조금 더 쉽게 풀어서 설명해 드릴게요. 이 내용을 이해하시면, 자바스크립트 코드가 브라우저나 다른 환경에서 어떻게 실행되는지 큰 그림을 잡으실 수 있을 겁니다.

1. 자바스크립트 코드는 어디서, 어떻게 실행될까요?

우리가 작성한 자바스크립트 코드는 웹브라우저(Chrome, Firefox, Safari 등)뿐만 아니라
서버 환경(Node.js 등)이나 다양한 플랫폼에서 실행될 수 있습니다.
하지만 어느 환경에서든 코드를 실행시키려면 “자바스크립트 엔진”이 필요합니다.

예를 들어,
- 크롬(Chrome) 브라우저에는 V8 엔진이 내장되어 있습니다.
- 파이어폭스(Firefox) 브라우저에는 SpiderMonkey 엔진이 들어 있습니다.
- 사파리(Safari) 브라우저는 JavaScriptCore 엔진을 사용합니다.

이 엔진(Engine) 이 바로 “자바스크립트 코드를 읽고, 이해(분석) 한 뒤,
실행할 수 있도록 준비하는 핵심 프로그램”이에요.

2. 해석(Interpretation)이란 무엇인가?

자바스크립트 같은 ‘해석형 언어’에서는,
우리가 작성한 코드(.js 파일 등)를 한 줄 한 줄 읽어가며
바로 실행하거나 기계어(Machine Code)로 바로바로 변환합니다.

예시:
1. let message = "Hello";
2. console.log(message);
3. message = "World!";
엔진이 코드를 읽으면서, “아, message라는 변수에 "Hello"를 넣으라고 하는구나!”
“그 다음 줄에는 console.log로 그걸 출력하라고 하는구나!”
이렇게 줄단위로 해석하고 즉시 실행하게 됩니다.

3. 그런데 “즉석 컴파일(On-the-fly Compilation)”은 뭐죠?

옛날에 “해석형 언어”라고 하면, “그냥 코드를 바로 읽고 그대로 실행”하는 방식을 떠올렸습니다.
하지만 요즘 자바스크립트 엔진들은 훨씬 똑똑한 최적화(Optimization) 기법을 씁니다.

1) JIT(Just-In-Time) 컴파일

JIT(Just-In-Time) 컴파일:
자바스크립트 엔진이 코드를 읽으면서,
동시에 자주 실행되는 부분이나 필요하다고 판단되는 부분을 기계어(머신 코드)로 미리 컴파일해 둡니다.
이렇게 하면, 반복적으로 실행되는 로직을 다음 번에 다시 해석할 필요 없이 이미 만들어둔 기계어를 바로 실행할 수 있으므로, 성능이 훨씬 빨라집니다.

즉, 현대 자바스크립트 엔진은
1. 코드를 읽고(해석)
2. 자주 쓰이는 부분은 기계어로 즉석 변환
3. 그 변환된 코드를 실행 (필요시 더 최적화)
4. 코드가 바뀌면 다시 재분석 & 재컴파일

이런 과정을 자동으로, 동적으로 반복합니다.

2) 최적화 & 디옵티마이제이션(De-optimization)

엔진은 코드를 실행하며 “이 함수는 계속 비슷한 방식으로 불리네!” 하면 더 빠르게 돌릴 방법을 찾아 최적화합니다.
만약 런타임 중간에 예외적인 타입이나 상황이 생기면 “어, 예상과 다르네?” 하고 다시 최적화를 풀고(De-Optimization), 해석 방식으로 되돌아오기도 합니다.
이처럼 최적화와 비최적화(De-Optimization)를 반복하며, 자바스크립트 엔진은 최대한 빠르게 코드를 돌리려 애씁니다.

4. 자바스크립트 엔진이 하는 일 (정리)

코드를 구문 분석(Parsing):
우리가 작성한 자바스크립트 코드를 문법에 맞춰 토큰으로 쪼개고, 구조(트리)를 이해합니다.
실행 or 컴파일:
- 코드를 바로 실행(인터프리트)하거나,
- 필요한 부분을 머신 코드(컴퓨터가 직접 이해할 수 있는 언어)로 JIT 컴파일합니다.
최적화(Optimization):
- 실행 속도를 높이기 위해, 계속 실행되는 부분을 더 고성능 코드로 변환합니다.
(필요하면) 디옵티마이제이션:
- 예기치 못한 상황이 생기면 최적화를 풀어서 다시 해석 모드로 돌아갑니다.

결국 “해석형 언어” 라고 부르긴 하지만,
요즘의 자바스크립트는 사실상 해석과 컴파일을 동시에 수행한다고 보시면 돼요.
그래서 “즉석(On-the-fly) 컴파일”이나 “JIT 컴파일”이라는 표현을 씁니다.

5. 단일 스레드(싱글 스레드)에서 실행된다는 의미

자바스크립트 코드는 기본적으로 단일 스레드(싱글 스레드)에서 동작합니다.

스레드(Thread): 컴퓨터가 작업을 진행하는 “실행 흐름” 혹은 “작업 줄기” 정도로 생각하시면 됩니다.
C나 Java 같은 언어에서는 멀티 스레드(한 번에 여러 흐름)로 코드를 돌리기도 하지만,
자바스크립트는 일반적으로 하나의 스레드에서 모든 로직이 순차적으로 처리됩니다.
브라우저가 할 일:
- HTML 그리기(렌더링),
- 이벤트 처리(클릭, 키보드 입력 등),
- 자바스크립트 실행 등
  을 크게 보면 단일 스레드로 처리하며, 중간중간 이벤트 루프라는 개념을 통해 작업들이 끼어들어 갑니다.

이 “단일 스레드” 특성 때문에 “한 번에 하나의 작업만 처리”되는 장점(동기적 단순성)과 단점(오래 걸리는 작업이 있으면 브라우저가 멈춘 듯 보임)이 있습니다.
이벤트 루프, 콜백 큐, 비동기 처리 등을 통해 이를 극복하는 방식이 자바스크립트의 핵심 메커니즘 중 하나죠.

6. 지금 꼭 다 이해해야 할까요?

아직 초보 단계에서 “해석형, JIT 컴파일, 단일 스레드” 같은 표현이 조금 어렵게 들릴 수 있습니다.
실제로 자바스크립트 코드를 작성할 때,
“컴파일을 직접 돌려야 한다”거나 “멀티 스레드를 직접 관리한다”는 일을 직접 하지는 않습니다.
자바스크립트 엔진이 알아서 여러분의 코드를 최적화하고, 싱글 스레드 안에서 이벤트 루프를 돌려 주죠.
우리는 보통 DOM 조작(화면 변경), 이벤트 처리, 네트워크 요청(fetch, AJAX) 등의 기능에 집중해서 동작 방식을 배우면 됩니다.

하지만,
“왜 자바스크립트 코드는 컴파일 과정을 거치지 않고도 바로 실행되나?”,
“어떻게 빠르게 돌아가나?”,
“왜 멀티 스레드가 아니라 단일 스레드인가?” 같은 근본적인 궁금증을 가지게 되면,
지금 말씀드린 엔진 구조나 JIT 컴파일, 단일 스레드 이벤트 루프 같은 지식이 큰 도움이 됩니다.

7. 한눈에 정리

자바스크립트는 “해석형” 언어로 분류되지만, 실제로는 JIT(Just In Time) 컴파일 기법을 통해 바로 컴파일하며 동작합니다.
브라우저나 Node.js 등 자바스크립트가 동작하는 환경에는 자바스크립트 엔진이 내장되어 있어,
우리가 작성한 코드를 분석 → 변환 → 최적화 → 실행 합니다.
자바스크립트 코드는 단일 스레드에서 주로 동작하므로,
여러 일이 동시에 처리되는 것처럼 보여도 이벤트 루프를 통해 순차적으로 작업을 분할해 처리합니다.

앞으로 “동적, 약형” 같은 개념도 배우시겠지만,
지금까지는 “해석형 + 즉석 컴파일” 개념을 이해하셨으니,
“자바스크립트 엔진이 코드를 읽을 때 자동으로 컴파일과 최적화를 해주는구나!” 정도로 기억해 두시면 충분합니다.

다음 단계: 동적, 약형 언어란?

이제 “해석형 & 컴파일” 이야기를 마쳤으니,
곧이어 만나게 될 “동적(dynamic), 약형(weakly-typed)”이라는 개념은
자바스크립트의 문법적 특성과 타입(자료형)을 다루는 방식과 관련이 있습니다.
이를 이해하면, “왜 자바스크립트에서 같은 변수가 숫자가 되기도 하고 문자열이 되기도 하는지”,
“타입 오류가 왜 발생하지 않는 경우가 많은지” 등을 알 수 있게 됩니다.

조금씩 차근차근 공부해 나가다 보면,
자바스크립트가 “런타임 환경에서 모든 것을 해결하고, 개발자가 타입을 엄격히 지정하지 않아도 되는 언어” 라는 점을 실감하게 되실 거예요.

결론

자바스크립트 엔진은 코드를 해석(Interpret)하면서 필요하다면 즉석(On-the-fly) 컴파일까지 합니다.
이렇게 JIT 컴파일 덕분에 자바스크립트가 빠르게 동작할 수 있습니다.
자바스크립트 실행은 단일 스레드에서 일어납니다. (이벤트 루프를 통해 비동기 작업을 스케줄링)
이어서 “동적, 약형”이란 무엇인지 배우면서, 자바스크립트의 유연한 타입 시스템과 런타임 행동 방식을 확인해 볼 겁니다.

위 내용을 어느 정도 이해하셨다면, 자바스크립트가 어떻게 돌아가는지에 대한 큰 줄기는 잡으신 거예요. 나머지는 실무 예제를 다루면서 조금씩 체득하시면 됩니다.

더 궁금한 부분이 생기면 언제든 질문해 주세요!

자바스크립트(JavaScript)는 동적(Dynamic)이고, 해석형(Interpreted)이며, 약형(Weakly Typed) 프로그래밍 언어입니다. 이런 용어가 처음에는 생소하게 느껴지실 수 있는데요, 하나씩 쉽게 풀어서 설명해 드리겠습니다.

1. 동적 해석형 언어란?

1) 동적(Dynamic) 언어란?

동적이라는 말은, “코드가 실행되는 시점(런타임)에 많은 것들이 결정된다”는 뜻입니다.
예를 들어, 자바스크립트에서는 같은 변수가 처음엔 문자열을 담았다가, 실행 도중에 숫자를 담도록 바꿀 수도 있습니다.
다른 언어(C++, Java 등)에서는 “이 변수는 숫자만 담는다”처럼 자료형을 미리 딱 정해야 하기 때문에, 실행 중에 이런 타입 변경이 허용되지 않는 경우가 많습니다.
하지만 자바스크립트는 코드가 돌아가는 런타임에 자유롭게 데이터 유형을 바꿀 수 있는 유연함이 있습니다.

2) 해석형(Interpreted) 언어란?

우리가 코드를 작성하면, C++ 같은 언어는 “개발 중 혹은 배포 전에” 컴파일 과정을 거칩니다. 즉, 최종 프로그램을 실행하기 전에, 미리 소스 코드를 기계어로 번역(컴파일)해 둬야 하죠.
자바스크립트는 이런 사전 컴파일 없이, “코드가 실행될 때”(전송 중 혹은 런타임에) 컴파일이 이루어집니다.
- 예) 브라우저가 자바스크립트 파일을 받아오면, 즉시 해석하거나, Just-In-Time(JIT) 컴파일 기법으로 동시에 기계어로 바꿔가면서 실행합니다.
이 때문에, 자바스크립트 코드가 실행되는 순간에 최적화나 컴파일이 이루어지고, 필요하면 바로 다른 타입으로 변환하는 등의 작업을 수행할 수 있습니다.

3) 코드가 “런타임에 변경된다”는 뜻은?

“코드 자체가 마법처럼 뒤바뀐다”는 의미는 아닙니다.
다만, 코드가 실행되는 도중에 자료형이나 변수에 담긴 내용이 유동적으로 바뀔 수 있다는 것**을 말합니다.

2. 약형(Weakly Typed) 언어란?

1) 자바스크립트의 “약형” 특징

약형이란, 변수를 선언할 때 “이건 숫자형 변수야”라고 미리 못박아 둘 필요가 없다는 의미입니다.
다른 언어(C, C++, Java 등)에서는 변수를 선언할 때 자료형(type) 을 명확히 지정해야 합니다. 예: int num = 10; → num이라는 변수는 숫자(int)만 담을 수 있음.
자바스크립트에선 let data = 10; 처럼 선언할 수 있고,
나중에 data = "Hello"; 라고 대입해도 문제없이 작동합니다.
(앞에서 int처럼 미리 정하지 않았기 때문에, 동적으로 자료형이 바뀔 수 있음)

2) 동적 + 약형 = 유연함

자바스크립트는 “동적” 속성 덕분에 런타임에 다양한 변경을 허용하고,
“약형” 속성 덕분에 변수 타입을 엄격히 지정하지 않아도 됩니다.
코드 작성 시 “숫자만 저장하는 변수”와 “문자열만 저장하는 변수”를 미리 구분하지 않아도 되니, 개발이 간편하다는 장점이 있습니다.

3) 주의할 점

“유연함”이 곧 “좋은 것”이라고만 볼 수는 없습니다.
자료형을 엄격히 관리하는 언어에 비해, 실행 중 타입 오류가 발생하거나 의도치 않은 변환이 일어날 수 있습니다.
그래서 요즘은 자바스크립트에 타입스크립트(TypeScript) 같은 언어 확장을 적용해, 좀 더 타입을 엄격히 다루는 시도를 많이 합니다.

3. 실제 예시로 이해하기

예를 들어, 변수를 선언하는 간단한 코드를 생각해 봅시다.

let data = "안녕하세요";
console.log(typeof data); // "string"

// 나중에 숫자를 대입해도 에러가 나지 않습니다.
data = 42;
console.log(typeof data); // "number"

자바스크립트가 동적 + 약형 언어이기 때문에 가능한 코드입니다.
만약 이 로직을 C++나 Java로 짰다면, 처음에 string data = "안녕하세요"; 로 선언했다면
그다음 줄에 data = 42; 를 넣으면 형식 오류가 납니다.
자바스크립트에선 이런 변경을 런타임에 즉시 처리하므로, 매우 유연합니다.

4. 정리

동적 해석형 언어
- 컴파일을 미리 하지 않고, 코드가 실행되는 순간(JIT 컴파일)에 컴파일하고 해석합니다.
- 런타임에 여러 요소(자료형, 최적화 등)가 동적으로 결정됩니다.
약형(Weakly Typed) 언어
- 변수를 선언할 때 자료형을 미리 지정하지 않아도 됩니다.
- 실행 중에 숫자였다가 문자열이 되기도 하고, 다른 타입도 자유롭게 바뀔 수 있습니다.
이런 동적 + 약형 특성 덕분에 자바스크립트는 웹을 “빠르게 개발”하기 좋은 언어가 되었으며,
다른 언어에 비해 유연성이 매우 높습니다.
다만, 이로 인해 런타임 오류나 예기치 못한 타입 변환 등이 발생할 수 있으므로, 상황에 따라 주의가 필요합니다.

5. 앞으로 배워가면서 이해가 더 깊어질 것

지금은 “아, 자바스크립트에서는 변수가 숫자였다가 문자열이 되어도 에러가 안 나는구나!” 정도로 생각하셔도 좋습니다.
변수(data container)와 타입(문자열, 숫자, 불리언 등)을 실제로 다뤄보면, “동적 + 약형” 특성을 더 실감하게 됩니다.
다음 학습 과정에서 변수, 자료형(string, number, boolean, null, undefined 등), 그리고 타입 변환이 실제로 어떻게 동작하는지 자세히 다루게 됩니다.
그러면서 “약형 언어의 장단점”을 자연스럽게 체험하시게 될 거예요.

한 줄 결론

“동적, 약형 언어” =

동적: 런타임에 컴파일·해석되며, 실행 중에 데이터 타입 등이 변동될 수 있음
약형: 변수에 자료형을 미리 고정하지 않아도 되며, 실행 중 자유롭게 바뀔 수 있음

이 두 가지 특성이 자바스크립트를 아주 유연하게 만들어 주지만,
반면에 타입 안전성 같은 면에서는 주의가 필요합니다.
다음 강의 모듈에서 변수를 다루며 직접 예제를 해보시면 훨씬 더 쉽게 이해가 되실 거예요!

GoGoComputer

IT를 좋아합니다.

이전 포스트

JavaScript란? 초보자를 위한 쉽고 자세한 설명

다음 포스트