ECMAScript와 그 역사

ES의 발전 과정을 표현한 훌륭한 이미지

목차

1. ECMAScript란?
2. JavaScript와 ECMAScript의 차이
3. ECMAScript 버전별 역사
   1. ES 1 ~ 3
   2. ES4
   3. ES5
   4. ES6

1. ECMAScript란?

---

Ecma (European Computer Manufacturers Association) International에서 ECMA-262와 ISO / IEC 16262에 정의된 내용을 바탕으로 만든 표준화된 스크립트 언어의 사양이다. JS를 표준화하기 위해 만들어졌으며 Action Script, JScript와 같이 ECMAScript의 다른 구현체도 물론 존재한다.

 

우리가 JS와 관련된 내용으로 구글링 할 때 흔히 보이는 ES5, ES6등이 ECMAScript의 버전별 표준 규격을 의미한다.

2. JavaScript와 ECMAScript의 차이

---

한줄로 정리해보자면, ES는 표준이고 JS는 그 표준의 구현이다.

 

좀 더 자세하게 말해보자면 JS는 ES의 하위 집합으로 핵심적인 부분은 ES가 맞지만 다른 몇 가지를 추가하였기 때문에 하위 집합이라고 표현한다. 이 답변에서 아주 좋은 예시를 적어두었다.

Languages such as ActionScript, JavaScript, JScript all use ECMAScript as its core. As a comparison, AS/JS/JScript are 3 different cars, but they all use the same engine... each of their exteriors is different though, and there have been several modifications done to each to make it unique.


ActionScript, JavaScript, JScript와 같은 언어는 모두 ECMAScript를 핵심으로 사용합니다.
비교해 볼 때 AS / JS / JScript는 3 개의 다른 차량이지만 모두 같은 엔진을 사용합니다. 각각의 외관은 다르지만 각각 고유하게 만들기 위해 몇 가지 수정 작업이 있었습니다.

3. ECMAScript 버전별 역사

---

위에 올렸던 이미지처럼 ES는 버전별로 점점 진화하여 현재에 다 달았다. 과거의 JS는 어땠고 현재는 어떻게 변했는지 알아보자. (여기에서 과거부터 현재까지 모든 버전별 역사와 변경된 점을 확인할 수 있다.)

3-1. ES 1 ~ 3

JS의 가장 기본이 되는 기능만 존재하던 버전 대이다. hoisting, prototype, scope 등이 그 예이며 대부분의 브라우저가 지원하는 사양이다. 만약 IE8을 크로스 브라우징 해야 한다면 ES3를 기준으로 코드를 작성해야 한다.

 

3-2. ES4

4 버전대를 준비하던 중 내부적으로 크게 2개의 의견으로 나뉘었는데, 바로 대규모로 매우 급변하는 사양(Adobe, Mozila, Google, Opera)과 점진적으로 업그레이드하는 사양(Microsoft, Yahoo)이었다. 결국 타협점을 찾아 ES3.1은 ES5가 되었고, ES4가 될 예정이었던 사양은 ES6에 반영되게 되었다. 이에 따라 ES4는 반려됐다.

이 회의와 관련된 내용은 여기서 찾아볼 수 있다.

 

또한 이 시기쯤에 JS를 활용해 웹 애플리케이션을 동적으로 제작 가능하게 되어 jQuery, Dojo, Prototype.js 및 Ajax가 만들어졌다.

 

3-3. ES5

ES5부터 추가된 모든 내용을 알고 싶다면 여기를 참고하면 된다.

 

요약하자면 JSON parse / serialization과 Array, Object등에 많은 prototype method가 추가되었고 strict 모드가 추가되었다. 여기서 가장 중요한 내용은 strict 모드인데, 기존에 너무 자유롭던 코드에서 일부 코드를 사용하지 못하게 막음과 동시에 더 많은 예외를 제공하여 프로그래머들이 더욱 안전한 코드를 작성할 수 있는 환경이 마련되었다.

 

3-4. ES6

ES6부터 추가된 모든 내용을 알고 싶다면 여기를 참고하면 된다.

 

반려된 ES4와 구별하기 위해 한동안 ECMAScript.next라고 불렸으나, ECMAScript.next가 성숙해짐에 따라 ES6로 명칭이 변경되어 배포되었다. 여기에서 각 환경별로 ES6로의 엔진 구성이 얼마나 진행됐는지 알 수 있다. 또한 IE 혐오가 발생하게 되기도 한다.

 

가장 큰 변화는 기존의 function-level scope가 아닌 block-level scope를 지원하는 let과 const가 추가되었고 함수에 기본 매개변수가 추가되었다. 물론 이 모든 것은 polyfill과 transpiler를 사용하면 지원 가능하다.

이 글을 작성할 때 읽은 감사한 자료들.

---

https://en.wikipedia.org/wiki/ECMAScript

ECMAScript - Wikipedia

https://stackoverflow.com/questions/4269150/what-is-ecmascript

What is ECMAScript?

http://www.benmvp.com/learning-es6-history-of-ecmascript/

History of ECMAScript - Ben Ilegbodu

http://www.incodom.kr/ECMAScript_5_%EC%A0%95%EC%9D%98

ECMAScript 5 정의

https://www.w3schools.com/js/js_versions.asp

JavaScript Versions

https://www.w3schools.com/js/js_es5.asp

ECMAScript 5

https://www.w3schools.com/js/js_es6.asp

ECMAScript 6