ES6 Features

By Cường Trần / cuongtran3001@gmail.com

OVERVIEW

ECMAScript 6, also known as ECMAScript 2015, is the latest version of the ECMAScript standard. ES6 is a significant update to the language, and the first update to the language since ES5 was standardized in 2009. Implementation of these features in major JavaScript engines is underway now.

CONSTANT

//declare
const PI = 3.141593;


//declare
const TABLET_WIDTH = 768;

Immutable variables

 

Can not be re-assigned

SCOPE

Variables

SCOPE

Function

ARROW FUNCTION

EXTENED PARAMETERS

Default parameter

EXTENED PARAMETERS

Rest parameter

EXTENED PARAMETERS

Spread operator

TEMPLATE LITERALS

String interpolation

REGULAR EXPRESSION

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

MODULES

CLASSES

Class definition

CLASSES

Class Inheritance

CLASSES

Base class access

CLASSES

Static member

CLASSES

Getter/setter

SYMBOL TYPE

http://blog.keithcirkel.co.uk/metaprogramming-in-es6-symbols/

ITERATORS

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.

TYPED ARRAY

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));

PROMISES

META PROGRAMMING

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"));

QUIZ

http://maxwellito.github.io/es6-quiz-slides/

REFERENCES

http://webapplog.com/es6/

 

https://github.com/lukehoban/es6features

 

http://blog.keithcirkel.co.uk/metaprogramming-in-es6-symbols/

 

https://egghead.io/courses/learn-es6-ecmascript-2015

Q&A

ES6 Features

By Cường Trần

ES6 Features

ES6 Features

  • 573