JS: ECMAScript 2015 Features

By Xah Lee. Date: . Last updated: .

This page is a quick overview of features new in ECMAScript 2015 (aka ES6).

let

now you can have block-level variables, using let.

// using let inside curly brackets
{
    var x = 3;
    {
        let x = 4;
        console.log(x); // 4
    }
    console.log(x); // 3
}

〔►see JS: let Declaration

const

const is for declaring constants. It's similar to let, except you can't change its value once set.

〔►see JS: const Declaration

Arrow Function

(x => { return x + 1; })

is similar to

function (x) { return x + 1; }

but no this binding, and no argument object.

〔►see JS: Arrow Function

Function Argument Default Values

// function with default arg values
function f(x=4, y=2) {
    return x + y;
}

console.log(
    f()
); // 6

〔►see JS: Function Argument Default Value

Rest Parameters

// function with any number of parameters
// rest parameter.
function ff (a, b, ...c)
{
return c; // c is a array
};

console.log(
    ff(1,2,3,4)
); // [3, 4]

〔►see JS: Function Rest Parameters

Destructuring Assignment

// destructuring assignment

var [x, y, z] = [3,4,6];

var {c, b} = {a:1, b:2, c:3};

〔►see JS: Destructuring Assignment

Object Literal Expression, Computed Property Keys

new syntax for object literal to have computed property key by an expression.

var obj = {[expression]:value}

// es2015 computed property syntax. use [] around the property key
var obj = {["a" + "b"]: 4 };
console.log(obj.ab); // 4

〔►see JS: ES2015 Object Literal Expression Extensions

Object Literal Expression, Method Definition Shorthand

new syntax shorthand for defining methods in object literal expression.

var obj = { method_name() { … }, … };

〔►see JS: ES2015 Object Literal Expression Extensions

__proto__

allow the use of the property key __proto__ in object literal expression. Like this:

var my_obj = { __proto__: parent_obj, property_1 : value_1, property_2 : value_2, … };
// demo use of __proto__

var x = {a:3};

var obj =
{
    __proto__: x,
    b : 4
};

console.log(
    Object.getPrototypeOf(obj) === x
); // true

〔►see JS: Find Object's Prototype

ECMAScript 2015 §Annex B#sec-__proto__-property-names-in-object-initializers

Template String

var x = 2;
var myText = `number is ${x} and 2+3 is ${2+3}.`;
console.log(
myText
); // "number is 2 and 2+3 is 5."

before ES2015, you have to do string join. "value is" + x

〔►see JS: Template String

〔►see JS: Tagged Template String

Spread Operator

The spread operator is 3 dots followed by a array, like this: ...myArray. What it does is effectively remove the bracket of the array.

// example of using the spread operator

var aa = [3,4];
var bb = [1,2, ...aa, 5,6]; // insert aa in middle, without nesting

console.log(
    bb
); // [ 1, 2, 3, 4, 5, 6 ]

〔►see JS: Spread Operator

for-of Loop

for-of loop lets you properly loop thru an array, or new datatypes such as set and map, or any iterable object. Iterable object is a new concept, created just for for-of loops.

// for-of loop on array

for (let x of [3,4,5]) {
    console.log(x);
} // prints 3 4 5

〔►see JS: for-of Loop

Set Object

Set object lets you have a data structure of set. That is, a collection of unique values.

// create a set, add value to it
var s = new Set();
s.add ("6");
s.add ("5");
s.add ("6");
console.log(s) // Set { '5', '6' }

〔►see JS: the Set Object Tutorial

Map Object

Map object lets you have a data structure of key value pairs. Map object is similar to Python's dictionary or Ruby's hash. Similar to JavaScript Object, but now designed to be used as a data structure.

const m = new Map();

// add new item
m.set(1, "n1");
m.set(2, "n2");

console.log(m) // Map { 1 => 'n1', 2 => 'n2' }

〔►see JS: the Map Object Tutorial

Reflect

The Reflect object is used as namespace to host a group of static functions. (like the Math object.) Reflect methods typically duplicate operator behavior in function form, or provides a more strict/improved version of existing methods.

〔►see JS: Reflect Object

Class

class is a new keyword that lets you conveniently define object and its prototype.

New keywords are: class, constructor, static, extends, super.

〔►see JS: Class Tutorial

regex

New regex flag "u". For unicode. Treat string as sequence of unicode characters.

New regex flag "y". For “sticky”. This means next regex match call will start with lastIndex.

〔►see JS: RegExp Syntax

New value properties.

New function properties.

〔►see JS: RegExp.prototype

New Array Properties

new array constructor properties

new array prototype properties

  1. Array.prototype.copyWithin 〔►see JS: Array.prototype.copyWithin
  2. Array.prototype.fill 〔►see JS: Array.prototype.fill
  3. Array.prototype.find 〔►see JS: Array.prototype.find
  4. Array.prototype.findIndex 〔►see JS: Array.prototype.findIndex
  5. Array.prototype.entries ( )
  6. Array.prototype.keys
  7. Array.prototype.values
  8. Array.prototype [ Symbol.iterator ]
  9. Array.prototype [ Symbol.unscopables ]

〔►see JS: Array.prototype

New String Properties

static methods

string methods

〔►see JS: String.prototype

New Object Methods

New Function Properties

function property "name"

New Number Properties

  1. JS: Number.isFinite
  2. JS: Number.isInteger
  3. JS: Number.isNaN
  4. JS: Number.isSafeInteger
  5. JS: Number.parseFloat
  6. JS: Number.parseInt

〔►see JS: Number Object

new Math methods

  1. Math [ Symbol.toStringTag ]
  2. Math.sign( x )
  3. Math.fround ( x )
  4. Math.trunc ( x )
  5. Math.cbrt ( x )
  6. Math.expm1 ( x )
  7. Math.log1p ( x )
  8. Math.log10 ( x )
  9. Math.log2 ( x )
  10. Math.hypot ( value1 , value2 , …values )
  11. Math.sinh( x )
  12. Math.cosh ( x )
  13. Math.tanh ( x )
  14. Math.asinh( x )
  15. Math.acosh( x )
  16. Math.atanh( x )
  17. Math.clz32 ( x )
  18. Math.imul ( x, y )

〔►see JS: Math Object



THE FOLLOWING IS WORK IN PROGRESS.

Syntax

html-like comments

Lines begin like <!-- is a line comment.

// line starting with <!-- ignored

console.log ( 
3
<!-- 4
   <!-- 5
 );

// prints 3

Note: this is a single line comment. There is no ending -->

console.log ( 
 3,
 <!--
 4 -->

 );

//  4 -->
//  ^
// ReferenceError: Invalid left-hand side expression in postfix operation

ECMAScript 2015 §Annex B#sec-html-like-comments

block-level function declaration

// es2015 block-level function declaration

function f () {
    function g (x) { return x + 1; }
    return g(1);
}

console.log(f()); // 2

Promise

ECMAScript 2015 §Control Abstraction Objects#sec-promise-constructor

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

WeakSet

ECMAScript 2015 §Keyed Collection#sec-weakset-objects

WeakMap

ECMAScript 2015 §Keyed Collection#sec-weakmap-constructor



Subclassing


Misc


Annex b


ArrayBuffer

ECMAScript 2015 §Structured Data#sec-arraybuffer-objects

dataview object

ECMAScript 2015 §Structured Data#sec-dataview-objects

module. keyword 「import」, 「export」

ECMAScript 2015 §ECMAScript Language: Scripts and Modules#sec-modules

tail call optimisation (recursion)

ECMAScript 2015 §ECMAScript Language: Functions and Classes#sec-tail-position-calls

Browser Support

See http://kangax.github.io/compat-table/es6/


Reference

https://hacks.mozilla.org/category/es6-in-depth/

https://leanpub.com/exploring-es6/read

JavaScript compiler. Babel. http://babeljs.io/

JavaScript compiler. Traceur. https://github.com/google/traceur-compiler

Like what you read? Buy JavaScript in Depth