ES6 Features

SCOPE

Variables

SCOPE

Function

EXTENED PARAMETERS

Default parameter

EXTENED PARAMETERS

Rest parameter

EXTENED PARAMETERS

Spread operator

OBJECT PROPERTIES

Property shorthand

let obj = { x, y };

==> obj = { 
    x: x, 
    y: y 
};

OBJECT PROPERTIES

Computed property names

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

OBJECT PROPERTIES

Method properties:

let obj = {
    
    name: 'MyName',

    foo (a, b) {
       //TODO
    },

    bar (x, y) {
      //TODO
    }
}

//use
obj.foo(12, 14);

DESTRUCTURING ASSIGMENT

Array matching

//swap a and b
[b, a] = [a, b];


//assign 
var list = [1, 2, 3];
[a, , b] =  list;

DESTRUCTURING ASSIGMENT

Object matching

var obj = {
  firstname: 'A',
  middlename: 'Van',
  lastname: 'Nguyen'
};

//match
var {firstname, middlename, lastname} = obj;

DESTRUCTURING ASSIGMENT

Object deep matching

var obj = {
  firstname: 'A',
  middlename: 'Van',
  lastname: 'Nguyen',
  salary: {
    basic: 3745,
    bonus: 3745
  }
};

//match
var {firstname, middlename, lastname, salary:{basic: salary}} = obj;

DESTRUCTURING ASSIGMENT

Parameter matching

function f([ name, val ]) {
    console.log(name, val)
}

function g ({ name: n, val: v }) {
    console.log(n, v)
}

function h ({ name, val }) {
    console.log(name, val)
}


f([ "bar", 42 ])
g({ name: "foo", val:  7 })
h({ name: "bar", val: 42 })

DESTRUCTURING ASSIGMENT

Fail-Soft destructuring

var list = [ 7, 42 ];
var [ a = 1, b = 2, c = 3, d ] = list;


//result
//a === 7
//b === 42
//c === 3
//d === undefined

CLASSES

Class definition

CLASSES

Class Inheritance

CLASSES

Base class access

CLASSES

Static member

CLASSES

Getter/setter

Set

let s = new Set()
s.add("hello").add("goodbye").add("hello")
s.size === 2
s.has("hello") === true
for (let key of s.values()) // insertion order
    console.log(key)

Map

let m = new Map();

m.set("hello", 42);
m.set(s, 34);
m.get(s) === 34

m.size === 2

for (let [ key, val ] of m.entries())
    console.log(key + " = " + val)

WeakMap

WeakMap object is a collection of key/value pairs in which the keys are weakly referenced.  The keys must be objects and the values can be arbitrary values.

Keys of WeakMaps are of the type Object only. Primitive data types as keys are not allowed.

The key in a WeakMap is held weakly.  What this means is that, if there are no other strong references to the key, then the entire entry will be removed from the WeakMap by the garbage collector.

NEW BUILT-IN METHORS

Assign enumerable properties

var dist  = { quux: 0 };

var src1 = { firstname: 'Cuong', lastname: 'Tran' };
var src2 = { age: 32, email: 'cuongtran3001@gmail.com' };

Object.assign(dist, src1, src2);

//dist.quux
//dist.firstname
//dist.lastname
//dist.age
//dist.email

NEW BUILT-IN METHORS

Array element finding

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

NEW BUILT-IN METHORS

String repeating

"Cuong ".repeat(12);

//Cuong Cuong Cuong Cuong Cuong Cuong Cuong Cuong Cuong Cuong Cuong Cuong 

NEW BUILT-IN METHORS

String searching

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

NEW BUILT-IN METHORS

Number type/safety checking

Number.isNaN(42);
Number.isNaN(NaN)l

Number.isFinite(Infinity);
Number.isFinite(-Infinity);
Number.isFinite(NaN);
Number.isFinite(123);

Number.isSafeInteger(42);
Number.isSafeInteger(9007199254740992);

NEW BUILT-IN METHORS

Number comparision

console.log(0.1 + 0.2 === 0.3);

console.log(Math.abs((0.1 + 0.2) - 0.3) < Number.EPSILON);

NEW BUILT-IN METHORS

Number truncation

console.log(Math.trunc(42.7));

console.log(Math.trunc( 0.1));

console.log(Math.trunc(-0.1));

NEW BUILT-IN METHORS

Number sign deternimation

console.log(Math.sign(7));
console.log(Math.sign(0));
console.log(Math.sign(-0));
console.log(Math.sign(-7));
console.log(Math.sign(NaN));

LOCALIZATION

Collation

var list = [ "ä", "a", "z" ]

var l10nDE = new Intl.Collator("de")
var l10nSV = new Intl.Collator("sv")

l10nDE.compare("ä", "z");
l10nSV.compare("ä", "z");

LOCALIZATION

Number format

var l10nEN = new Intl.NumberFormat("en-US");
var l10nDE = new Intl.NumberFormat("de-DE");

l10nEN.format(1234567.89);
l10nDE.format(1234567.89);

LOCALIZATION

Currency format

var l10nUSD = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
var l10nGBP = new Intl.NumberFormat("en-GB", { style: "currency", currency: "GBP" });
var l10nEUR = new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" });

l10nUSD.format(100200300.40);
l10nGBP.format(100200300.40);
l10nEUR.format(100200300.40);

LOCALIZATION

Date/Time format

var l10nEN = new Intl.DateTimeFormat("en-US");
var l10nDE = new Intl.DateTimeFormat("de-DE");

l10nEN.format(new Date("2015-01-02"));
l10nDE.format(new Date("2015-01-02"));