ECMAScript 6

by Vincent Dupont

While42 meeting

8th July 2014

Plan• Ecma International

• ECMAScript

• JavaScript

• Examples

• Conclusion

• Questions

Ecma International

• European Computer Manufacturers Association

• Founded in 1961

• Standardize computer systems

ECMASCript

• Specification ECMA-262

• Scripting “client side”

• Implementations (JavaScript, JScript, ActionScript)

JavaScript• Brendan Eich (Netscape)

• Mocha, LiveScript

• 1995 (premiere version)

• 2009 version 5

• 2011 version 5.1

• Juin 2015 version 6

Multi paradigme

• Scripting

• Imperative

• Functional

• Oriente objet (Prototypage)

Constants

const PI = 3.141593

letscope problems?

// ES5var hello = 'while 42';{ var hello = 'world';}

console.log(hello); // return 'world'

// ES6let world = 'while 42';

{ // let solve block scoping let world = 'world';}

console.log(world); // return ‘while 42'

// ES5var fs = [];for (var i = 0; i < 5; i++) { fs.push(function() { console.log(i); })}

fs.forEach(function(f) { f(); // return 5});

// ES6fs = [];for (let j = 0; j < 5; j++) { fs.push(function() { console.log(j); })}

fs.forEach(function(f) { f(); // return 0 to 4});

Arrow// ES5var sayHello = function (who) { console.log('hello ' + who); };sayHello('while 42');

// ES6var sayHello = who => console.log('hello ' + who);sayHello('world');

var sayWhat = (say, what) => console.log(say + ' ' + what);sayWhat('je dis', 'bonjour');

Syntactic sugar?

var oldDeliveryBoy = { name: 'Vincent', deliver: function(msg, handler) { handler(msg); }, receive: function() { var that = this; this.deliver('Hello ', function(msg) { console.log(msg + that.name); }) }};

oldDeliveryBoy.receive();

var newDeliveryBoy = { name: 'Vincent', deliver: function(msg, handler) { handler(msg); }, receive: function() { this.deliver('Hello ', msg => console.log(msg + this.name)); }};

newDeliveryBoy.receive();

Default Parameter Valuesfunction greet(firstName = 'John', lastName = 'Smith') { console.log(firstName + ' ' + lastName);}

greet();greet('Paul');

var oldFnDefFnValue = function (fn = function () { console.log('complete old'); }) { fn();};

oldFnDefFnValue();

var newFnDefFnValue = (fn = () => console.log('complete new')) => fn();

newFnDefFnValue();

String templatesvar greeting = 'world';var template = `

hello ${greeting} crazy ${greeting}`;console.log(template);

var x = 1;var y = 2;var equation = `${ x } + ${ y } = ${ x + y }`;console.log(equation);

hello world crazy world

1 + 2 = 3

var parseString = (strings, ...values) => { console.log(strings); console.log(values); if (values[0] < 20) { values[1] = 'awake'; } else { values[1] = 'sleeping'; } return `${strings[0]}${values[0]}${strings[1]}${values[1]}`};

var templateResult = parseString`It's ${new Date().getHours()}, I'm ${""}`;console.log(templateResult);

[ 'It\'s ', ', I\'m ', '' ] [ 21, '' ]

It's 21, I'm sleeping

Enhanced object propertiesvar color = 'red';var speed = 100;function go() { console.log('vroom');}var action = 'start';

var car = { color, speed, go, horn() { console.log('honk honk'); }, [action]: function () { console.log('start'); }}; // same as : var car = {color: color, speed: speed};

console.log(car.color); // return redconsole.log(car.speed); // return 100car.go(); // return vroomcar.horn(); // return honk honkcar.start(); // return start

Spread operatorconsole.log([1, 2, 3]); // return [1, 2, 3]console.log(...[1, 2, 3]); // return 1 2 3

let first = [1, 2, 3];let second = [4, 5, 6];first.push(second);console.log(first); // return [1, 2, 3, [4, 5, 6]]

first = [1, 2, 3];second = [4, 5, 6];first.push(...second);console.log(first); // return [1, 2, 3, 4, 5, 6]

function addThreeThings(a, b, c) { return a + b + c;}

console.log(addThreeThings(...first)); // return 6

Destructuring assignment

var {firstName, lastName} = { // could also receive a function returning an object firstName: 'vincent', lastName: 'dupont'};

console.log(firstName);console.log(lastName);

var {firstName: prenom, lastName: nom} = { // could also receive a function returning an object firstName: 'vincent', lastName: 'dupont'};

console.log(prenom);console.log(nom);

var [one,,,last] = [1, 2, 3, 4];console.log(one); // return 1console.log(last); // return 4

var beatles = [ {firstName: 'John', lastName: 'Lennon'}, {firstName: 'Paul', lastName: 'McCartney'}, {firstName: 'Ringo', lastName: 'Starr'}, {firstName: 'Georges', lastName: 'Harrison'}];

beatles.forEach(({firstName}) => console.log(firstName));

function logLastName({lastName}) { console.log(lastName); }

var [, paul] = beatles;

logLastName(paul); // return McCartney

Array comprehension

var nums = [1, 2, 3, 4, 5];var aboveTwo = [num for(num of nums) if(num > 2)];console.log(aboveTwo); // return [3, 4, 5]

Generatorsfunction* gen() { console.log(`You called 'next()'`); yield 'hello'; console.log(`You called 'next()' again`); yield 'world';}

let genResult = gen();console.log(genResult);let next = genResult.next();console.log(next);let done = genResult.next();console.log(done);

for (let output of gen()) { console.log(output);}

Build things through iteration process

function* gen2() { let temp = yield 'how'; temp = yield temp + 'is'; yield temp + 'possible?'; } let gen2result = gen2(); console.log(gen2result.next().value); console.log(gen2result.next(' the heck ').value); console.log(gen2result.next(' this crazy ').value);

how the heck is

this crazy possible?

work with infinite sequence

function* seq() { let x = 0; let y = 0; while (true) { yield x + y; x += 1; y += 2; }}var seqGen = seq();console.log(seqGen.next().value);console.log(seqGen.next().value);console.log(seqGen.next().value);

Classes// ES5var Shape = function (id, x, y) { this.id = id; this.move(x, y);};Shape.prototype.move = function (x, y) { this.x = x; this.y = y;};

// ES6class Shape { constructor (id, x, y) { this.id = id this.move(x, y) } move (x, y) { this.x = x this.y = y }}

Class Inheritance// ES5var Rectangle = function (id, x, y, width, height) { Shape.call(this, id, x, y); this.width = width; this.height = height;};

Rectangle.prototype = Object.create(Shape.prototype);Rectangle.prototype.constructor = Rectangle;var Circle = function (id, x, y, radius) { Shape.call(this, id, x, y); this.radius = radius;};Circle.prototype = Object.create(Shape.prototype);Circle.prototype.constructor = Circle;

// ES6class Rectangle extends Shape { constructor (id, x, y, width, height) { super(id, x, y) this.width = width this.height = height }}class Circle extends Shape { constructor (id, x, y, radius) { super(id, x, y) this.radius = radius }}

Binary and Octal Literals

// ES60b111110111 === 503 // true0o767 === 503 // true

// ES5parseInt("111110111", 2) === 503;parseInt("767", 8) === 503;0767 === 503; // only in non-strict, backward compatibility mode

Meta-Programminglet target = { foo: "Welcome, foo"}let proxy = new Proxy(target, { get (receiver, name) { return name in receiver ? receiver[name] : `Hello, ${name}` }})proxy.foo === "Welcome, foo"proxy.world === "Hello, world"

Proxy

let obj = { a: 1 }Object.defineProperty(obj, "b", { value: 2 })obj[Symbol("c")] = 3Reflect.ownKeys(obj) // [ "a", "b", Symbol(c) ]

Reflection

Some more

• Typed arrays

• Promises

• Modules improvement

Conclusion

Some very good features… but not only :)

?

References

• https://egghead.io

• https://github.com/lukehoban/es6features

• http://es6-features.org/

• https://en.wikipedia.org/wiki/ECMAScript