Learn about upcoming features of ECMAScript 6 that you can try out today!

1. Get Ready For
The Future. Now
ECMAScript 6
@szafranek

2. July 2008
ES4
Dec 1999
ES3

3. Dec 2013Dec 2009
ES5 ES6

4. ES6 aka Harmony

5. Backwards
compatibility

6. No “bad parts”
are removed

7. “Better carrots”

8. Superset of ES 5
strict mode

9. Block scope
5

10. hoisting
var i = 1;
function b() {
i = 10;
for (var i = 0; i < 3; i++) {
//...
}
}
b();
console.log(i);
1

11. hoisting
var i = 1;
function b() {
i = 10;
for (var i = 0; i < 3; i++) {
//...
}
}
b();
console.log(i); // 1
1

12. let

13. letlet

14. letlet
•Block scope

15. letlet
•Block scope
•No hoisting

16. letlet
•Block scope
•No hoisting
•Fails fast

17. letlet
•Block scope
•No hoisting
•Fails fast
= better var

18. var i = 1;
function b() {
i = 10;
for (let i = 0; i < 3; i++) {
//...
}
}
b();
console.log(i); // 10

19. var things = {};
for (var i = 0; i < 3; i++) {
things["fun" + i] = function() {
console.log(i);
};
}
things["fun0"](); // 3
things["fun1"](); // 3
things["fun2"](); // 3

20. var things = {};
for (var i = 0; i < 3; i++) {
things["fun" + i] = (function(index) {
return function() {
console.log(index);
};
}(i));
}
things["fun0"](); // 0
things["fun1"](); // 1
things["fun2"](); // 2

21. var things = {};
for (var i = 0; i < 3; i++) {
let index = i;
things["fun" + i] = function() {
console.log(index);
};
}
things["fun0"](); // 0
things["fun1"](); // 1
things["fun2"](); // 2

22. constconst
const pi = Math.PI;
// ...
pi = 10; // SyntaxError

23. const
function process() {
const factor = 10;
let result = 5;
result *= 3;
// thousands lines of code...
return result * factor;
}
Most variables don't change over time.
Using const helps spot unwanted side effects.

24. constconst = better let
function process() {
const factor = 10;
let result = 5;
result *= 3;
// thousands lines of code...
return result * factor;
}
Most variables don't change over time.
Using const helps spot unwanted side effects.

25. “I am a full
const nazi
nowadays”
John Carmack: "I am a full const nazi nowadays, and I chide any programmer that doesn’t
const every variable and parameter that can be."
http://www.phoronix.com/scan.php?page=news_item&px=MTI3NDQ

26. Use let and const today
defs.js
http://blog.lassus.se/2013/05/defsjs.html

27. Destructing
10

28. let point = [3, 7];
let [x, y] = point;
console.log(x, y);

29. let primary = "red", secondary = "blue";
[secondary, primary] = [primary, secondary];
console.log(primary, secondary); // blue red

30. let point = [3, 7, 5];
let [, y] = point;
console.log(y); // 7
Selecting only elements you want

31. let coords = {long: 11, lat: 45};
let {long, lat} = coords;
console.log(long, lat); // 11 45
Destructing objects

32. let coords = {long: 11, lat: 45};
let {long: longitude,
lat: latitude} = coords;
console.log(longitude, latitude); // 11 45
Mapping to custom names

33. Spread operator
let numbers = [3, 10, 7];
Math.max(...numbers); // 10

34. let nodeArray = [...document.querySelectorAll("p")];
var nodeList = document.querySelectorAll("p");
var nodeArray =[].slice.apply(nodeList);
ES6
ES5

35. Rest parameters
function tax(rate, ...values) {
//...
}
tax(0.03, 50, 78, 100); // [1.5, 2.34, 3]
15

36. function tax(rate, ...values) {
let taxedValues = [];
for (let value of values) {
taxedValues.push(rate * value);
}
return taxedValues;
}
function tax() {
var args = Array.prototype.slice.call(arguments);
var rate = args[0];
var values = args.splice(1);
var taxedValues = [];
for (var i = 0; i < values.length; i++) {
var value = values[i];
taxedValues.push(rate * value);
};
return taxedValues;
}
ES5
ES6

37. function tax(rate, ...values) {
let taxedValues = [];
for (let value of values) {
taxedValues.push(rate * value);
}
return taxedValues;
}
function tax() {
var args = Array.prototype.slice.call(arguments);
var rate = args[0];
var values = args.splice(1);
var taxedValues = [];
for (var i = 0; i < values.length; i++) {
var value = values[i];
taxedValues.push(rate * value);
};
return taxedValues;
}
ES5
ES6

38. Iterators
let elements = ["one", "two", "three"];
elements.customProperty = "Won't show up";
for (let element of elements) {
console.log(element);
}
// "one" "two" "three"

39. Object.prototype.dontDoIt = "bwahaha";
var obj = {name: "Chris", surname: "Szafranek"};
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(key, obj[key]);
}
}
Object.prototype.dontDoIt = "bwahaha";
var obj = {name: "Chris", surname: "Szafranek"};
import items from @"iter";
for (let [key, value] of items(obj) {
console.log(key, value);
}
ES6
ES5

40. built-in iterators
keys(obj);
values(obj);
items(obj);
allKeys(obj);
allValues(obj);
allItems(obj);

41. Object.prototype.dontDoIt = "bwahaha";
var obj = {name: "Chris", surname: "Szafranek"};
import items from @"iter";
for (let [key, value] of items(obj) {
console.log(key, value);
}

42. Modules
in progress!
18

43. module Map {
export function zoom(coords) {
console.log("zooming to ", coords);
};
export function pan(coords) {
console.log("panning to ", coords);
};
export var defaultMode = "satellite";
};
import {zoom, defaultMode} from Map;
zoom({lat: 30, long: 10});

44. module loaders
Loader.load('map.js', function (map) {
map.zoom({lat: 30, long: 10});
}, errorCallback);

45. loader pipeline
Loader.normalize();
Loader.resolve();
Loader.fetch();
Loader.translate();
Loader.link();
Default pipeline can be customized.
In translation phase CoffeeScript can be translated to JS.
In link phase AMD or node modules can be imported: such modules can be interoperable with
ES6 modules.
https://gist.github.com/wycats/51c96e3adcdb3a68cbc3

46. loader pipeline
Loader.normalize();
Loader.resolve();
Loader.fetch();
Loader.translate();
Loader.link();
// CoffeeScript!
Default pipeline can be customized.
In translation phase CoffeeScript can be translated to JS.
In link phase AMD or node modules can be imported: such modules can be interoperable with
ES6 modules.
https://gist.github.com/wycats/51c96e3adcdb3a68cbc3

47. loader pipeline
Loader.normalize();
Loader.resolve();
Loader.fetch();
Loader.translate();
Loader.link();
// CoffeeScript!
// AMD, Common.js!
Default pipeline can be customized.
In translation phase CoffeeScript can be translated to JS.
In link phase AMD or node modules can be imported: such modules can be interoperable with
ES6 modules.
https://gist.github.com/wycats/51c96e3adcdb3a68cbc3

48. function tax(rate, ...values) {
let taxedValues = [];
for (let value of values) {
taxedValues.push(rate * value);
}
return taxedValues;
}

49. Arrow functions
function tax(rate, ...values) {
return values.map(value => rate * value);
}

50. lexical this
function Greeter() {
this.name = "jsDay";
this.hello = function() {
console.log("Hello " + this.name);
}
}
var greet = new Greeter();
setTimeout(greet.hello.bind(greet), 1000);
ES5

51. function Greeter() {
this.name = "jsDay";
this.hello = function() {
console.log("Hello " + this.name);
}
}
var greet = new Greeter();
setTimeout(greet.hello.bind(greet), 1000);
ES5
function Greeter() {
this.name = "jsDay";
this.hello = () => console.log("Hello " + this.name)
}
var greet = new Greeter();
setTimeout(greet.hello, 1000);
ES6

52. Last but not least...
20

54. Classes

55. function Vehicle(name) {
this.name = name;
}
Vehicle.prototype.drive = function () {
return "Wrooom";
};
// Inheritance
function Car(name, maxSpeed) {
Vehicle.call(this, name);
this.maxSpeed = maxSpeed;
}
Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car;
Car.prototype.drive = function () {
return Vehicle.prototype.drive.call(this) + " at " +
this.maxSpeed;
};

56. class Vehicle {
constructor(name) {
this.name = name;
}
drive() {
return "Wrooom";
}
}
// Inheritance
class Car extends Vehicle {
constructor(name, maxSpeed) {
super.constructor(name);
this.maxSpeed = maxSpeed;
}
drive() {
return super.drive() + " at " + this.maxSpeed;
}
}

58. Classes
Destructing
Block scope
Modules
Iterators
Spread operator
Rest parameters
Arrow functions

60. Maps
Promises WeakMaps
SetsUnicodeProxies
Binary data
Tail callsGenerators
Template strings
API improvements
Comprehensions

61. ES6 today

62. Firefox Nightly*
Some features are not implemented as in the recent version of the spec, e.g. let.

63. Chrome Canary
about:flags

64. node --harmony

65. Thank you!
@szafranek
www.2ality.com
www.brendaneich.com
kangax.github.io/es5-compat-table/es6

66. Photo credits
QuakeCon
cloud2013
Monty Python
iluvgadgets
1