ECMAScript2015(ES6) 알아보기

# 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 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

 

 

# [번외] 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스크립트 - 위키백과, 우리 모두의 백과사전

ECMAScript 2015 support in Mozilla

 

 

 

 

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

저작자표시비영리동일조건

'프론트엔드 > javascript' 카테고리의 다른 글

javascript async & await 알아보기  (0)	2020.05.30
javascript Promise 알아보기  (0)	2020.05.29
ECMAScript2015(ES6) 알아보기  (0)	2020.05.23
[js Q&A] ES6 class 에서 method bind 를 해야하는 이유 답변  (0)	2020.05.11
[js Q&A] var 와 let 차이점 답변  (0)	2020.02.11
호이스팅(Hoisting) 정리  (0)	2019.03.03