시스매

자바스크립트의 심장 ECMAScript 완벽 정복 핸드북

26 min read

2025-09-23 20:42

  • ECMAScript는 자바스크립트의 공식 표준 규격으로, 웹 브라우저 간 코드 호환성 문제를 해결하기 위해 탄생했다.

  • TC39 위원회가 매년 새로운 버전(ES2015, ES2016 등)을 출시하며 언어의 기능과 문법을 점진적으로 발전시킨다.

  • Babel과 같은 트랜스파일러와 Polyfill을 사용하면 최신 ECMAScript 문법을 구형 브라우저에서도 안전하게 사용할 수 있다.

자바스크립트의 심장 ECMAScript 완벽 정복 핸드북

자바스크립트 개발자라면 ‘ES6’, ‘ES2015’, ‘ECMAScript’와 같은 용어를 매일같이 마주하게 된다. 이 용어들은 정확히 무엇을 의미하며, 왜 우리 개발자에게 이토록 중요할까? 많은 이들이 자바스크립트와 ECMAScript를 혼용하지만, 둘 사이에는 중요한 차이가 있다. ECMAScript는 자바스크립트라는 언어의 심장 박동을 조율하는 핵심 설계도와 같다.

이 핸드북은 ECMAScript의 탄생 배경부터 구조, 최신 기능 활용법, 그리고 미래까지, 개발자가 알아야 할 모든 것을 깊이 있게 탐구한다. 이 글을 끝까지 읽는다면, 당신은 더 이상 모던 자바스크립트의 변화가 두렵지 않고, 오히려 그 변화를 주도하는 개발자로 거듭날 것이다.

1. ECMAScript의 탄생 혼돈 속에서 피어난 질서

ECMAScript의 이야기를 시작하려면 1990년대 중반, ‘브라우저 전쟁’이라 불리던 혼란의 시대로 거슬러 올라가야 한다.

1.1. 야생의 시대와 브라우저 전쟁

1995년, 넷스케이프(Netscape)는 자사의 Navigator 브라우저에 동적인 웹 페이지를 만들기 위한 스크립트 언어 ‘모카(Mocha)‘를 탑재했다. 이 언어는 곧 ‘라이브스크립트(LiveScript)‘로 이름을 바꿨고, 당시 선풍적인 인기를 끌던 Java의 마케팅 효과를 노려 최종적으로 ‘자바스크립트(JavaScript)‘라는 이름을 갖게 되었다.

자바스크립트는 웹에 생명을 불어넣었고, 개발자들 사이에서 빠르게 퍼져나갔다. 이 성공을 지켜보던 마이크로소프트(Microsoft)는 위기감을 느끼고 인터넷 익스플로러(Internet Explorer)에 탑재할 자체 스크립트 언어를 개발하기로 결정한다. 그들은 자바스크립트를 리버스 엔지니어링하여 ‘JScript’라는 이름의 거의 동일한 언어를 만들어 냈다.

이것이 바로 브라우저 전쟁의 서막이었다. 넷스케이프와 마이크로소프트는 각자의 브라우저에서만 동작하는 독자적인 기능들을 경쟁적으로 추가하기 시작했다. 개발자들에게는 악몽과도 같은 시간이었다. 하나의 웹사이트를 만들기 위해 넷스케이프용 코드와 익스플로러용 코드를 따로 작성해야 했고, 코드는 if (isNetscape) { ... } else if (isExplorer) { ... } 와 같은 분기문으로 가득 찼다. 웹의 가장 큰 가치인 ‘개방성’과 ‘호환성’이 심각하게 위협받고 있었다.

1.2. 표준의 필요성 그리고 Ecma International

이러한 파편화 문제를 해결하기 위해, 넷스케이프는 1996년 자바스크립트 명세를 표준화 기구에 제출하기로 결정한다. 그들이 선택한 곳은 Ecma International (European Computer Manufacturers Association)이었다. Ecma는 정보 통신 기술 분야의 표준을 제정하는 국제 기구이다.

Ecma는 이 새로운 언어 표준을 개발하기 위해 TC39 (Technical Committee 39) 라는 기술 위원회를 구성했다. 1997년 6월, 드디어 첫 번째 표준이 완성되었고, ‘ECMA-262’라는 공식 명칭을 얻었다.

하지만 ‘자바스크립트’라는 이름은 당시 썬 마이크로시스템즈(Sun Microsystems)가 소유한 상표였기 때문에, 표준의 이름으로 사용할 수 없었다. 그래서 표준화 기구인 ‘Ecma’와 스크립트 언어임을 나타내는 ‘Script’를 조합하여 ECMAScript라는 새로운 이름을 만들었다.

결론적으로 관계는 다음과 같이 정리된다.

  • ECMAScript: 언어의 핵심 문법, 타입, 객체, 키워드 등을 정의하는 표준 명세(Specification). 비유하자면, 자동차의 엔진, 변속기, 조향 장치 등에 대한 설계도와 같다.

  • JavaScript: ECMAScript 명세를 실제로 구현한 구현체(Implementation) 중 가장 유명하고 널리 쓰이는 이름. V8(Chrome), SpiderMonkey(Firefox) 같은 자바스크립트 엔진은 이 설계도를 보고 실제 자동차를 만드는 공장과 같다. 또한, 브라우저 환경의 JavaScript는 ECMAScript 명세 외에도 DOM, BOM과 같은 Web API를 포함한다.

따라서 우리가 “ES6 문법을 사용한다”라고 말하는 것은 “ECMAScript 6번째 버전에 정의된 문법을 사용한다”는 의미가 된다. ECMAScript 덕분에 우리는 어떤 브라우저를 쓰든 동일한 자바스크립트 코드가 동일하게 동작할 것이라고 기대할 수 있게 된 것이다.

2. ECMAScript의 구조 버전과 진화 과정

ECMAScript는 TC39 위원회에 의해 꾸준히 발전하고 있다. 그 진화의 과정을 이해하는 것은 모던 자바스크립트의 흐름을 파악하는 데 매우 중요하다.

2.1. TC39와 표준화 제안 프로세스

TC39는 구글, 마이크로소프트, 애플, 모질라, 페이스북 등 웹에 지대한 영향을 미치는 기업들의 대표들과 학계 전문가들로 구성된 위원회다. 이들은 정기적으로 회의를 열어 ECMAScript의 새로운 기능을 제안하고 논의하며 표준을 발전시킨다.

새로운 기능이 ECMAScript 표준에 포함되기까지는 체계적인 단계를 거치는데, 이를 TC39 프로세스라고 부르며 총 5단계로 이루어진다.

단계 (Stage)이름설명
Stage 0Strawperson (아이디어)위원회 외부에서도 누구나 아이디어를 제안할 수 있는 초기 단계.
Stage 1Proposal (제안)위원회 멤버 중 한 명이 ‘챔피언’이 되어 정식으로 제안을 책임진다. 문제 정의, 해결책, 예시 코드 등을 구체화한다.
Stage 2Draft (초안)기능의 문법과 동작에 대한 첫 번째 명세 초안이 작성된다. 이 단계부터는 기능이 표준에 포함될 가능성이 높다.
Stage 3Candidate (후보)명세가 완성되고, 브라우저 제조사나 커뮤니티로부터 피드백을 받는다. 실제 구현과 테스트가 진행된다.
Stage 4Finished (완료)최소 2개 이상의 브라우저에서 실제 구현이 완료되고 테스트를 통과했다. 차기 ECMAScript 버전에 포함될 준비가 완료된 상태.

이러한 엄격한 프로세스는 새로운 기능이 충분한 검토와 합의 없이 성급하게 표준에 포함되는 것을 방지하고, 언어의 안정성과 호환성을 보장하는 중요한 역할을 한다.

2.2. 주요 버전의 역사와 특징

ECMAScript는 버전에 따라 중요한 변화들을 겪어왔다. 모든 버전을 알 필요는 없지만, 주요 분기점이 된 버전들은 반드시 이해해야 한다.

  • ES1 (1997), ES2 (1998), ES3 (1999)

    • 초기 자바스크립트의 기반을 다진 버전. try...catch, 정규 표현식 등 기본적인 기능들이 이 시기에 확립되었다. 우리가 아는 고전적인 자바스크립트의 모습이다.

  • ES4 (The Lost Version)

    • ES3 이후, TC39는 클래스, 인터페이스, 타입 시스템 등 매우 야심 찬 기능들을 담은 ES4를 준비했다. 하지만 변화가 너무 급진적이었기 때문에 위원회 내에서 의견 대립이 극심했고, 결국 2008년에 프로젝트가 폐기되었다. 이로 인해 약 10년간 ECMAScript의 발전이 정체되는 ‘암흑기’를 겪게 된다.

  • ES5 (2009)

    • ES4의 실패를 교훈 삼아, 보다 실용적이고 합의 가능한 개선 사항들을 중심으로 발표된 중요한 버전이다.

    • 'use strict' 모드: 코드의 오류를 줄이고 안정성을 높이는 엄격 모드 도입.

    • JSON 지원: JSON.parse(), JSON.stringify()가 표준으로 들어왔다.

    • 새로운 Array 메소드: forEach(), map(), filter(), reduce(), some(), every() 등 함수형 프로그래밍 스타일을 지원하는 강력한 배열 메소드들이 대거 추가되었다.

    • Object.create(), Object.keys() 등 객체 조작 기능 강화.

  • ES6 / ES2015 (혁명적인 변화)

    • 10년의 침묵을 깨고 등장한, ECMAScript 역사상 가장 크고 중요한 업데이트. 이 버전을 기점으로 자바스크립트는 완전히 새로운 언어라고 불릴 만큼 강력해졌다.

    • 새로운 이름: 매년 점진적인 업데이트를 하자는 취지에서, 버전 넘버(ES6) 대신 연도(ES2015)를 붙이는 방식으로 명명 규칙이 변경되었다.

    • 주요 기능:

      • let, const: 블록 스코프를 가지는 새로운 변수 선언 방식.

      • 화살표 함수 (Arrow Functions): function 키워드와 return을 축약하고, this 바인딩 문제를 해결한 간결한 함수 표현식.

      • 클래스 (Classes): class 키워드를 통해 프로토타입 기반 상속을 더 명확하고 쉽게 구현.

      • 템플릿 리터럴 (Template Literals): 백틱(`)을 사용하여 문자열 내에 변수를 쉽게 삽입.

      • 구조 분해 할당 (Destructuring): 객체나 배열의 속성을 쉽게 추출하여 변수에 할당.

      • 모듈 시스템 (import/export): 파일 단위로 코드를 분리하고 재사용할 수 있는 표준 모듈 시스템 도입.

      • 프로미스 (Promises): 비동기 코드를 보다 체계적으로 관리하기 위한 객체.

      • Spread/Rest 연산자 (...), 기본 매개변수 (Default Parameters) 등 수많은 기능 추가.

  • ES2016 (ES7) 이후의 연간 업데이트

    • ES2015 이후, TC39는 매년 6월에 Stage 4를 통과한 제안들을 모아 새로운 버전을 발표한다. 이는 작지만 꾸준한 개선을 통해 언어를 안정적으로 발전시키기 위함이다.

    • ES2016: Array.prototype.includes(), 거듭제곱 연산자 (**).

    • ES2017: async/await (프로미스를 더욱 동기 코드처럼 쉽게 다룰 수 있게 해주는 혁신), Object.values(), Object.entries().

    • ES2018: 객체에 대한 Rest/Spread 연산자, 비동기 이터레이션 (for-await-of).

    • ES2020: Optional Chaining (?.), Nullish Coalescing Operator (??), BigInt.

    • ES2022: Top-level await, Array.prototype.at().

이처럼 ECMAScript는 멈춰있지 않고 계속해서 발전하고 있다. 개발자들은 이 변화의 흐름을 이해하고 새로운 기능들을 적극적으로 학습해야 한다.

3. ECMAScript 활용법 과거와 미래를 잇는 다리

최신 ECMAScript 문법은 코드의 가독성과 생산성을 크게 향상시킨다. 하지만 우리가 작성한 코드는 최신 브라우저뿐만 아니라 수년 된 구형 브라우저나 인터넷 익스플로러에서도 동작해야 할 때가 있다. 이 간극을 어떻게 메울 수 있을까?

3.1. 문제점 브라우저 호환성

[Image showing browser compatibility chart from caniuse.com]

모든 브라우저가 ECMAScript의 최신 기능을 동시에 지원하지는 않는다. 예를 들어 ES2020에 추가된 ‘Optional Chaining (?.)‘은 크롬 80, 파이어폭스 74 버전부터 지원된다. 그 이전 버전의 브라우저에서 이 문법을 사용하면 문법 오류(Syntax Error)가 발생하며 스크립트 전체가 멈춰버린다.

이러한 문제를 해결하고 개발자가 최신 문법을 마음껏 사용하도록 돕는 두 가지 핵심 도구가 바로 트랜스파일러와 폴리필이다.

3.2. 해결책 1 트랜스파일러 (Transpiler)

트랜스파일러는 특정 언어로 작성된 코드를 비슷한 수준의 다른 언어 코드로 변환해주는 도구다. 자바스크립트 세계에서 가장 유명한 트랜스파일러는 Babel이다.

Babel의 역할은 최신 ECMAScript 문법(ES2015, ES2020 등)으로 작성된 코드를 구형 브라우저에서도 이해할 수 있는 ES5 수준의 코드로 **변환(컴파일)**하는 것이다.

  • 비유: 트랜스파일러는 최신 유행어가 섞인 신조어를 모든 세대가 이해할 수 있는 표준어로 번역해주는 ‘번역가’와 같다. 원본의 의미는 그대로 유지하되, 표현 방식만 바꾸는 것이다.

예시: 화살표 함수 변환

JavaScript

// 원본 코드 (ES6+)
const numbers = [1, 2, 3];
const squared = numbers.map(n => n * n);

위 코드를 Babel로 트랜스파일하면 다음과 같은 ES5 코드가 생성된다.

JavaScript

// 변환된 코드 (ES5)
"use strict";

var numbers = [1, 2, 3];
var squared = numbers.map(function(n) {
  return n * n;
});

const는 var로, 화살표 함수는 function 키워드를 사용한 일반 함수로 변환되었다. 이 코드는 대부분의 구형 브라우저에서도 문제없이 동작한다. 현대의 웹 개발 환경(React, Vue, Angular 등)에서는 Webpack, Vite와 같은 번들러를 통해 이 Babel 트랜스파일 과정이 자동으로 처리된다.

3.3. 해결책 2 폴리필 (Polyfill)

트랜스파일러가 **문법(Syntax)**을 변환해주는 도구라면, 폴리필은 문법이 아닌 새로운 **함수나 객체(API)**를 지원하는 역할을 한다.

예를 들어 ES2016에 추가된 Array.prototype.includes() 메소드는 구형 브라우저의 Array 객체에는 존재하지 않는 함수다. Babel은 arr.includes(x) 같은 문법 자체를 변환할 수는 없다. includes라는 함수 자체가 없기 때문이다.

폴리필은 바로 이 지점에서 활약한다. 특정 기능이 현재 환경에 존재하지 않을 경우, 표준 명세와 동일하게 동작하는 코드를 직접 추가해준다.

  • 비유: 폴리필은 오래된 스마트폰에 없는 ‘QR 코드 스캔’ 기능을 앱스토어에서 관련 앱을 다운받아 설치해서 쓸 수 있게 만드는 것과 같다. 하드웨어(브라우저) 자체는 바뀌지 않았지만, 소프트웨어(폴리필 코드)를 추가하여 새로운 기능을 구현하는 것이다.

예시: Array.prototype.includes 폴리필

JavaScript

// core-js 라이브러리에 포함된 폴리필 예시
if (!Array.prototype.includes) {
  Array.prototype.includes = function(searchElement, fromIndex) {
    // .includes()와 동일하게 동작하는 로직 구현
    // ...
    return this.indexOf(searchElement, fromIndex) !== -1;
  };
}

위 코드는 Array.prototype에 includes 메소드가 없는 경우에만 직접 함수를 정의하여 추가한다. 이렇게 하면 구형 브라우저에서도 [1, 2, 3].includes(2)와 같은 코드가 에러 없이 정상적으로 동작하게 된다.

보통 core-js와 같은 라이브러리를 사용하여 필요한 폴리필들을 프로젝트에 포함시킨다. Babel은 설정에 따라 필요한 폴리필을 자동으로 감지하고 주입해주는 기능도 제공한다.

3.4. 호환성 확인 도구

개발자는 코드를 작성하기 전에 특정 기능이 어느 브라우저 버전부터 지원되는지 확인할 필요가 있다. 이때 유용한 사이트들이 있다.

  • MDN Web Docs: Mozilla가 운영하는 웹 기술에 대한 가장 신뢰도 높은 문서. 각 기능 설명 페이지 하단에 상세한 브라우저 호환성 표가 제공된다.

  • Can I use…: 특정 웹 기술(CSS, JavaScript API 등)을 검색하면 전 세계 브라우저 점유율과 함께 지원 여부를 시각적으로 보여주는 매우 유용한 사이트다.

4. 심화 탐구 ECMAScript와 자바스크립트 생태계

ECMAScript를 더 깊이 이해하기 위해서는 그 명세를 실제로 구현하는 ‘자바스크립트 엔진’과 자바스크립트 생태계 전반에 대한 이해가 필요하다.

4.1. 자바스크립트 엔진의 역할

ECMAScript는 종이에 적힌 규칙일 뿐, 실제로 코드를 실행하는 것은 브라우저에 내장된 자바스크립트 엔진이다.

  • V8: 구글이 개발한 가장 유명한 엔진. Chrome 브라우저와 Node.js에서 사용된다. 빠른 성능으로 유명하다.

  • SpiderMonkey: Mozilla가 개발했으며 Firefox 브라우저에서 사용된다. 최초의 자바스크립트 엔진이다.

  • JavaScriptCore: 애플이 개발했으며 Safari 브라우저에서 사용된다.

이 엔진들은 ECMAScript 명세를 최대한 정확하고 빠르게 구현하기 위해 서로 경쟁한다. JIT(Just-In-Time) 컴파일과 같은 고급 최적화 기술을 통해 자바스크립트의 실행 속도를 비약적으로 향상시켰다. TC39에서 새로운 기능이 Stage 3에 도달하면, 이 엔진 개발팀들은 해당 기능을 자신들의 엔진에 미리 구현하여 테스트하고 피드백을 제공한다. 이 경쟁과 협력이 ECMAScript 발전을 이끄는 원동력이다.

4.2. ECMAScript vs JavaScript 다시보기

이제 우리는 둘의 차이를 명확히 정의할 수 있다.

  • ECMAScript: 언어의 핵심 규칙(문법, 타입, 객체 모델 등)을 정의하는 표준.

  • JavaScript: ECMAScript 표준을 구현한 언어. 여기에 더해, 실행 환경(런타임)이 제공하는 추가적인 API를 포함한다.

    • 브라우저 환경: ECMAScript + Web API (DOM, BOM, Fetch, Canvas 등)

    • Node.js 환경: ECMAScript + Node.js API (fs, http, path 등)

비유하자면, ECMAScript가 영어의 ‘문법과 어휘’라면, 브라우저의 자바스크립트는 영어 문법을 기반으로 ‘의학 논문을 쓰는 방법(DOM API)‘까지 포함하는 개념이고, Node.js의 자바스크립트는 ‘기계 공학 설명서를 쓰는 방법(File System API)‘을 포함하는 개념이라 할 수 있다.

4.3. ECMAScript의 미래

ECMAScript는 살아있는 언어다. TC39의 GitHub 저장소에 가면 현재 논의 중인 수많은 제안들을 직접 확인할 수 있다. 데코레이터(Decorators), 파이프라인 연산자(Pipeline Operator), 타입 애너테이션(Type Annotations) 등 흥미로운 기능들이 다음 표준이 되기 위해 논의되고 있다.

이러한 변화를 주시하는 것은 개발자로서 미래를 준비하고, 더 나은 코드를 작성하기 위한 영감을 얻는 좋은 방법이다.

결론 ECMAScript는 개발자의 무기

ECMAScript는 단순히 용어의 집합이 아니다. 그것은 웹의 파편화를 막고 자바스크립트를 현대적인 언어로 발전시킨 원동력이자, 전 세계 개발자들이 따르는 약속이다.

우리는 ECMAScript의 역사를 통해 웹 표준의 중요성을 배우고, 그 구조와 버전을 통해 자바스크립트의 발전 방향을 이해할 수 있다. 또한 Babel과 같은 도구를 활용하여 최신 기술의 혜택을 누리면서도 과거와의 호환성을 지킬 수 있는 지혜를 얻는다.

결국 ECMAScript를 깊이 이해하는 것은 자바스크립트라는 강력한 도구를 더 날카롭게 벼리고, 더 효율적이며 견고한 코드를 작성하는 개발자로 성장하는 길이다. 끊임없이 진화하는 ECMAScript의 흐름에 올라타 변화를 즐기는 개발자가 되기를 바란다.

그래프 뷰