ECMAScript 6 new features

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
• Speciﬁcation 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)

let
scope problems?
// ES5
var hello = 'while 42';
{
var hello = 'world';
}
console.log(hello); // return 'world'
// ES6
let world = 'while 42';
{
// let solve block scoping
let world = 'world';
}
console.log(world); // return ‘while 42'

// ES5
var fs = [];
for (var i = 0; i < 5; i++) {
fs.push(function() {
console.log(i);
})
}
fs.forEach(function(f) {
f(); // return 5
});
// ES6
fs = [];
for (let j = 0; j < 5; j++) {
fs.push(function() {
console.log(j);
})
}
fs.forEach(function(f) {
f(); // return 0 to 4
});

Arrow
// ES5
var sayHello = function (who) { console.log('hello ' + who); };
sayHello('while 42');
// ES6
var sayHello = who => console.log('hello ' + who);
sayHello('world');
var sayWhat = (say, what) => console.log(say + ' ' + what);
sayWhat('je dis', 'bonjour');
Syntactic sugar?

Default Parameter Values
function 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 templates
var 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

Enhanced object properties
var 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 red
console.log(car.speed); // return 100
car.go(); // return vroom
car.horn(); // return honk honk
car.start(); // return start

Spread operator
console.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 1
console.log(last); // return 4

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]

Generators
function* 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 inﬁnite 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);

Classes
// ES5
var Shape = function (id, x, y) {
this.id = id;
this.move(x, y);
};
Shape.prototype.move = function (x, y) {
this.x = x;
this.y = y;
};
// ES6
class Shape {
constructor (id, x, y) {
this.id = id
this.move(x, y)
}
move (x, y) {
this.x = x
this.y = y
}
}

Class Inheritance
// ES5
var 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;
// ES6
class 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
// ES6
0b111110111 === 503 // true
0o767 === 503 // true
// ES5
parseInt("111110111", 2) === 503;
parseInt("767", 8) === 503;
0767 === 503; // only in non-strict, backward compatibility mode

Meta-Programming
let 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")] = 3
Reflect.ownKeys(obj) // [ "a", "b", Symbol(c) ]
Reﬂection

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

ECMAScript 6 new features

More Related Content

What's hot

Similar to ECMAScript 6 new features

Recently uploaded

ECMAScript 6 new features