[JavaScript] javaScript의 기본 특징

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)'입니다.

  • 일급 객체의 조건:
    1. 변수에 할당할 수 있다.
    2. 다른 함수의 인자로 전달할 수 있다.
    3. 함수의 반환값으로 사용할 수 있다.
  • 왜 중요한가? : 이 특징 덕분에 콜백 함수나 고차 함수 구현이 가능해지며, 이는 자바스크립트의 비동기 처리를 가능하게 하는 핵심 동력이 됩니다.

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로 명명 
    • 해당 표준화 정책을 고려한 개발이 필요 (실제 표준화된 버전 - 브라우저 지원 버전 상이한 경우가 있음)

 

=> ECMAScript 2015+로 개발하기

ECMAScript2015 (= ES2025 = ES6(판))

  • 6판을 위한 작업은 2009년부터 진행(15년)
  • 목표 : 대규모 어플리케이션, 라이브러리 생성, 다른 언어의 컴파일 등으로 사용하는데에 용이하도록 토대를 제공 
  • 개선사항 : 모듈, 클래스 선언, 블록레벨 스코프, iterator와 generator, 비동기 프로그래밍, promise, 구조분해 패턴, 등의 개선이 존재

ECMAScript와 브라우저

  • 브라우저는 브라우저의 버전마다, 지원하는 자바스크립트 스펙이 상이 - ECMAScript의 기준을 따라가지는 않음
  • 개별 기능의 지원: Caniuse에서 브라우저 지원여부 확인 가능

지원이 안될 경우?

  • polyfill
    • 지원하지 않는 브라우저에서 최신 기능을 제공하기 위해 필요한 코드
    • 폴리필은 브라우저가 다른 방식으로 동일한 기능을 구현하는 문제를 해결하는데 사용
  • Babel
    • 이전 버전의 브라우저에서 ES6 이전 버전의 JavaScript로 변환하는데 사용되는 도구
    • 문법을 번역 및 변환
    • 폴리필 기능