JS: ECMAScript 2015 Features

By Xah Lee. Date: . Last updated: .

ECMAScript 2015 (aka ES6) is a massive revision of the JavaScript language.

Over 10 major features are added to the language, effectively making JavaScript a new language.

Here's a quick overview of new features.

let

let is like var, but with a clean block-level scope.

// 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.

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.

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:

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: Get/Set 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]

Interface, Iterable, Iterator, Generator

  1. Interface
  2. Iterable
  3. Iterator
  4. Iterator Prototype
  5. for-of Loop
  6. Spread Operator
  7. Generator
  8. Generator Function

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 is a namespace for math functions.) Reflect methods typically duplicate operator behavior in function form, or provides a more strict/improved version of existing methods.

[see JS: Reflect]

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]

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
  2. Array.prototype.fill
  3. Array.prototype.find
  4. Array.prototype.findIndex
  5. Array.prototype.entries
  6. Array.prototype.keys
  7. Array.prototype.values
  8. Array.prototype [ Symbol.iterator ] (same as Array.prototype.values)
  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]

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

Module, Keyword “import”, “export”

JS: Import/Export

Unicode Escape Syntax

Now you can escape unicode by \u{4_to_6_hex_digits}

[see JS: Unicode Escape Sequence]


THE FOLLOWING IS WORK IN PROGRESS.

Syntax

Promise

JS: Promise Tutorial



Subclassing


Misc


Annex b


ArrayBuffer

ECMAScript 2015 §Structured Data#sec-arraybuffer-objects

dataview object

ECMAScript 2015 §Structured Data#sec-dataview-objects

tail call optimisation (recursion)

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

WeakSet

ECMAScript 2015 §Keyed Collection#sec-weakset-objects

WeakMap

ECMAScript 2015 §Keyed Collection#sec-weakmap-constructor


Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS Basics
  4. JS in Depth
  5. JS Reference
  6. DOM
  7. SVG
  8. JS Misc