#2 차세대 ECMAScript 2015

Modern JS & ES6

ECMAScript는 표준화 단체인 ECMA International에 의해 표준화된 JavaScript이다.

1997 년 초판에서 개정을 거듭하여 현재 최신 버전은 2015년 6월 채택된 6번째 ECMAScript 2015이며 판수로 ECMAScript6(ES6)라고 불리기도 한다.

ES2015에서 새롭게 제공되는 사양은 다음과 같다.

class명령 도입으로 Java나 C#과 같은 클래스 정의가 가능해짐

import/export명령에 의한 소스코드 모듈화를 지원함

함수 구문의 개선(애로우 함수 인수의 기본값, 가변 인자 등)

let/const명령에 의한 블록 범위 도입

for... of명령에 의한 값 열거 

반복자(Iterator)/제네레이터에 의한 열거 가능한 객체 조작이 가능해짐

내장 객체의 확대 (Promise, Map/Set, Proxy 등)

String/Number/Array와 같은 기존 내장 객체도 기능 확장

다양한 새로운 기능 중에서 특히 class 명령의 도입이 가장 획기적이라고 할 수 있다. 이에 따라 지금까지 JavaScript에서 불편해하던 객 제지 향 프로그램이 직관적으로 할 수 있게 되었다. 그러나, ES2015는 큰 변화가 있어, 지금까지 익숙하게 사용해온 JavaScript코드는 크게 변했다. 또한 원래 모든 브라우저가 ES2015에 대응하고 있는 것도 아니다. 적어도 현재 대부분의 브라우저가 지원하는 ES5이전 문법도 배우면서 ES2015의 새 문법을 이해하는 것이 중요하다. 이전 문법을 미래에 이용하지 않는 경우에도 기존 소스코드를 분석하는데 지식을 낭비하는 것은 아니다. 이 강좌에서도 ES2015 기능은 ES2015라고 표시하고 크게 변화한 객체지향 구문은 분할해서 별도로 설명할 계획이다.

현재 브라우저 대응 상황

ECMAScript는 어디까지나 언어 사양의 동의에 지나지 않는다. 주요 브라우저가 현재까지 지원 호환성을 확인하려면 ECMAScript 6 compatibility table을 참고하자.

Chrome, Firefox, Microsoft Edga 등의 브라우저가 90% 이상의 대응하고 있지만 Internet Explorer 11은 20% 미만, Safari 5% 정도로 대응하고 있어 브라우저마다 차이가 발생하고 있다.

이에 따라 ES2015를 이용하기 위해 트랜스 컴파일러가 필요하기 때문에 이 강좌에서 Babel 트랜스 컴파일러를 이용하고자 한다. 여기서 말하는 트랜스 컴파일러는 ES2015 코드를 기존 ES5사양 코드로 변환하기 위한 도구를 말한다.