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 is 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 jj = { ["a" + "b"]: 4 };
console.log(jj.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() {body}, etc };

[see ES2015 Object Literal Expression Extensions]

__proto__

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

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

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

BUY
ΣJS
JavaScript in Depth