JavaScript: 2015 Features

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

• Interface
• Iterable
• Iterator
• Iterator Prototype
• for-of Loop
• Spread Operator
• Generator
• 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 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.

• RegExp.prototype.flags
• RegExp.prototype.sticky
• RegExp.prototype.unicode

New function properties.

• RegExp.prototype [ Symbol.match ](str)
• RegExp.prototype [ Symbol.replace ](str, replace)
• RegExp.prototype [ Symbol.search ](str)
• RegExp.prototype [ Symbol.split ](str, limit)

[see RegExp.prototype]

New Array Properties

new array constructor properties

• Array.from
• Array.of

new array prototype properties

• Array.prototype.copyWithin
• Array.prototype.fill
• Array.prototype.find
• Array.prototype.findIndex
• Array.prototype.entries
• Array.prototype.keys
• Array.prototype.values
• Array.prototype[Symbol.iterator] (same as Array.prototype.values)
• Array.prototype [ Symbol.unscopables ]

[see Array.prototype]

New String Properties

static methods

• String.fromCodePoint
• String.raw

string methods

• String.prototype.includes
• String.prototype.startsWith
• String.prototype.endsWith

• String.prototype.codePointAt
• String.prototype.repeat

• String.prototype.localeCompare
• String.prototype.normalize
• String.prototype[Symbol.iterator]

[see String.prototype]

New Object Methods

• Object.assign
• Object.getOwnPropertySymbols
• Object.setPrototypeOf

New Function Properties

• Function.prototype[Symbol.hasInstance]

function property "name"

New Number Properties

• Number.isFinite
• Number.isInteger
• Number.isNaN
• Number.isSafeInteger
• Number.parseFloat
• Number.parseInt

• Number.EPSILON
• Number.MIN_SAFE_INTEGER
• Number.MAX_SAFE_INTEGER

[see Number Object]

new Math methods

• Math [ Symbol.toStringTag ]
• Math.sign
• Math.fround
• Math.trunc
• Math.cbrt
• Math.expm1
• Math.log1p
• Math.log10
• Math.log2
• Math.hypot
• Math.sinh
• Math.cosh
• Math.tanh
• Math.asinh
• Math.acosh
• Math.atanh
• Math.clz32
• Math.imul

[see Math]

html-like comments

• HTML-Like Comment

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

• octal and binary literals
• new.target

Promise

Promise Tutorial

• String static methods
• String.prototype methods
• RegExp.prototype properties

Subclassing

• Array is subclassable
• RegExp is subclassable
• Function is subclassable
• Promise is subclassable
• miscellaneous subclassables

Misc

• prototype of bound functions
• Object static methods accept primitives
• own property order
• miscellaneous

Annex b

• Object.prototype.__proto__
• hoisted block-level function declaration
• String.prototype HTML methods
• RegExp.prototype.compile

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