#comdaybe

ECMAScript.next!

ECMAScript.wtf?e-guidelines - HOWEST

@kevinderudder

ECMAScript.sext

ECMAScript sex

This is a JavaScript session

There will be code

@kevinderudder working for eGuidelinesand lecturer at the Technical University of West Flanders.

Contact me on kevin@e-guidelines.be

Why this session

probably the most popularprogramming language

JavaScriptis

probably the most misunderstoodprogramming language

JavaScriptis

I <3 JavaScript

GOALIntriguing JavaScript story

What’s new

Code, code and code

The intriguing JavaScript Story

19961995 20051999 2009 2011 20131992 1998

19961995 20051999 2009 2011 20131992 1998

MochaLiveScriptMocha

19961995 20051999 2009 2011 20131992 1998

LiveScript

JavaScript

LiveScript

TM

Java

19961995 20051999 2009 2011 20131992 1998

JScript

19961995 20051999 2009 2011 20131992 1998

ECMAJavaScript

SCRIPT

19961995 20051999 2009 2011 20131992 1998

≠

JAVASCRIPT

ECMASCRIPT

19961995 20051999 2009 2011 20131992 1998

is a dialect of

JAVASCRIPT

ECMASCRIPT

19961995 20051999 2009 2011 20131992 1998

ECMASCRIPT

are dialects of

JAVASCRIPT JSCRIPT ACTIONSCRIPT

19961995 20051999 2009 2011 20131992 1998

ECMASCRIPT~

TC 39 controls whatwill be included inthe spec

19961995 20051999 2009 2011 20131992 1998

ECMASCRIPT 2be inline with excistinginternational standards

~

19961995 20051999 2009 2011 20131992 1998

features that are reallyessential to programming

regular expressions more string methods switch, do while

instanceof exception handling numeric formatting

~ECMASCRIPT 3

19961995 20051999 2009 2011 20131992 1998

anticipated the future~

ECMASCRIPT 4

19961995 20051999 2009 2011 20131992 1998

ECMASCRIPT 4~

Incompatible with ES 3

19961995 20051999 2009 2011 20131992 1998

AJAXBuild complex web apps

~

19961995 20051999 2009 2011 20131992 1998

Object.Create defineProperty Strict

Getter and setters json supportSemantic changes

~ECMASCRIPT 5

19961995 20051999 2009 2011 20131992 1998

Revision of ES5~

ECMASCRIPT 5.1

19961995 20051999 2009 2011 20131992 1998

~

also called ES.next

ECMASCRIPT 6

19961995 20051999 2009 2011 20131992 1998

~

compatible with ES5

ECMASCRIPT 6

19961995 20051999 2009 2011 20131992 1998

~

be a better language

ECMASCRIPT 6

19961995 20051999 2009 2011 20131992 1998

~

Final review of draftin november 2013

ECMASCRIPT 6

19961995 20051999 2009 2011 20131992 1998

~

ECMA approval indecember 2014

ECMASCRIPT 6

19961995 20051999 2009 2011 20131992 1998

ECMAHARMONYSuperset of ES.nextfuture features in ES.nextor ES.next.next

~

19961995 20051999 2009 2011 20131992 1998

demo.

most ES.next features don’t work in your browser

What to use??

› Node

› TypeScript

› Transpilers

› Google Traceur

› Esprima

http://kangax.github.io/es5-compat-table/es6/

SHOW ME CODE

Features

• iterators

• const and let

• maps

• rest parameters

• generators

• shorthand literal syntax

• arrow functions

• modules

• template strings

• classes

• symbols

• spread operator

• weakmaps

• new object methods

• default parameters

• binary data…

about variables and scopes

ES 5: function scope

var jamesBondMovies = ["Goldeneye", "Dr No"];function showMovies(){

var i = 0, l = jamesBondMovies.length;for(; i < l ; i++){

alert(jamesBondMovies[i]);}

alert(i);alert(l);

}

showMovies();

› 2› 2

ES.next: Block scope

› 2 new keywords: let and const

› let

› Creates a block scope variable

› const

› Like let but only readable afterdeclaration

let

var jamesBondMovies = ["Goldeneye", "Dr No"];function showMovies(){

let i = 0, l = jamesBondMovies.length;for(; i < l ; i++){

alert(jamesBondMovies[i]);}

alert(i);alert(l);

}

showMovies();

› i is not defined› l is not defined

Shorthand Object Literal Syntax

Shorthand Object Literal Syntax

› Allow us to remove redundant code

var jamesbond = 'Sean Connery';var title = 'Dr No';var actor1 = 'Joseph Wiseman';

var drNO = {'jamesbond': jamesbond,'title': title,'badGuy': actor1

};

var jamesbond = 'Sean Connery';var title = 'Dr No';var actor1 = 'Joseph Wiseman';

var drNO = {jamesbond,title,'badGuy': actor1

};

ES 5 ES.next

Shorthand Object Literal Syntax

function JamesBond(name, f){this.name = name;this.favDrink = f;

}

JamesBond.prototype = {order(howTo){

alert(this.favoriteDrink + ' ' + howTo);},get favoriteDrink(){

return this.favDrink;},set favoriteDrink(f){

this.favDrink = f;}

};

Default Function Parameters

Default Function Parameters

› Have optional function parameters by setting default values

› The parameters are defined when the functionsare defined

Rest parameter

Function problem

› You never know how many arguments are beingpassed to a function

› Use the arguments object to get all the arguments

› Arguments is not an array!!!

› Solution: rest parameter

› use ‘…’ to denote a variable number of arguments

Rest Parameters

› Pass a number of args to a named parameter

› Choos a name for your parameter

› Instead of using the arguments object

› Variabe name preceded with …

function addMovies(...movies){movies.forEach(function(m){

alert(m);});

}addMovies("dr No", "Goldeneye");addMovies("dr No", "licence to kill", "Goldfinger");

Rest Parameters

function JamesBond(name, favoriteDrink, ...gadgets) {

for(var i = 0, l = gadgets.length;i<l;i++){alert(gadgets[i]);

}this.name = name;this.favoriteDrink = favoriteDrink;

}

var sean = new JamesBond('Sean Connery', 'Martini','Watch with a laser','Aston Martin','Mojo');

Spread operator

Spread operator

› Opposite of rest parameters

› Pass number of arguments to function

function commentMovie(date, m, comment, by){log("comment on '" + m+ "' by " + by + " on " + date);

}

function getComment(){return ["Goldeneye", "my favorite", "kevin"];

}

commentMovie("20/06/2013", ...getComment());

Spread Operator

function Cocktail(name, type, ...ingredients){alert(name + '(' + type + ')');alert('ingredients');alert(' ' + ingredients);

var i = 0, l = ingredients.length;

}

var vesper = ['shortdrink', 'lillet blanc, wodka, gin'];

var v = new Cocktail('Vesper Martini', ...vesper);

Spread operator and rest parameters combined

function Cocktail(name, type, ...ingredients){alert(name + '(' + type + ')');alert('ingredients');alert(' ' + ingredients);

var i = 0, l = ingredients.length;for(;i<l;i++){

alert(' ' + ingredients[i]);}

}

var vesper = ['shortdrink','lillet','blanc','wodka','gin'];

var v = new Cocktail('Vesper Martini', ...vesper);

Classes

Classes

› A class is a representation of an object

› Blueprint to create objects

› Until now, we’ve faked it

› functions and prototypes to implement classes

Fake itfunction JamesBond(name, favoriteDrink) {this.name = name;this.favDrink = favoriteDrink;

}

JamesBond.prototype = {/* PROPERTIES */get favoriteDrink() { return this.favDrink },set favoriteDrink(v) { this.favDrink = v },

/* BEHAVIOR */orderDrink: function () { alert('order'); }

};

var daniel = new JamesBond('Daniel Craig', 'Vesper Martini');

alert(daniel.favoriteDrink);daniel.orderDrink();

Classes in ES6class JamesBond{

constructor(name, favoriteDrink){this.name = name;this.favDrink = favoriteDrink;

}

get favoriteDrink() { return this.favDrink }set favoriteDrink(v) { this.favDrink = v }

orderDrink(how) { alert(this.favDrink + '\n ' + how);

}}var daniel = new JamesBond('Daniel Craig'

, 'Vesper Martini');

daniel.orderDrink('shaken not stirred');

Extending classes

class Movie{constructor(title){

this.title = title;}

}

class jamesBondMovie extends Movie{constructor(title, jamesBond, badGuy, omgGirl){super(title);

this.jamesBond = jamesBond;this.badGuy = badGuy;this.omgGirl = omgGirl;

}};

Modules

Modules

› Group functionality into a module

› Define which function you want to make availableexternally

› Import module in your code

› Define which functionality you want to include

Modules

module helper{export function print(array){

for(var a of array){log(a);

}}

}

import {print} from helper;

print(["Pierce","Sean"]);

Remote modules

module JSON at 'http://json.org/modules/json2.js';

alert(JSON.stringify({'hi': 'world'}));

Module Loaders

› Dynamic API for loading modules in controlledand selectively isolated contexts

Loader.load('http://json.org/modules/json2.js',function(JSON) {

alert(JSON.stringify([0, {a: true}]));});

Destructuring

Destructuring

› Extract values from an object using patterns

› Get zone number out of telephone number

› Syntactic sugar

› Is already supported in a number of languages

› Python: sequence unpacking

› Coffeescript: destructuring

Array destructuring

› Variables can be initialized in one statement

› Swapping 2 variables

var [d, m, y] = [20,6,2013];

var d = 20, m = 6, y = 2013;

var [value1, value2] = [10, 30];[value1, value2] = [value2, value1]

Good case: return multiple values

› Return multiple

function getMovieInfo(){return ["Dr No", "Sean Connery", "Joseph Wiseman"];

}

var [title, jamesbond, badGuy] = getMovieInfo();

Object destructuring

› Similar to array pattern

› Map on object properties

var movie = { "name": "Sean Connery“, "movie": "Dr No"};

var {name: actor, movie: title} = movie;

Object destructuring

movies.forEach(function({name: actor, movie: movie}){// ...

});

Maps, WeakMaps and sets

Maps, WeakMaps and Sets

› Until now, Array was (is) the only type of collection

› ES6 introduces 3 new types of collections

› Set:

› Map:

› WeakMap:

Sets

› List of unique array elements

var movies = new Set();movies.add("Dr No");movies.add("GoldFinger");

console.log(movies.size()); // --> 2

var movies = new Set();movies.add("Dr No");movies.add("GoldFinger");movies.add("Dr No"); // --> already in the set

console.log(movies.size()); // --> 2

Maps

› Map a value to a unique key

› cfr: a Dictionary

var movies = new Map();movies.set(1, "Dr No");movies.set(2, "GoldFinger");

var m = movies.get(1);movies.delete(2);

WeakMaps

› Like maps

› But: key must be an object

cannot be a primitive value

› When the reference gets garbage collected, the weakmap will remove the item

WeakMaps

var drNo = new Movie(...params);

var movies = new WeakMap();movies.set(drNo, {'jamesbond': 'Sean'});

var m = movies.get(drNo); // OK

drNo = null;

var m = movies.get(drNo); // UNDEFINED

Iterators

Iterators

› JavaScript has the for – in

› In an array, the for-in gives the indexes and not the values

var actors = ["Sean", "Timothy", "Roger”];

for (var a in actors) {alert(a); // 0,1,2

}

for-of

var actors = ["Sean", "Timothy", "Roger", "Pierce"];for (var a of actors) {

alert(a); // 0,1,2,3}

var movies = new Map();movies.set(1, "Dr No");movies.set(2, "GoldFinger");

for(var [id, title] n movies){alert(title);

}

Arrow functions

Arrow Functions

› JavaScript developers frequently use functionexpressions

$("#button").click(function(){ /*...*/ });

forEach(function(item){ /*...*/ });

Arrow Functions

function addMovies(...movies){movies.forEach(function(m){

alert(m);});

}

addMovies("dr No", "Goldeneye");

function addMovies(...movies){movies.forEach(m => alert(m));

}

addMovies("dr No", "Goldeneye");

I’m sorry but no time for

• Iterators

• Symbols

• Binary data

• Tail-call optomization

• Proxies

• Reflection methods

• …

Other cool stuff

Q&A