The document summarizes the key features of ECMAScript 6 (ES6), the 2015 version of JavaScript. Some of the major additions covered include let and const for block scoping, arrow functions, template strings, enhanced object properties, the spread operator, destructuring assignments, classes and inheritance, generators, and proxies. ES6 aims to make JavaScript a more robust and feature-rich programming language.

1. ECMAScript 6
by Vincent Dupont
While42 meeting
8th July 2014

2. Plan
• Ecma International
• ECMAScript
• JavaScript
• Examples
• Conclusion
• Questions

3. Ecma International
• European Computer Manufacturers Association
• Founded in 1961
• Standardize computer systems

4. ECMASCript
• Specification ECMA-262
• Scripting “client side”
• Implementations (JavaScript, JScript, ActionScript)

5. JavaScript
• Brendan Eich (Netscape)
• Mocha, LiveScript
• 1995 (premiere version)
• 2009 version 5
• 2011 version 5.1
• Juin 2015 version 6

6. Multi paradigme
• Scripting
• Imperative
• Functional
• Oriente objet (Prototypage)

7. Constants
const PI = 3.141593

8. 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'

9. // 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
});

10. 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?

11. 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();

12. 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();

13. 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

14. 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

15. 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

16. 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

17. 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

18. 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

19. 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]

20. 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);
}

21. 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?

22. 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);

23. 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
}
}

24. 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
}
}

25. 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

26. 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) ]
Reflection

27. Some more
• Typed arrays
• Promises
• Modules improvement

28. Conclusion
Some very good features…
but not only :)

29. ?

30. References
• https://egghead.io
• https://github.com/lukehoban/es6features
• http://es6-features.org/
• https://en.wikipedia.org/wiki/ECMAScript