1️⃣ 인터프리터 언어
자바스크립트는 소스 코드를 한 줄씩 읽으며 즉시 실행하는 인터프리터 방식입니다.
- 동작 원리: 전통적인 인터프리터는 코드를 바로 실행하지만, 현대의 자바스크립트 엔진(V8 등)은 JIT(Just-In-Time) 컴파일러를 내장하고 있습니다. 실행 시점에 자주 쓰이는 코드를 기계어로 컴파일하여 성능을 최적화합니다.
- 특징: 별도의 컴파일 단계가 없어 브라우저에서 즉시 실행이 가능하며, 코드 수정 후 결과 확인이 매우 빠릅니다.
컴파일러 vs 인터프리터
| 구분 | 컴파일러 (Compiler) | 인터프리터 (Interpreter) |
| 번역 방식 | 프로그램 전체를 한꺼번에 번역 | 코드를 한 줄씩 읽으며 즉시 실행 |
| 출력물 | 목적 코드(실행 파일) 생성 | 실행 파일 없음 |
| 실행 속도 | 번역은 느리지만, 실행은 빠름 | 번역은 없지만, 매번 실행이 느림 |
| 디버깅 | 오류를 전체 검사 후 한 번에 보고 | 오류 발생 시점에서 즉시 중단 |
| 대표 언어 | C, C++, Rust, Go | Python, JavaScript, Ruby |
컴파일러 (Compiler)
: 소스 코드를 컴퓨터가 이해할 수 있는 기계어로 미리 다 바꿔놓는 방식입니다.
- 특징: 번역 과정(컴파일 시간)이 오래 걸리지만, 한 번 번역이 끝나면 실행할 때는 컴퓨터가 이미 내용을 다 알기 때문에 매우 빠르게 동작합니다.
- 장점: 대규모 프로그램에서 성능이 뛰어나고, 실행 파일만 있으면 소스 코드 없이도 어디서든 실행할 수 있습니다.
- 단점: 코드를 수정할 때마다 다시 전체를 컴파일해야 해서 번거로울 수 있습니다.
인터프리터 (Interpreter)
인터프리터는 소스 코드를 한 줄 한 줄 읽어 내려가며 그때그때 실행하는 방식입니다.
- 특징: 미리 번역해두는 과정이 없어서 바로 실행 버튼을 누를 수 있습니다. 하지만 실행 중에 번역을 병행하므로 순수 실행 속도는 컴파일러보다 느립니다.
- 장점: 코드를 바로바로 수정하고 결과를 확인할 수 있어 개발 속도가 빠르고 유연합니다.
- 단점: 프로그램을 실행할 때마다 인터프리터가 필요하며, 반복문이 많은 경우 매번 같은 코드를 번역하느라 효율이 떨어질 수 있습니다.
2️⃣ 동적 타입 언어 (Dynamic Typed Language)
자바스크립트는 변수를 선언할 때 타입을 미리 지정하지 않습니다.
- 런타임 타입 결정: 변수의 타입은 코드가 실행되는 시점(Runtime)에 할당되는 값에 따라 결정됩니다.
- 유연성과 위험성:이 방식은 빠르게 개발할 수 있게 해주지만, 예상치 못한 타입 오류를 발생시킬 수 있습니다. 이를 보완하기 위해 대규모 프로젝트에서는 TypeScript를 사용하기도 합니다.
-
JavaScript
let data = 10; // Number 타입 data = "Hello"; // String 타입으로 자유롭게 변경 가능
3️⃣ 일급 객체로서의 함수 (First-class Object)
자바스크립트에서 함수는 단순한 기능의 묶음이 아니라 '객체(Value)'입니다.
- 일급 객체의 조건:
- 변수에 할당할 수 있다.
- 다른 함수의 인자로 전달할 수 있다.
- 함수의 반환값으로 사용할 수 있다.
- 왜 중요한가? : 이 특징 덕분에 콜백 함수나 고차 함수 구현이 가능해지며, 이는 자바스크립트의 비동기 처리를 가능하게 하는 핵심 동력이 됩니다.
4️⃣ 프로토타입 기반 상속 (Prototype-based Inheritance)
자바스크립트는 클래스 기반 언어(Java, C++)와 달리 객체 간의 연결을 통해 상속을 구현합니다.
- 프로토타입 객체: 모든 객체는 자신의 부모 역할을 하는 [Prototype]이라는 숨겨진 링크를 가집니다.
- 프로토타입 체이닝: 특정 객체의 프로퍼티에 접근하려 할 때, 해당 객체에 찾는 값이 없으면 링크를 타고 부모 프로토타입을 거슬러 올라가며 검색합니다.
- 효율성: 클래스를 복제하는 것이 아니라 원본 객체를 참조하는 방식이므로 메모리 사용 면에서 효율적입니다.
5️⃣ 멀티 패러다임 지원 (Multi-paradigm)
자바스크립트는 하나의 정해진 틀에 갇히지 않고 다양한 설계 방식을 수용합니다.
- 명령형(Imperative): "어떻게(How)" 실행할지 순차적으로 명시합니다.
- 객체지향(OOP): 데이터와 동작을 객체 단위로 묶어 관리합니다. (ES6 클래스 문법 지원)
- 함수형(Functional): 함수를 조합하고 순수 함수를 사용하여 부작용(Side Effect)을 최소화합니다. 최근 map, filter, reduce 등을 활용한 함수형 스타일이 매우 선호됩니다.
JavaScript 표준화 - JavaScript의 탄생배경과 ECMAScript
자바스크립트의 발전
- 탄생 이후로 성장 시점마다 버전이 존재
- 자바스크립트를 사용하는 개발자는 버전을 확인하여 개발
과거에는
- 자사 소프트웨어 사용의 점유율을 높이기 위해 브라우저마다 동작하는 기능을 경쟁적으로 추가
-> 같은 자바스크립트 파일인데, IE에서만 동작하고 Netscape에서는 동작안하는 현상 발생(크로스 브라우징 이슈)
- " 모든 브라우저에서 자바스크립트는 동일하게 동작해야한다 " -> 1996년 표준화 개발 진행(넷스케이프 -> ECMA 총회)
- 1997년 ECMA 총회때 채택,
- 표준화 목록 중 하나 : ECMA-262
- ECMAScript로 명명
- 해당 표준화 정책을 고려한 개발이 필요 (실제 표준화된 버전 - 브라우저 지원 버전 상이한 경우가 있음)
- 1997년 ECMA 총회때 채택,
=> ECMAScript 2015+로 개발하기
ECMAScript2015 (= ES2025 = ES6(판))
- 6판을 위한 작업은 2009년부터 진행(15년)
- 목표 : 대규모 어플리케이션, 라이브러리 생성, 다른 언어의 컴파일 등으로 사용하는데에 용이하도록 토대를 제공
- 개선사항 : 모듈, 클래스 선언, 블록레벨 스코프, iterator와 generator, 비동기 프로그래밍, promise, 구조분해 패턴, 등의 개선이 존재
ECMAScript와 브라우저
- 브라우저는 브라우저의 버전마다, 지원하는 자바스크립트 스펙이 상이 - ECMAScript의 기준을 따라가지는 않음
- 개별 기능의 지원: Caniuse에서 브라우저 지원여부 확인 가능
지원이 안될 경우?
- polyfill
- 지원하지 않는 브라우저에서 최신 기능을 제공하기 위해 필요한 코드
- 폴리필은 브라우저가 다른 방식으로 동일한 기능을 구현하는 문제를 해결하는데 사용
- Babel
- 이전 버전의 브라우저에서 ES6 이전 버전의 JavaScript로 변환하는데 사용되는 도구
- 문법을 번역 및 변환
- 폴리필 기능
'FE > Javascript' 카테고리의 다른 글
| [JavaScript] 자바스크립트의 자료형, 동적 타입 언어 (0) | 2026.03.17 |
|---|---|
| [JavaScript] 변수 생성 방법(var vs const, let), 호이스팅 , 변수 네이밍 컨벤션 (0) | 2026.03.13 |
| [JavaScript] 애니메이션, form, 조건문 (0) | 2025.06.30 |
| [Javascript] 이벤트리스너, JQuery함수 (2) | 2025.06.29 |
| [JavaScript] 반응형 사이드 바 제작 (1) | 2025.06.29 |