ECMAScript-262

6th Edition

1 / 76

Past, Present and Future

2 / 76

What's what

 : "Java" is a trademark of Sun so "JavaScript" is also (why microsoftnamed it JScript, etc.). The name of the language and the standard. Hosted by ECMAinternational.

 : the standard. : 5th edition of ECAMA­262. : The Technical Committee that maintain the standard.

 : An implementation of the standard.

3 / 76

How all began

1995 : Eich developped Mocha/LiveScript.1996 : Netscape (with Sun) include JavaScript in the browser (in order to completeJava).1996 : Netscape submit JavaScript to ECMA for standardization.1997 : ECMA­262 1st Edition.1998 : ECMA­262 2nd Edition.1999 :   This is the version we all know.

4 / 76

The dark years

JavaScript is a toy.TC39 starts an amibitious new version : static typing, classes, generators, annotations,generics, etc.But they even never been agreed what features to include.

5 / 76

The resurection

~2005 web2.0 is rising.2008 : v8.2008 : TC39 finally abandonned ES4. Agreement on starting 2 projects : ES5 as alighter version and Harmony for the future of the language.2009 : ECMAScript 5th Edition.2009 : 1st version of node.js.2011 :   (The current implementation).

6 / 76

And now

ES6 is feature complete.planned for end of May 2015.Some Harmony features have been moved to ES7.Now called ES 2015 (really?).

7 / 76

Implementation

8 / 76

How to do ES6 today ??

9 / 76

Kangax' ES6 Compatibility Table

10 / 76

1.  io.js2.  Firefox 393.  Spartran4.  Chrome 445.  node.js ­­harmony

11 / 76

1.  Babel2.  Traceur3.  TypeScript4.  JSX (React)

12 / 76

My stack

node.jsBabelBrowserify

13 / 76

Features Overview

14 / 76

Backward compatible

ALL ES5 features :

strict mode (change langage semantic but enable backward compat)API Enhancement :

Object.create, Object.keys, Object.defineProperty, etc.Array.indexOf, Array.forEach, Array.map, Array.reduce, Array.filter, Array.some,etc.Date.now, Date.toISOStringFunction.bindString.trimJSON

Getter/SetterProperty access on string and on object using reserved keyword

Kangax' ES5 Compatibility Table

15 / 76

Object Literrals

16 / 76

var tatoo = { size : function size(){ return 'small'; }, ink(){ return 'red'; }};

tatoo.ink() === 'red';

17 / 76

var color = 'red';

var tatoo = { size : 'small', color};

tatoo.color === 'red';

18 / 76

var color = 'Red';var size = 'small';var tatoo = { ['has' + color + 'Ink'] : true, ['is' + small.toUpperCase()](){ return true; }};

tatoo.hasRedInk === true;

tatoo.isSMALL() === true;

19 / 76

Destructuring

20 / 76

var tattoo = ['small', 'red', '$80'];var [size, color, price] = tattoo;

size === 'small';color === 'red';price === '$80';

21 / 76

var tattoo = { s : 'small', c :'red', p : '$80'};

var { s : sizer, c : color, p : price };

size === 'small';color === 'red';price === '$80';

22 / 76

var [size] = [];

size === undefined;

23 / 76

Function parameters

24 / 76

function countTattoo(tattoos = [] ) { return tattoos.length;}

countTattoo(['arms', 'neck']) === 2;countTattoo() === 0;

25 / 76

function countTattoo(...tattoos) { return tattoos.length;}

countTattoo('arms', 'neck') === 2;countTattoo() === 0;

26 / 76

function drawTattoo(size, color, location){ return 'Drawing a ' + size + ', ' + color + ' tattoo on the ' + location;}

var tattoos = ['small', 'green', 'back'];drawTattoo(...tattoos) === 'Drawing a small, green tattoo on the back';

27 / 76

Template Strings

28 / 76

var tattoo = 'pin-up';var desc = My mother has a ${tatoo} tattooed on her arm;

29 / 76

var tattoo = 'pin-up';var desc = <div> </div>;

<span>My mother has a <strong>${tatoo}</strong> tattooed on her arm</span>

30 / 76

var tattoos = ['pin-up', 'anchor', 'dragon'];var desc = My mother has a ${tatoos.length} tattoos;

31 / 76

function tattoo(tpl, ...values){ return tpl.reduce(function(acc, chunk, index){ return acc + chunk + (values[index] || ''); }, '');}

var size = 'SMALL';var motif = 'flower';var color = 'red';

var res = tattooA ${size.toLowerCase()}, ${color} ${motif} tattoo;res === "A small, red flower tattoo";

32 / 76

Variable declaration

33 / 76

if (true){ let size = 'small'; size === 'small';}typeof size === 'undefined';

34 / 76

if (true){ const size = 'small'; size === 'small';

//size = ''; throws a SyntaxError}typeof size === 'undefined';

35 / 76

Arrow functions

36 / 76

var tattoos = ['pin-up', 'anchor', 'dragon'].map( t => t[0].toUpperCase() + t.substring(1).toLowerCase());

37 / 76

var tattoos = ['pin-up', 'anchor', 'dragon'].map( t => { return t[0].toUpperCase() + t.substring(1).toLowerCase()});

38 / 76

var tattoo = { color : 'blue', draw : function (locations){ var result = []; locations.forEach( (l, i) => { result[i] = 'Drawing a ' + this.color + ' tattoo on the ' + l; }); return result; }};

var drawing = tattoo.draw(['arm', 'leg']);drawing[0] === 'Drawing a blue tattoo on the arm';drawing[1] === 'Drawing a blue tattoo on the leg';

39 / 76

Collections

40 / 76

var tattoos = new Set();tattoos.add('pin-up') .add('dragon') .add('pin-up');

tattoos.size === 2;tattoos.has('pin-up') === true;

41 / 76

var machine = new Map();machine.set("speed", 10);machine.get("speed") === 10;

machine.set("ink", "purple");machine.get("ink") === "purple";

42 / 76

var tattoo = { color : 'green', size : 'small'};var book = new WeakMap();tattoos.set(tattoo, "page 10");tattoos.get(tattoo) === "page 10";

43 / 76

var tattoos = ['dragon', 'flower', 'pin-up', 'anchor', 'heart', 'tribal'];for (var tattoo of tattoos){ console.log(tattoos);}

44 / 76

var randomTattoos = { [Symbol.iterator]() { var tattoos = ['dragon', 'flower', 'pin-up', 'anchor', 'heart', 'tribal']; var time = 0; return { next : function(){ time++; return { done : time > 3, value : tattoos[Math.floor(Math.random() * tattoos.length)] } } } }}

for (var tattoo of randomTattoos){ console.log(tattoo);}

45 / 76

Promises

46 / 76

function startMachine(){ return new Promise(function(resolved, reject){ var ts = setTimeout(function(){ reject(new Error("Machine hasn't started correctly")); }, 1000);

console.log('starting');

clearInterval(ts); resolved(); });}

startMachine() .then(function(){ console.log('done'); }) .catch(function(err){ console.error(err); });

47 / 76

Generators

48 / 76

var state = { points : 0, down : false};function* inkPoint(){ while(true){ state.down = !state.down; if(state.down){ state.points++; } yield state; }}

var next = inkPoint().next();next.value.points === 1;next.value.down === true;

next = inkPoint().next();next.value.points === 1;next.value.down === false;

next = inkPoint().next();next.value.points === 2;next.value.down === true;

49 / 76

var points = 0;function* inkPoint(){ while(points < 2){ points++; yield points; } return points;}

var next = inkPoint().next();next.value === 1;next.done === false;

next = inkPoint().next();next.value === 2;next.done === false;

next = inkPoint().next();next.value === 2;next.done === true;

50 / 76

var points = 0;function* inkPoint(){ while(points < 2){ points++; yield points; } return points;}

for (var p of inkPoint(){ console.log(p);}

51 / 76

Meta Programming

52 / 76

var machine = {};var pMachine = new Proxy(machine, { get : function(target, property){ console.log('Machine ' + property + ' : ' + value); return target[property]; }, set : function(target, property, value){ console.log('Machine has a new ' + property + ' : ' + value); target[property] = value; }});

pMachine.color = 'red';pMachine.color;pMachine.speed = 10;

53 / 76

getPrototypeOf (target)setPrototypeOf (target, prototype)isExtensible (target)preventExtensions (target)getOwnPropertyDescriptor (target, property)defineProperty (target, property, descriptor)has (target, prop)get (target, property, [receiver])set (target, property, value, [receiver])deleteProperty (target, property)enumerate (target)ownKeys (target)apply (target, receiver, args)construct (target, args)

54 / 76

var machine = {};Reflect.set(machine, 'color', 'red');Reflect.has(machine, 'color') === true;Reflect.get(machine, 'color') === 'red';

55 / 76

Reflect.get (target, name, [receiver])Reflect.set (target, name, value, [receiver])Reflect.has (target, name)Reflect.apply (target, receiver, args)Reflect.construct (target, args)Reflect.getOwnPropertyDescriptor (target, name)Reflect.defineProperty (target, name, desc)Reflect.getPrototypeOf (target)Reflect.setPrototypeOf (target, newProto)Reflect.deleteProperty (target, name)Reflect.enumerate (target)Reflect.preventExtensions (target)Reflect.isExtensible (target)Reflect.ownKeys (target)

56 / 76

var permanent = Symbol('permanent');var tattoo = { [permanent] : true, color : 'red'};

JSON.stringify(tattoo) === '{"color":"red"}';

57 / 76

Symbol.iteratorSymbol.toStringTagSymbol.toPrimitiveexhautive lists of Symbols

58 / 76

Class

59 / 76

Classes

class Tattoo { constructor(size, color){ this.size = size; this.color = color; }

toString(){ return 'Drawing a ' + this.size + ', ' + this.color + ' tattoo'; }}var t = new Tattoo('small', 'black');t.toString() === 'Drawing a small, black tattoo';

60 / 76

SubClasses

class DragonTattoo extends Tattoo { toString(){ return super() + ' of a dragon'; }}var t = new DragonTattoo('small', 'black');t.toString() === 'Drawing a small, black tattoo of a dragon';

61 / 76

Static methods

class PinupTattoo extends Tattoo { static representHuman() { return true; }}PinupTattoo.representHuman === true;

62 / 76

API

63 / 76

Number.EPSILON;Number.isInteger(Infinity) === false;Number.isNaN("NaN") === false;

64 / 76

Math.acosh(3) === 1.762747174039086;Math.hypot(3, 4) === 5;Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) === 2;

65 / 76

"tattoo".includes("tat") === true;"up-down-".repeat(2) === "up-down-up-down-";

66 / 76

0b111110111 === 503;0o767 === 503;

67 / 76

var tattoo = { motif : 'pin-up'};

Object.assign(tattoo, { color: 'red'});

tattoo.color === 'red';tattoo.motif === 'pin-up';

68 / 76

Array

Array.from(document.querySelectorAll('*')) // Returns a real ArrayArray.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior[0, 0, 0].fill(7, 1) // [0,7,7][1, 2, 3].find(x => x == 3) // 3[1, 2, 3].findIndex(x => x == 2) // 1[1, 2, 3, 4, 5].copyWithin(3, 0) // [1, 2, 3, 1, 2]["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]["a", "b", "c"].keys() // iterator 0, 1, 2["a", "b", "c"].values() // iterator "a", "b", "c"

69 / 76

Modules

70 / 76

// lib/machine.jsfunction start(){ return 'starting';}function stop(){ return 'stoping';}export start;export stop;

import * as machine from "lib/machine";machine.start() === 'starting';machine.stop() === 'stoping';

import {start, stop} from "lib/machine";start() === 'starting';stop() === 'stoping';

71 / 76

// lib/machine.jsvar machine = { start(){ return 'starting'; }, stop(){ return 'stoping'; }};export default machine;

import machine from "lib/machine";machine.start() === 'starting';machine.stop() === 'stoping';

72 / 76

// Dynamic loading – ‘System’ is default loaderSystem.import('lib/math').then(function(m) { alert("2π = " + m.sum(m.pi, m.pi));});

// Create execution sandboxes – new Loadersvar loader = new Loader({ global: fixup(window) // replace ‘console.log’});loader.eval("console.log('hello world!');");

// Directly manipulate module cacheSystem.get('jquery');System.set('jquery', Module({$: $})); // WARNING: not yet finalized

73 / 76

Tail calls

function factorial(n, acc = 1) { 'use strict'; if (n <= 1) return acc; return factorial(n - 1, n * acc);}

factorial(100000);

74 / 76

New Patterns

Default values

function tattoo({ size = 'small', color = 'black'} = {}) {

return ${size}, ${color};}console.log( tattoo({ size: 'medium'}) );

for-of

var map = new Map();map.set('color', 'red');//...

for( let [key, value] of map){ console.log(key); console.log(value);}

Many more75 / 76

Follow the dealer @kramp krampstudio.com github.com/krampstudio

76 / 76