이 문서는 지속적으로 업데이트 될 예정입니다.

2015년 6월 ES6 최종 스팩이 승인되었습니다.
크롬과 파이어폭스에서는 쉽게 ES6 을 사용할 수 있지만 다른 브라우저는 babel, traceur, es6-shim등을 이용해야 합니다. (추후 업데이트)

변수 선언 var vs let

ES6 에서 사용하는 변수 선언. ES5 에서 사용하던 var 외에 const나 let

var a = 5;
var b = 10;

if (a === 5) {
  let a = 4; // The scope is inside the if-block
  var b = 1; // The scope is inside the function

  console.log(a);  // 4
  console.log(b);  // 1
}

console.log(a); // 5
console.log(b); // 1

module import

// ES5
var React = require('react');
var Router = require('react-router');

var Route = Router.Route;
var DefaultRoute = Router.DefaultRoute;
var NotFoundRoute = Router.NotFoundRoute;

// ES6
import React from 'react';
import {Route, DefaultRoute, NotFoundRoute} from 'react-router';

모듈에 대한 자세한 이야기는 (ECMAScript 6 modules: the final syntax)[http://www.2ality.com/2014/09/es6-modules-final.html] 에서 확인해 보자.

클래스

// ES5
function Box(length, width) {
  this.length = length;
  this.width = width;
}

Box.prototype.calculateArea = function() {
  return this.length * this.width;
}

var box = new Box(2, 2);

box.calculateArea(); // 4


// ES6
class Box {
  constructor(length, width) {
    this.length = length;
    this.width = width;
  }
  calculateArea() {
    return this.length * this.width;
  }
}

let box = new Box(2, 2);

box.calculateArea(); // 4

익숙한 클래스 형태.

클래스 상속(확장)

// ES5
var MyComponent = React.createClass({
  // React 컴포넌트 메소드를 사용할 수 있음
  // componentDidMount, render 등등
})


// ES6
class MyComponent extends React.Component {
  // React 컴포넌트 메소드를 사용할 수 있음
  // componentDidMount, render 등등
}

또한 익숙한 클래스 상속 형태.

Map ( Fat arrow function )

// ES6
[1, 2, 3].map(n => n * 2); // [2, 4, 6]

// ES5
[1, 2, 3].map(function(n) { return n * 2; }); // [2, 4, 6]

백엔드 언어에서 사용하던 것과 유사하네요.