일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 |
- javascript destructuring
- DOM API
- javascript class method bind
- 자료구조
- web server vs was
- parcel
- Browser API
- task queue
- js promise
- javascript spread
- #javascript #자바스크립트 완벽가이드 #자바스크립트 코뿔소
- javascript eventloop
- 선형리스트
- javascript arrow function
- react class method bind
- react lifecycle
- es6 destructuring
- es6 module
- es6 promise
- es7 async await
- 순차리스트
- client side rendering
- chrome extension development
- JavaScript
- es6 symbol
- js arrow function
- react event bind
- 크롬 익스텐션 개발
- server side rendering
- react
- Today
- 308
- Total
- 412,659
비실이의 개발 성장기
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 표준에 대한 피드백 채널은 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
# 잘못 된 내용은 댓글 부탁드립니다.
'프론트엔드 > 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 |
- Tag
- ECMAScript, ECMAScript2015, es6