비실이의 개발 성장기

# 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 2016 (ES7) 추가 된 사항

• 제곱연산자

• Array.prototype.includes

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

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

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

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

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

# [번외] 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

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