ECMAScript 6

What is ECMAScript?

ECMAScript is the specification and language standard for JavaScript. It is formally known as EMCA-262. It is defined by ECMA International and more specifically the TC39 (Technical Committee) within ECMA. The committee consists of a representative from each browser vendor and other parties that have an interest in the specification.

The people on the committee are in charge of making new features, additions, and also standardizing the next version of the language specification.

Editions	Release Year
ECMAScript 1	1991
ECMAScript 2	1998
ECMAScript 3	1999
ECMAScript 4	(abandoned)
ECMAScript 5	2009
ECMAScript 6	(drafting)

Goals with ECMAScript 6

• Better support for complex applications, libraries, and code generators
• Avoid fragmentation around core language features (see more about ECMAScript 6 modules, promises, classes, etc.)
• Backward compatibility

Example Application

Mortgage Calculator Application by Christophe Coenraets
He uses ECMAScript 6, React, and Babel

(He actually teaches this as an ES6 tutorial online)

Code Examples

Constants

Instead of global constants that could only be created with the help of object properties, you can now easily declare constants with const that are block-scoped.

ES5

Object.defineProperty(typeof global === "object" ? global : window, "PI", {
    value:        3.141593,
    enumerable:   true,
    writable:     false,
    configurable: false
})
console.log(PI > 3.0); //true

ES6

const PI = 3.141593;
console.log(PI > 3.0); //true

const COLOR = {
    name: "Red",
    hexValue: "#FF0000"
};

Let

Instead of changing var (for backward compatibility), ES6 introduces let, which allows you to declare variables that are block-scoped.

ES5

for(var i = 0; i < 10; i++) {
   console.log(i);
}
console.log(i); //10

ES6

for(let i = 0; i < 10; i++) {
   console.log(i);
}
console.log(i) //error not defined

Creating objects from variables

The new syntax for creating objects from variables is simpler and quicker.

ES5

var firstName = "John";
var lastName = "Smith";
var email = "john@site.com";

var info = {
    firstName: firstName,
    lastName: lastName,
    email: email
}

ES6

var firstName = "John";
var lastName = "Smith";
var email = "john@site.com";

var fullName = {firstName, lastName, email};

Deconstructing

Deconstructing also has a new syntax that is quicker.

ES5

var colors = ["red", "green", "blue"];

var primary = colors[0];
var secondary = colors[1];
var tertiary = colors[2];

console.log(primary); //red
console.log(secondary); //green
console.log(tertiary);  //blue

ES6

var colors = ["red", "green", "blue"];

var [primary, secondary, tertiary] = colors;

console.log(primary); //red
console.log(secondary); //green
console.log(tertiary);  //blue

Arrow Functions

Arrows are the new shorthand for writing functions. Also, they share the same lexical this, so var self=this; is no longer necessary.

ES5

var reflect = function(value) {
	return value;
}

var times = function(num1, num2) {
	return num1 * num2;
}

console.log(times(2, 2)); //4

ES6

var reflect = value => value;

var times = (num1, num2) => num1 * num2;

console.log(times(2, 2)); //4

Default Parameters

Like a lot of other programming languages, defualt parameters are now supported.

ES5

function greeting(message, name) {
  name = name || 'Anonymous';
  return message + " " + name;
}

ES6

function greeting(message, name = 'Anonymous') {
  return message + " " + name;
}

Template Strings

In ES6, some syntactic sugar was added for constructing strings. Similar to string interpolation in Ruby, Python, etc.

ES5

var name = "John";
var time = "afternoon";

var greeting = 'Hello ' + name + ', how are you this ' + time + '?';
console.log(greeting); //Hello John, how are you this afternoon?

ES6

var name = "John";
var time = "afternoon";

var greeting = `Hello ${name}, how are you this ${time}?`;
console.log(greeting); //Hello John, how are you this afternoon?

Resources

• Popular Transpilers (BabelJS, Traceur)
• Christophe Coenraets ES6 tutorial
• Luke Hoban ES6 Features
• Sencha - Modern web apps with ES6
• es6-features.org
• ECMAScript on Wikipedia
• ECMA International
• ECMA International ES6 Draft
• CodeUtopia - article on ES6 features
• ES6 Compatibility Table