Workshop 10: ECMAScript 6

Front End Workshops
IX.ECMAScript 6. Novelties.
Browser support
Alex Adrià Cuadripani
aadria@visual-engin.com
Mario García Martín
mgarcia@visual-engin.com

Introduction
— INTRODUCTIO —

ECMAScript 6
Also known as ECMAScript 2015 or simply ES6
First working draft published on July 2011
Officially approved on June 2015
Implementation in major JavaScript engines is underway

More information in...
● http://www.ecma-international.org/ecma-262/6.0/index.html
● http://kangax.github.io/compat-table/es6/

ES6 Novelties
— ES6 NOVITATIS —

Default parameters
// ES5
function multiply(a, b, c) {
b = typeof b !== 'undefined' ? b : 1;
c = typeof c !== 'undefined' ? c : 1;
console.log(a * b * c);
}
multiply(5); // 5
// ES6
function multiply(a, b = 1, c = 1) {
console.log(a * b * c);
}
multiply(5); // 5
multiply(5, undefined, 2); // 10
// ES6
function plurify(s, p = s + 's') {
console.log(s + ' ' + p);
}
plurify('beer'); // 'beer beers'
// ES6
function init(options = { 'param1': 1 }) {
console.log(options);
}
init(); // { 'param1': 1 }
init({ 'param': 2 }); // { 'param': 2 }
Additional usage...

Rest parameters
function f(x, ...y) {
console.log(x, y);
}
f(3, 'hello', true); // 3, ['hello', true]
f(3, 'hello', true, false); // 3, ['hello', true, false]
// ES 5
function logAllArguments() {
for (var i=0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
logAllArguments(1, 2, 3, 4, 5); // 1 2 3 4 5
// ES 6
function logAllArguments(...args) {
for (var i=0; i < args.length; i++) {
console.log(args[i]);
}
}
logAllArguments(1, 2, 3, 4, 5); // 1 2 3 4 5
Could replace usage of the ‘arguments’ variable...

Spread operator
function f(x, y, z) {
console.log(x + y + z);
}
f(...[1, 2, 3]); // 6
// ES 5
var numbers = [-1, 5, 11, 3];
Math.max.apply(Math, numbers); // 11
// ES 6
var numbers = [-1, 5, 11, 3];
Math.max(...numbers); // 11
var x = ['a', 'b'];
var y = ['c'];
var z = ['d', 'e'];
var arr = [...x, ...y, ...z]; // ['a', 'b', 'c', 'd', 'e']
Practical uses

for..of loops
var numbers = [2, 3, 4];
for (var value of numbers) {
console.log(value);
}
// 2, 3, 4
var letters = 'Homer';
for (var item of letters) {
console.log(item);
}
// 'H', 'o', 'm', 'e', 'r'
Do we really need another way of looping?
// Classic way
for (var i=0; i<numbers.length; i++) {
console.log(numbers[i]);
}
// ES 5
numbers.forEach(function(value) {
console.log(value);
});
// for..in
for (var i in numbers) {
console.log(numbers[i]);
}

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`); // 'Fifteen is 15 and not 20.'
Template strings
// ES 5
var greetings = 'Hellon' +
'How are youn' +
'today?';
// ES 6
var greetings = `Hello
How are you
today?`;
Offers support for multiple lines

Destructuring
var homer = {
name: 'Homer',
surname: 'Simpson'
};
var { name, surname } = homer;
console.log(name); // 'Homer'
console.log(surname); // 'Simpson'
// ES 5
var foo = ['one', 'two', 'three'];
var one = foo[0];
var two = foo[1];
var three = foo[2];
// ES 6
var foo = ['one', 'two', 'three'];
var [one, two, three] = foo;
var foo = function() {
return [175, 75];
};
var [height, weight] = foo();
console.log(height); // 175
console.log(weight); // 75

const
const PI;
PI = 3.14; // ERROR
const PI = 3.14;
PI = 3.14159; // ERROR
const PI = 3.14;
Value must be assigned in declaration
Read-only
Block scoped
if (true) {
const PI = 3.14;
}
console.log(PI); // ERROR
Characteristics

let
var fns = [];
for (var i=0; i<4; i++) {
fns.push(function() {
console.log(i);
});
}
fns[0](); // 4
fns[1](); // 4
fns[2](); // 4
fns[3](); // 4
var fns = [];
for (let i=0; i<4; i++) {
fns.push(function() {
console.log(i);
});
}
fns[0](); // 0
fns[1](); // 1
fns[2](); // 2
fns[3](); // 3
Block scopedlet name = 'Homer';
In previous workshops...
“var”... Are we going to see you ever again?

Block-level function declaration
'use strict';
function f() { return 1; }
{
console.log(f()); // 2
function f() { return 2; }
}

Arrow functions
// ES5
var sum = function(a, b) {
return a + b;
}
// ES6
var sum = (a, b) => a + b;
function Person() {
this.age = 0;
setInterval(() => {
this.age++;
}, 1000);
}
function Person() {
var self = this;
self.age = 0;
setInterval(function() {
self.age++;
}, 1000);
}
// ES 5
var data = ['one', 'two', 'three'];
data.forEach(function(value) {
console.log(value)
});
// ES 6
var data = ['one', 'two', 'three'];
data.forEach(value => {
console.log(value);
});

Class
// ES6
class Media {
constructor(title, duration, isPlaying) {
this.title = title;
this.duration = duration;
this.isPlaying = isPlaying;
}
start() {
this.isPlaying = true;
}
stop() {
this.isPlaying = false;
}
}
// ES5
function Media(title, duration, isPlaying) {
this.title = title;
this.duration = duration;
this.isPlaying = isPlaying;
}
Media.prototype.start = function start() {
this.isPlaying = true;
};
Media.prototype.stop = function stop() {
this.isPlaying = false;
};

Inheritance
// ES6
class Song extends Media {
constructor(title, artist, duration) {
super(title, duration, false);
this.artist = artist;
}
}
class Movie extends Media {
constructor(title, year, duration) {
super(title, duration, false);
this.year = year;
}
}
// ES5
function Song(title, artist, duration) {
Media.call(this, title, duration, false);
this.artist = artist;
}
Song.prototype = Object.create(Media.prototype);
function Movie(title, year, duration) {
Media.call(this, title, duration, false);
this.year = year;
}
Movie.prototype = Object.create(Media.prototype);

Modules
// lib/math.js
export function sum(x, y) {
return x + y;
}
export const PI = 3.14159;
// lib/ux-math.js
export * from 'lib/math';
export const E = 2.7182;
export default function(x) {
return Math.exp(x);
}
// app.js
import * as math from 'lib/math';
console.log(math.sum(math.PI, math.PI));
// otherApp.js
import {sum, PI} from 'lib/math';
console.log(sum(PI, PI));
// app.js
import exp, {PI, E} from 'lib/ux-math';
console.log(exp(PI));

Generators
function* genFunc() {
console.log('First');
yield; // (A)
console.log('Second'); // (B)
}
let genObj = genFunc();
genObj.next()
//First
{ value: undefined, done: false }
genObj.next()
//Second
{ value: undefined, done: true }
function* objectEntries(obj) {
let keys = Object.keys(obj);
for (let key of keys) {
yield [key, obj[key]];
}
}
let batman = { first: 'Bruce', last: 'Wayne' };
for (let [key,value] of objectEntries(batman)) {
console.log(`${key}: ${value}`);
}
// Output:
// first: Bruce
// last: Wayne

Typed Arrays
let typedArray = new Uint8Array([0,1,2]);
console.log(typedArray.length); // 3
typedArray[0] = 5;
let normalArray = [...typedArray]; // [5,1,2]
// The elements are stored in typedArray.buffer.
let dataView = new DataView(typedArray.buffer);
console.log(dataView.getUint8(0)); // 5

Map
let map = new Map();
map.set('name','Bruce');
map.set('surname','Wayne');
map.size //2
map.get('name'); //Bruce
map.has('name'); //true
map.delete('name'); //true
map.clear();
map.size //0
let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
for (let [key, value] of map) {
console.log(key, value);
}

WeakMap
//keys cannot be primitive types
let key = {a:1};
let wm = new WeakMap();
wm.set(key,"value");
wm.get(key); //you can get "value";
key=undefined;
console.log(wm.get(key));
console.log(wm.size); //undefined
//loop through the keys in an weakmap
doesn't work
for(let i of wm) {
console.log(i);
}
//delete all keys doesn't work
wm.clear();

Set
let set = new Set();
set.add('luke');
set.add('yoda');
set.size //2
set.has('luke'); //true
set.delete('luke'); //true
set.has('luke'); //false
set.size //1
set.clear();
set.size //0
let set = new Set(['luke', 'yoda', 'ben']);
set = new Set().add('luke').add('yoda').add('ben');
for (let x of set) {
console.log(x);
}

WeakSet
//values cannot be primitive types
let weakset = new WeakSet();
let obj = {name: 'Vito Corleone'};
weakset.add(obj);
weakset.add(function(){});
weakset.has({name: 'Vito Corleone'}); //false
weakset.has(obj); //true
obj = undefined;
weakset.delete(obj); //false
weakset.delete(function(){}); //false
weakset.size undefined
//loop through the values in an weakset
doesn't work
for (let x of weakset) {
console.log(x);
}
//delete all values doesn't work
weakset.clear();

Proxy
let handler = {
get: function(target, name){
return name in target?
target[name] :
'not a jedi';
}
};
let proxy = new Proxy({}, handler);
proxy.a = 'ben';
proxy.b = 'yoda';
console.log(proxy.a, proxy.b); // ben, yoda
console.log(proxy.c); // not a jedi
let target = {}; // Start with an empty object
let handler = {}; // Don’t intercept anything
let {proxy, revoke} = Proxy.revocable(target,
handler);
proxy.foo = 123;
console.log(proxy.foo); // 123
revoke();
console.log(proxy.foo); // TypeError: Revoked

Promises
var promise = new Promise(
function (resolve, reject) {
...
if (...) {
resolve(value); // success
} else {
reject(reason); // failure
}
});
● Pending: the result hasn’t been computed, yet
● Fulfilled: the result was computed successfully
● Rejected: a failure occurred during computation

Promises
function httpGet(url) {
return new Promise(
function (resolve, reject) {
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (this.status === 200) {
resolve(this.response);
//success
} else {
// Something went wrong (404 etc.)
reject(new Error(this.statusText));
}
}

Promises
request.onerror = function () {
reject(new Error('XMLHttpRequest Error: '+this.statusText));
};
request.open('GET', url);
request.send();
});
}

Promises
httpGet('http://myserver.com/example')
.then(
function (value) {
console.log('Contents: ' + value);
},
function (reason) {
console.error('Something went wrong', reason);
});

Object static methods
var original = {};
var merged = {};
original.a = 1;
merged.b = 2;
Object.assign(original, merged);
console.log(original.b) //2
Object.assign(target, source_1, ..., source_n)
Object.is(value1, value2)
Object.is(2, 2) //true
Object.is('test', 'aaa') //false
Object.is(NaN, NaN) //true
Object.is(-0, +0) //false

Object static methods
var human = {
sleep() {
return 'sleeping...';
}
};
var worker = {
work() {
return 'working...';
},
};
Object.setPrototypeOf(worker, human);
worker.sleep(); //sleeping...
Object.setPrototypeOf(obj, prototype);

String static methods
let name = 'Bob';
String.raw`Hin${name}!`;
// 'HinBob!', substitutions are processed.
String.raw`templateString`;
String.fromCodePoint(42); // "*"
String.fromCodePoint(65, 90); // "AZ"
String.fromCodePoint(0x404); // "u0404"
String.fromCodePoint('_'); // RangeError
String.fromCodePoint(num1[, ...[, numN]])

String.prototype methods
'abc'.repeat(2); // 'abcabc'
String.prototype.repeat
'Ser, o no ser.'.startsWith('Ser'); // true
String.prototype.startsWith
'Ser, o no ser.'.endsWith('ser.'); // true
String.prototype.endsWith
'Ser, o no ser.'.includes('no'); // true
String.prototype.includes

Array static methods
// Array-like primitive types to Array
Array.from([1, 2, 3]);
//[1, 2, 3]
// Any iterable object...
// Set
var s = new Set(["foo", window]);
Array.from(s);
// ["foo", window]
Array.from(arrayLike[, mapFn[, thisArg]])
// Map
var m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m);
// [[1, 2], [2, 4], [4, 8]]
// String
Array.from("foo");
// ["f", "o", "o"]
// Using an arrow function as the map
function to manipulate the elements
Array.from([1, 2, 3], x => x + x);
// [2, 4, 6]

Array static methods
Array.of(1); // [1]
Array.of(1, 2, 3); // [1, 2, 3]
Array.of(undefined); // [undefined]
//The difference between Array.of() and the Array constructor is in the handling of
//integer arguments: Array.of(42) creates an array with a single element, 42, whereas
//Array(42) creates an array with 42 elements, each of which is undefined.
Array.of(element0[, element1[, ...[, elementN]]])

Array.prototype methods
Array.from([ 'a', 'b' ].keys()); //[ 0, 1 ]
Array.prototype.keys()
Array.from([ 'a', 'b' ].values()); //[ 'a', 'b' ]
Array.prototype.values()
Array.from([ 'a', 'b' ].entries()); //[ [ 0, 'a' ], [ 1, 'b' ] ]
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
Array.prototype.entries()

Array.prototype methods
[6, -5, 8].find(x => x < 0); //-5
Array.prototype.find(predicate, thisArg?)
[6, -5, 8].findIndex(x => x < 0); //1
Array.prototype.findIndex(predicate, thisArg?)
['a', 'b', 'c'].fill(7); //[ 7, 7, 7 ]
['a', 'b', 'c'].fill(7, 1, 2); //[ 'a', 7, 'c' ]
Array.prototype.fill(value, start?, end?)

Number properties
Number.isFinite(Infinity);
//false
Number.isFinite(NaN);
//false
Number.isFinite(number)
Number.isInteger(number)
Number.isFinite(123);
//true
Number.isInteger(-17);
//true
Number.isInteger(33);
//true
Number.isInteger(33.1);
//false
Number.isInteger('33');
//false
Number.isInteger(NaN);
//false
Number.isInteger(Infinity);
//false

Number properties
Number.isSafeInteger(number)
Number.isSafeInteger(3); // true
Number.isSafeInteger(Math.pow(2, 53)); // false
Number.isSafeInteger(Math.pow(2, 53) - 1); // true
Number.isSafeInteger(NaN); // false
Number.isSafeInteger(Infinity); // false
Number.isSafeInteger('3'); // false
Number.isSafeInteger(3.1); // false
Number.isSafeInteger(3.0); // true
Number.isNAN(number)
Number.isNaN(NaN); // true
Number.isNaN(Number.NaN); // true
Number.isNaN(0 / 0) // true
Number.isNaN("NaN"); // false
Number.isNaN(undefined); // false
Number.isNaN({}); // false
Number.isNaN("blabla"); // false
Number.isNaN(true); // false
Number.isNaN(null); // false
Number.isNaN(37); // false

Math methods
Math.sign(3); // 1
Math.sign(-3); // -1
Math.sign('-3'); // -1
Math.sign(0); // 0
Math.sign(-0); // -0
Math.sign(number)
Math.trunc(13.37); // 13
Math.trunc(0.123); // 0
Math.trunc(-0.123); // -0
Math.trunc('-1.123'); // -1
Math.trunc(number)

Math methods
Math.sinh(0); // 0
Math.sinh(1); // 1.1752011936438014
Math.sinh(number)
Math.log10(2); // 0.3010299956639812
Math.log10(1); // 0
Math.log10(number)

● http://blog.teamtreehouse.com/get-started-ecmascript-6
● https://babeljs.io/docs/learn-es2015/
● http://es6-features.org/
● Exploring ES6, by Dr. Axel Rauschmayer (http://exploringjs.com/es6/index.html)
● Setting up ES6, by Dr. Axel Rauschmayer (https://leanpub.com/setting-up-es6/read)
● https://developer.mozilla.org/en-
US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla

Browser’s edge versions
Intended mainly for developers (and crazy users)
Frequent updates
Capable of running side by side with stable version
Chrome
Canary
Firefox
nightly
Opera
beta
WebKit
nightly

Transpilers
Compile from ES6 source code into ES5 source code
Offer support for ES6 features, to various degrees

● https://www.google.com/chrome/browser/canary.html
● https://nightly.mozilla.org/
● http://www.opera.com/es/computer/beta
● http://nightly.webkit.org/
● https://github.com/google/traceur-compiler
● https://babeljs.io/

Workshop 10: ECMAScript 6

More Related Content

What's hot

Viewers also liked

Similar to Workshop 10: ECMAScript 6

More from Visual Engineering

Recently uploaded

Workshop 10: ECMAScript 6