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/


Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth