JavaScript: 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. [see let Declaration]

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

const

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

[see 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 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 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 Function Rest Parameters]

Destructuring Assignment

// destructuring assignment
var [x, y, z] = [3,4,6];
var {c, b} = {a:1, b:2, c:3};

[see 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 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 ES2015 Object Literal Expression Extensions]

__proto__

Allow the use of property key __proto__ to get/set parent.

[see JS: Object.prototype.__proto__]

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 Template String]

[see Tagged Template String]

Spread Operator

The spread operator is 3 dots followed by a array, like this: ...arrayX. 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 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 for-of Loop]

Interface, Iterable, Iterator, Generator

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 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 the Map Object Tutorial]

Reflect

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

[see 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 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 RegExp Flags]

New value properties.

New function properties.

[see RegExp.prototype]

New Array Properties

new array constructor properties

new array prototype properties

[see Array.prototype]

New String Properties

static methods

string methods

[see String.prototype]

New Object Methods

New Function Properties

function property "name"

New Number Properties

[see Number Object]

new Math methods

[see 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

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”

Import/Export

Unicode Escape Syntax

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

[see Unicode Escape Sequence]


THE FOLLOWING IS WORK IN PROGRESS.

Syntax

Promise

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


JS in Depth
XAH  BUY NOW

JS in Depth

JS Obj Ref

DOM


JS in Depth

Basic Syntax

Value Types

Variable

String

Function

Property

Object and Inheritance

Array

Constructor/Class

Iterable 🌟

Misc