ES6가 뭘까? ES7이랑 뭐가 다를까?

한줄 요약을 하자면,
ES6는 ECMA라는 국제 기구에서 만든 표준문서인 ECMAScript(=ES)의 6번째 개정판 문서에 있는 표준 스펙을 말합니다. 6번째 버전이 2015년에 나왔기 때문에 ES2015라고도 합니다.
따라서, 7번째 버전인 ES7는 2016년에 나왔기 때문에 ES2016이라고 부릅니다.

• ECMA 인터내셔널은 정보와 통신 시스템에 대한 표준을 제정하는 국제적 표준화 기구입니다.

👉 ESMAScript는 무엇이고, 왜 만들어졌을까?

JavaScript는 1995년 (현재는 파이어폭스로 승계된) 넷스케이프(Netscape) 웹페이지에 동적인 요소를 구현하기 위해서 발명되었습니다. 그 후 넷스케이브 뿐만 아니라 다른 웹 브라우저들까지 이를 탑재하기 시작했고, 다양한 웹 브라우저들에서 JavaScript가 공통되게 잘 작동되기 위해서는 표준 규격이 필요성이 커졌습니다. 이 같은 이유로 ECMA 국제 기구에서는 'ECMAScript standard'라는 스크립트 표준을 만들었습니다.

즉,ECMAScript는 ECMA 인터내셔널에 의해 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어입니다. (= ECMAScript 사양 (ECMAScript specification))

ECMAScript에 포함되는 항목에는 다음과 같은 예가 있습니다.

• 언어 구문 (구문 분석 규칙, 키워드, 흐름 제어, 객체 리터럴 초기화 등)
• 오류 처리 방법 (throw, try...catch, 사용자 정의 Error 유형 등)
• 자료형 (불리언, 숫자, 문자열, 함수, 객체, ...)
• 전역 객체. 브라우저에서 전역 객체는 window 객체지만, ECMAScript는 브라우저에 국한되지 않는 API(parseInt, parseFloat, decodeURI, encodeURI 등)만 정의합니다.
• 프로토타입 기반 상속 구조
• 내장 객체 및 함수 (JSON, Math, Array.prototype 메서드, Object 내성검사 메서드 등)
• 엄격 모드

• ECMA-262는 표준의 이름이지만, ECMAScript는 ECMA-262에서 정의된 하나의 사양을 의미합니다. ECMAScript는 스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공합니다.

• JavaScript와 ECMAScript가 비슷하다는 소리가 있는 이유는 JavaScript가 ECMAScript이라는 1개의 코어와 BOM(Browser Object Model) 와 DOM(Document Object Model)라는 2개의 모델로 이루어져 있기 때문입니다.

👇 글을 쓰는데 참고한 블로그 중에서 가장 이해에 도움이 된 비유

• 우리가 쓰는 언어: 국어 - javascript
• 우리가 일상생활에서 쓰는 언어의 기준이 되는 국어: 표준어 - ECMA-262
• 표준어를 관리하는 곳: 국립국어원 - ECMA 인터내셔널
• 국립국어원이 정한 표준어의 여러가지 규칙들(발음 또는 맞춤법) - ECMAScript

(ECMAScript는 여기에 약 760장의 문서로 작성되어 있다)

(math 라이브러리의 ECMAScript specification 문서의 일부)

ES6(ES2015)

TypeScript의 기반이 되는, 클래스 문법과 모듈 기능 추가, IE9 부터 지원

다음과 같은 문제점들이 사라짐

• 호이스팅이 사라진 것 같은 효과
• 함수 단위 스코프에서 블록 단위 스코프로 변경
• this를 동적으로 바인딩하지 않는 화살표 함수
• 모듈화 지원
• 콜백 지옥에서 구원해줄 Promise
• Default, Rest 파라미터
• 해체 할당, Spread 연산자
• 템플릿 리터럴

브라우저(특히 MS 계열)에서 지원해주지 않는 경우가 많아 바벨(Babel)이라는 트랜스파일러를 써야한다.

(이 바벨은 웹브라우저가 아닌 Node.js 위에서 돌아가고… Node.js를 설치하려면 NPM을 알아야하고… 또 모듈화를 사용하려면 웹팩(WebPack)같은 모듈 번들러를 알아야하고…)

ES7(ES2016)

• 제곱 연산자(**) 등장
• Array.includes 배열에 해당 요소가 존재하는지 확인하는 메소드 등장

ES8 (ES2017)

ES2017에서는 Promise 급의 중대한 변화인 async, await등이 발표됨

• async
• await
• 객체의 좀더 심화된 메소드가 등장
  -Object.keys()에 대응되는 메소드인 Object.values()
  -Object.keys()와 Object.values()를 합쳐 놓은 Object.entries() 등
• 문자열 단순 편의기능이 추가:
  -문자열 앞부분에 공백을 넣어 자리수를 맞춰주는 String.padStart()
  -문자열 뒷부분에 공백을 넣어 자리수를 맞춰주는 String.padEnd()
  -매개변수 마지막에 콤마를 붙이는 것 허용

Refs

ECMAScript, ES6

JavaScript와 ECMAScript는 무슨 차이점이 있을까?

ES6?! ES2015?! ECMAScript란 도대체 무엇인가?

JavaScript 기술 개요