비실이의 개발 성장기

ECMAScript2015(ES6) 알아보기 본문

프론트엔드/javascript

ECMAScript2015(ES6) 알아보기

DubbingLee 2020. 5. 23. 11:42

# ECMAScript(ES) 란?

  • ECMA 인터내셔널(정보와 통신 시스템을 위한 국제적 표준화 기구) 의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어

  • ECMAScript 하면 javascript 를 가장 먼저 떠올리지만, 액션스크립트와 J스크립트등 다른 스크립트도 포함됩니다. 

  • 2020년 05월 기준으로 ECMA-262 는 총 10개의 Edition 표준이 있습니다.

  • 우리가 흔히 알고있는 ECMAScript 2015 는 6번째 Edition 이며, 그로인해 ES6 라고 불리기도 합니다. (ECMAScript 2015 = ES6 = ES2015)

 

# ECMAScript 표준이 나오기 전은 어떠했나?

  • 브라우저는 크게 넷스케이프의 넷스케이프 네비게이터 2.0 진영과 MS 의 Internet Explorer 진영으로 나뉘었습니다.

  • 넷스케이프는 javascript 를, MS 는 Jscript 를 지원했는데 이는 서로 호환되지 않았습니다.

  • 그러다, 넷스케이프가 표준화를 위해 javascript 기술 규격을 ECMA 재단에 제출하였고, 1996년 11월 부터 ECMA-262 이름으로 시작됐습니다.

  • ECMA-262 초판은 1997년 6월에 채택됐습니다. 

 

 

# ECMAScript 5 (ES5) 추가 된 사항

  • ’strict mode’ 추가

 

 

# ECMAScript 2015 (ES6) 추가 된 사항

  • 대표적인 문법으로 let, const, Arrow function, Promise, Generator function, Map, Set, Symbol, Spread 연산자, Destructuring 할당, Default parameter, Rest parameter 가 있습니다.

  • 나머지 추가 된 사항은 아래 MDN 에서 확인 가능합니다.

 

ECMAScript 2015 support in Mozilla

ECMAScript 표준에 대한 피드백 채널은 es-discuss을 이용하시면 됩니다.

developer.mozilla.org

 

 

# ECMAScript 2016 (ES7) 추가 된 사항

  • 제곱연산자

  • Array.prototype.includes

 

 

# ECMAScript 개발 시 확인해야 할 사항

  • 일부 구형 브라우저의 JS 엔진은 ECMAScript 최신버전 문법을 해석하지 못합니다.

  • 구형 브라우저 JS 엔진이 해석 가능하도록 낮은 버전의 ECMAScript 문법으로 변환해줘야 하는데, 이를 JS compiler(transpiler) 를 사용해 변환할 수 있습니다.

  • 대표적인 JS compiler(transpiler) 로 Babel, traceur 가 있습니다.

  • caniuse 사이트를 통해 사용하려는 문법이 어느 브라우저에서 지원/미지원 하는지 알 수 있습니다.

 

Can I use... Support tables for HTML5, CSS3, etc

About "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. The site was built and is maintained by Alexis Deveria, with occasional updates provided by the web development commu

caniuse.com

 

 

# [번외] JS transpiling 과 polyfill 의 차이점

  • JS transpiling 목적은 JS 엔진이 해당 문법을 지원하지 하지 않아 해석 불가한 코드를 해석 가능한 코드로 변환하는 것 (새로운 키워드(예약어) 를 변환하는 것)

    • 예) IE11 브라우저의 JS 엔진은 Arrow function 문법을 해석하지 못하나, Babel 로 transpiling 을 하면 사용가능 

    • 예2) ES8 에 추가 된 async & await 문법을 사용하고자 Babel preset 2017 을 추가해 transpiling 하기

 

  • polyfill 은 현재 사용 중인 ECMAScript 버전에서 지원하지 않는 API 함수를 사용가능 하도록 코드를 추가하는 것 (새로운 API 함수 코드를 추가하는 것)

    • 예) ES7 에 추가 된 Array.prototype.includes 메소드를 사용하기 위해 polyfill 적용

    • 예2) ES6 에 추가 된 Promise 객체를 IE 브라우저에서 사용하고자 polyfill 적용

 

 

# 참고 문서

  • ECMAScript - wikipedia

  • MDN web docs - ECMAScript 2015

 

ECMA스크립트 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. ECMA스크립트(ECMAScript, 또는 ES[1])는 Ecma 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어이다. 자바스크립트를 표준화하기 위해 만�

ko.wikipedia.org

 

ECMAScript 2015 support in Mozilla

ECMAScript 표준에 대한 피드백 채널은 es-discuss을 이용하시면 됩니다.

developer.mozilla.org

 

 

 

 

# 잘못 된 내용은 댓글 부탁드립니다.

0 Comments
댓글쓰기 폼