ECMAScript 6 new features compare ECMAScript 5

This is to compare the difference between ECMAScript 6 and ECMAScript 5

Use ECMAScript 6 you could reduced lots code , but the core problem is not all the browser support, to resolve this ECMAScript 6 need to use a compiler to transform your ECMAScript 6 code to ECMAScript 5 compatible code, in this purpose you could use Babel which allowed you run in current browsers

As follow is introduced some syntax that I used often in ES5 and it’s completely shorten in ES6

Before you should know the difference between var, let and const

compare to var, let will be more strict but it also changeable in the block scope,

const in the word means it is immutable, try in browser to defined between then you could find the error notice once you had declared with let and const, this could be more easy to debug since it’s more strict compare var

you could get more introduction here

1 Constants

ES5

//  only in ES5 through the help of object properties
//  and only in global context and not in a block scope
Object.defineProperty(typeof global === "object" ? global : window, "PI", {
    value:        3.141593,
    enumerable:   true,
    writable:     false,
    configurable: false
})
PI > 3.0;

ES6

const PI = 3.141593
PI > 3.0

In ES6 you could defined the constant, variables which cannot be re-assigned new content, but in case the content is an object, this means the object itself can still be altered: ( follow as resign value and it show error, but property in object can be added or removed or be changed) :

2  Scoping: Block-scoped Variables

without hoisting, so you do not need to declare variable to the top of the current script or the current function

ES5

var i, x, y;
for (i = 0; i < a.length; i++) {
    x = a[i];
    …
}
for (i = 0; i < b.length; i++) {
    y = b[i];
    …
}

var callbacks = [];
for (var i = 0; i <= 2; i++) {
    (function (i) {
        callbacks[i] = function() { return i * 2; };
    })(i);
}
callbacks[0]() === 0;
callbacks[1]() === 2;
callbacks[2]() === 4;

ES6

for (let i = 0; i < a.length; i++) {
    let x = a[i]
    …
}
for (let i = 0; i < b.length; i++) {
    let y = b[i]
    …
}

let callbacks = []
for (let i = 0; i <= 2; i++) {
    callbacks[i] = function () { return i * 2 }
}
callbacks[0]() === 0
callbacks[1]() === 2
callbacks[2]() === 4

3 Arrow Functions, which reduced funtion expressive closure syntax

ES5

odds  = evens.map(function (v) { return v + 1; });
pairs = evens.map(function (v) { return { even: v, odd: v + 1 }; });
nums  = evens.map(function (v, i) { return v + i; });

ES6

odds  = evens.map(v => v + 1)
pairs = evens.map(v => ({ even: v, odd: v + 1 }))
nums  = evens.map((v, i) => v + i)

and so does statement bodies:
ES5

nums.forEach(function (v) {
   if (v % 5 === 0)
       fives.push(v);
});

ES6

nums.forEach(v => {
   if (v % 5 === 0)
       fives.push(v)
})

Lexical this

ES5

//  variant 1
var self = this;
this.nums.forEach(function (v) {
    if (v % 5 === 0)
        self.fives.push(v);
});

//  variant 2
this.nums.forEach(function (v) {
    if (v % 5 === 0)
        this.fives.push(v);
}, this);

//  variant 3 (since ECMAScript 5.1 only)
this.nums.forEach(function (v) {
    if (v % 5 === 0)
        this.fives.push(v);
}.bind(this));

ES6

this.nums.forEach((v) => {
    if (v % 5 === 0)
        this.fives.push(v)
})

3 Extended Parameter Handling
ES6 could be like other functional programme lauguage, you could simple and intuitive default values in your function parameters:

ES5

function f (x, y, z) {
    if (y === undefined)
        y = 7;
    if (z === undefined)
        z = 42;
    return x + y + z;
};
f(1) === 50;

ES6

function f (x, y = 7, z = 42) {
    return x + y + z
}
f(1) === 50

And you could use aggregation of remaining arguments into single parameter of variadic functions, aggregation is quiet useful in Reactjs

ES5

function f (x, y) {
    var a = Array.prototype.slice.call(arguments, 2);
    return (x + y) * a.length;
};
f(1, 2, "hello", true, 7) === 9;

ES6

function f (x, y, ...a) {
    return (x + y) * a.length
}
f(1, 2, "hello", true, 7) === 9

Spreading of elements in an array or a string into both literal elements:

ES5

var params = [ "hello", true, 7 ];
var other = [ 1, 2 ].concat(params); // [ 1, 2, "hello", true, 7 ]

ES6

var params = [ "hello", true, 7 ]
var other = [ 1, 2, ...params ] // [ 1, 2, "hello", true, 7 ]

Template Literals
String Interpolation for output of defined variables, this is quiet useful once you had lots string to express, for example show error message string in JS:
instead of using “+ card.amount +” , used ${card.amount} is more readable
ES5

var customer = { name: "Foo" };
var card = { amount: 7, product: "Bar", unitprice: 42 };
var message = "Hello " + customer.name + ",\n" +
"want to buy " + card.amount + " " + card.product + " for\n" +
"a total of " + (card.amount * card.unitprice) + " bucks?";

ES6

var customer = { name: "Foo" }
var card = { amount: 7, product: "Bar", unitprice: 42 }
var message = `Hello ${customer.name},
want to buy ${card.amount} ${card.product} for
a total of ${card.amount * card.unitprice} bucks?`

Enhanced Object Properties

Property Shorthand:

ES5

var x = 0, y = 0;
obj = { x: x, y: y };

ES6

var x = 0, y = 0
obj = { x, y }

Computed Property Names

ES5

var obj = {
    foo: "bar"
};
obj[ "baz" + quux() ] = 42;

ES6

let obj = {
    foo: "bar",
    [ "baz" + quux() ]: 42
}

Class definition
like other OOP functional language, ES6 could be more intuitive, OOP-style and boilerplate-free classes, if you write php then you will love this point

ES5

var Shape = function (id, x, y) {
    this.id = id;
    this.move(x, y);
};
Shape.prototype.move = function (x, y) {
    this.x = x;
    this.y = y;
};

ES6

class Shape {
    constructor (id, x, y) {
        this.id = id
        this.move(x, y)
    }
    move (x, y) {
        this.x = x
        this.y = y
    }
}

New Built-In Methods

Object Property Assignment: assign()

this will return the value of assign target object
ES5

var dest = { quux: 0 };
var src1 = { foo: 1, bar: 2 };
var src2 = { foo: 3, baz: 4 };
Object.keys(src1).forEach(function(k) {
    dest[k] = src1[k];
});
Object.keys(src2).forEach(function(k) {
    dest[k] = src2[k];
});
dest.quux === 0;
dest.foo  === 3;
dest.bar  === 2;
dest.baz  === 4;

ES6

var dest = { quux: 0 }
var src1 = { foo: 1, bar: 2 }
var src2 = { foo: 3, baz: 4 }
Object.assign(dest, src1, src2)
dest.quux === 0
dest.foo  === 3
dest.bar  === 2
dest.baz  === 4

Array Element Finding
New function for finding an element in an array

ES5

[ 1, 3, 4, 2 ].filter(function (x) { return x > 3; })[0]; // 4
// no equivalent in ES5

ES6

[ 1, 3, 4, 2 ].find(x => x > 3) // 4
[ 1, 3, 4, 2 ].findIndex(x => x > 3) // 2

String Repeating

ES5

Array((4 * depth) + 1).join(" ");
Array(3 + 1).join("foo");

ES6

" ".repeat(4 * depth)
"foo".repeat(3)

String Searching
New specific string functions to search for a sub-string

ES5

"hello".startsWith("ello", 1) // true
"hello".endsWith("hell", 4)   // true
"hello".includes("ell")       // true
"hello".includes("ell", 1)    // true
"hello".includes("ell", 2)    // false

ES6

"hello".indexOf("ello") === 1;    // true
"hello".indexOf("hell") === (4 - "hell".length); // true
"hello".indexOf("ell") !== -1;    // true
"hello".indexOf("ell", 1) !== -1; // true
"hello".indexOf("ell", 2) !== -1; // false

Number Truncation
Truncate a floating point number to its integral part, completely dropping the fractional part.
ES5

function mathTrunc (x) {
    return (x < 0 ? Math.ceil(x) : Math.floor(x));
}
console.log(mathTrunc(42.7)) // 42
console.log(mathTrunc( 0.1)) // 0
console.log(mathTrunc(-0.1)) // -0

ES6

console.log(Math.trunc(42.7)) // 42
console.log(Math.trunc( 0.1)) // 0
console.log(Math.trunc(-0.1)) // -0