ES6에 새롭게 추가된 자바스크립트 문법 톺아보기 #1 ECMAScript, ES6 그리고 Babel

ES6에 새롭게 추가된 자바스크립트 문법 톺아보기 #1

ES (ECMAScript)

ECMAScript(줄여서 ES)는 ECMA International이라는 정보화 관련 국제 표준화 기구에서 정의한 자바스크립트 언어에 대한 표준화 명세입니다. ECMA International 이 매년 자바스크립트의 신규 문법이나 기능 명세(Spec)를 추가하면 구글, 마이크로소프트, 모질라 등의 브라우저 제조사에서 자사의 자바스크립트 엔진에 새로운 기능을 추가해서 배포합니다.

 

ECMA Internation 이 배포하는 자바스크립트 언어 명세

 

넷스케이프에서 최초로 자바스크립트를 자사의 브라우저에 탑재한 것이 1996년 이었고 ECMA Internaional 은 이듬해인 1997년 자바스크립트 표준화를 위해 ECMAScript 초판을 발행합니다. 2015년에 6판을 발행한 이후로는 매년 개정된 명세를 꾸준히 발행하고 있습니다. 가장 최근인 2020년 6월 ECMAScript의 제11판이 발행되었습니다.

 

1997년 최초로 발행된 ECMAScript (ES1)

 

2020년 6월에 발행된 ECMAScript 2020 (제11판)

자바스크립트 엔진마다 지원하는 ES 버전이 다르다

ECMA는 명세만 만들면 되니 매년 새로운 기능을 쉽게쉽게 찍어냅니다. 그러나 자바스크립트 엔진 제조사는 개발자를 갈아서 이 명세를 한 땀 한 땀 구현해야 하기 때문에 ECMA의 표준을 따라가는 속도가 제조사별로 제각각입니다. 브라우저의 제조사와 버전별로 지원하는 ES 버전이 다 다른 상황이 벌어진 것이지요. 

 

ECMAScript 2016+ 호환성 테이블: IE와 Edge 호환성은 낙제수준이다. (kangax.github.io)

2020년 대한민국 브라우저 시장 점유율 (Statcounter)

자바스크립트 엔진 3 대장

• V8 : 구글이 개발한 오픈소스 자바스크립트 엔진입니다. 구글 크롬에 탑재되어 있습니다.
• SpiderMonkey : 넷스케이프에서 개발한 최초의 자바스크립트 엔진이며 현재는 파이어폭스가 지원하고 있습니다.
• 웹킷 : 애플이 사파리 브라우저를 위해 개발했습니다. 애플의 macOS 와 iOS 상의 많은 앱에서 사용되고 있습니다.

ES6 (ECMAScript 2015)

ES6는 ECMA가 6번째로 발표한 자바스크립트 표준 명세입니다. 그리고 2015년에 발표되었기 때문에 ECMAScript 2015라고 부르기도 합니다. ES6는 자바스크립트 문법에 현대적인 많은 변화가 추가되어 ECMA가 발표한 자바스크립트 명세 중 가장 유명하고 성공한 버전입니다. 1996년에 처음 만들어진 자바스크립트라는 언어가 오늘날 세상을 집어삼키는 데 있어서 ES6의 영향력은 부정할 수 없습니다.

Babel 

브라우저의 자바스크립트 엔진마다 지원하는 ES 버전이 다르다고 말씀드렸습니다. 특히나 마이크로소프트의 Internet Explorer는 진도가 느리다 못해 이제는 아예 포기해버려서 ES5에 멈춰버렸습니다. 브라우저 호환성(Cross Browser)을 고려한다면 울며 겨자 먹기로 ES5 문법으로 개발할 수밖에 없게 된 것이죠. 물론 바벨(Babel)이 세상에 나오기 전까지 이야기입니다.

Internet Explorer 는 ES6를 지원하지 않습니다.

 

바벨(Babel)은 ES6로 작성된 Javascript 소스코드를 Internet Explorer도 이해할 수 있도록 ES5 기반의 문법으로 자동으로 변환해주는 일종의 번역기입니다. Babel 덕분에 전 세계의 개발자들은 ES6 문법이 제공하는 언어의 풍요로움은 그대로 누리면서 브라우저 호환성 문제도 해결할 수 있었던 것이죠.

 

Babel은 자바스크립트를 자바스크립트로 컴파일해준다. (Babel)

 

ES6 문법을 사용한 자바스크립트 코드를 ES5문법으로 번역한다. (Babel)

ES6에 추가된 기능들

ES6에 추가된 새로운 기능들은 자바스크립트라는 언어를 ES6 전과 후로 아예 구분할 수 있을 정도로 많은 변화를 제공합니다. 화살표 함수와 새로운 스코프의 사용, 새로운 문자열 보간법과 리터럴 표현식들, 구조 해제 할당과 새로운 Class 표현식, 자바스크립트 모듈화와 비동기 프로세싱을 위한 프라미스의 지원까지... 실로 엄청난 변화를 담고 있습니다.

 

이번 글에서는 ES6가 무엇인지를 다루어 보았습니다. 이어질 다음 포스팅부터는 ES6에 추가된 기능들을 제가 공부하고 이해하는 선에서 하나하나 정리해 보도록 하겠습니다.

 

공부는 끝이 없다 (Pixabay)