Talk given at JsDay (Verona, Italy) - May 2014

1. Sebastiano Armeli
@sebarmeli
http://courtreportingnyc.com/wp-content/uploads/2013/10/future-of-court-reporting.jpg

2. @sebarmeli
Sebastiano Armeli

3. ES6

4. History
1995
1996
1997
1998
1999
2000
2003
(May) B. Eich invented Mocha
(Dec) LiveScript renamed to JavaScript
JSScript
(June) ECMA-262 Ed.1!
! by TC39 committee
ECMA-262 Ed.2
ECMA-262 Ed.3
ECMA-262 Ed.4 started
ECMA-262 Ed.4 abandoned
(Sep) Mocha renamed to LiveScript

5. History
2005
2007
2008
2009
2011
2013
2014
ES 4 again!
(Adobe, Mozilla,!
Google)!
ES 3.1 !
(Microsoft, Yahoo)!
beginning
ES 5 spec finalized
(June) ECMA-262 Ed.5
(June) ES 6
proposals freeze
(Dec) ECMA-262 Ed.6 target release
(27th April) latest spec draft
(July) Agreement: ES3.1 & ES-Harmony!
!
ES3.1 becomes ES5

6. ECMA-262
TC39
ES 4
ES-Harmony
ES.Next
ES 6
ECMA
ES 7
es-discuss

7. ES-Harmony Proposal
ES 6 Candidate
ECMA-262 Ed.6 standardized
ES 6 Specification Draft
TC39 Process
Strawman
Proposal

8. Generators & Iteration
Summary
Functions
Collections
Modularity
Scoping / Calling
API improvements
Proxies

9. Generators & Iteration
Summary
Functions
Collections
Modularity
Scoping / Calling
API improvements
Proxies

10. (Fat) arrow function
var y = (x) => x + 1 var y = function(x) {
return x + 1;
}
ES6 ES5

11. (Fat) arrow function
var y = (x) => x + 1 var y = function(x) {
return x + 1;
}
ES6 ES5
No constructor
Syntax sugar
Lexical `this` binding

12. (Fat) arrow function
var y = (x) => x + 1 var y = function(x) {
return x + 1;
}
ES6 ES5
No constructor
Syntax sugar
Lexical `this` binding

13. (Fat) arrow function
var y = (x) => x + 1 var y = function(x) {
return x + 1;
}
ES6 ES5
No constructor
Syntax sugar
Lexical `this` binding

14. let x = (x) =>
{return x + 1}
var x = function(x) {
return x + 1;
}
let x = (x, y) =>
({
x: x,
y: y
})
var x = function(x, y) {
return {
x: x,
y: y
};
}
ES6 ES5

15. let map = words =>
words.map((w) => w.length);
var map = function(words) {
return words.map(function(w) {
return w.length;
}
}
ES6
ES5
map([‘sea’, ‘beach’, ‘do’]); // [3,5,2]

16. var obj = {
doIt: function(){},
handle: function(){
document.addEventListener(‘click’, function(e) {
this.doIt();
}.bind(this));
}
}
ES5
var obj = {
doIt: function(){},
handle: function(){
var that = this;
document.addEventListener(‘click’, function(e) {
that.doIt();
});
}
}
ES3

17. var obj = {
doIt: function(){},
handle: function(){
document.addEventListener(‘click’,
(e) => this.doIt());
}
}
ES6

18. Object.getPrototypeOf(() => {})

19. Object.getPrototypeOf(() => {})
Function.prototype

20. When to use
‘function’ ?

21. Constructors
Generators
Methods in obj

22. Generators & Iteration
Summary
Functions
Collections
Modularity
Scoping & Calling
API improvements
Proxies

23. Block Scoping
Each BLOCK has got its lexical environment
let/const bind variables to the lexical environment
Variables declared with let/const are NOT hoisted

24. var vs let
(function() {
console.log(y) // “undefined”
if (true) {
var y = “value”;
}
console.log(y) // “value”
}());

25. var vs let
(function() {
if (true) {
let y = “value”;
}
console.log(y) // ERROR!!
}());
(function() {
console.log(y) // “undefined”
if (true) {
var y = “value”;
}
console.log(y) // “value”
}());

26. const
(function() {
const X;
X = “foo”; // ERROR: x unitialized
}());
(function() {
const X = “foo”;
X = “foo2”; // ERROR: x is read-only
}());

27. Block functions
if (true) {
function fn () {}
}
!
fn(); // ERROR!

28. Destructing array
var [x,y] = [‘a’, ‘b’];
!
console.log(x); // ‘a’
!
console.log(y); // ‘b’
!
!
var [x,y] = [y, x];
!
console.log(x); // ‘b’

29. Destructing object
var obj = {width: 50, height: 100};
!
var {width, height} = obj;
!
console.log(width); // 50

30. Destructing
multiple return value
var fn = function(){
return [“50”, “100”];
}
!
var [width, height] = fn();
!
console.log(width); //50
console.log(height); //100

31. Default values
function(foo) {
foo = foo || “a”;
}

32. Default values
function(foo) {
foo = foo || “a”;
}
function(foo = “a”) {}

33. function fn(…args) {
console.log(args); //[“a”, “b”, “c”]
args.forEach(function(arg) {
console.log(arg);
};
}
!
fn(“a”, “b”, “c”);
!
// a
// b
// c
Rest parameters

34. Rest parameters
function fn(a, …args) {
console.log(args); //[“b”, “c”]
args.forEach(function(arg) {
console.log(arg);
};
}
!
fn(“a”, “b”, “c”);
!
// b
// c

35. Spread operator
function fn(a, b, c) {}
!
var array = [“A”, “B”, “C”];
fn.apply(null, array);

36. function fn(a, b, c) {}
!
var array = [“A”, “B”, “C”];
fn.apply(null, array);
fn(…array);
Spread operator

37. function fn(a, b, c) {
var array = Array.prototype.
slice.apply(arguments);
}
Spread operator

38. function fn(a, b, c) {
var array = Array.prototype.
slice.apply(arguments);
var array = […arguments];
}
Spread operator

39. Generators & Iteration
Summary
Functions
Collections
Modularity
Scoping / Calling
API improvements
Proxies

40. for-of
for-of loop on ‘iterables’
Arrays/Sets/Maps are ’iterables’
for-in limitations

41. Iterable
{ iterator: function() -> iterator }
{ next: function() -> any }
Iterators

42. for-of
var array = [“a”, “b”, “c”];
!
for (let el of array) {
console.log(el);
}
!
// “a”
// “b”
// “c”

43. Array comprehension
var array = [1, 2, 11, 20];
!
var array_c = [x (for x of
array) (if x > 10)];
!
// [11, 20]

44. function* g() {
yield “a”;
yield “b”;
}
Generator
var generator = g();
generator ‘constructor’
generator.next(); //{ value: “a”, done: false}
generator.next(); //{ value: “b”, done: false}
generator.next(); //{ value: undefined,
done: true}

45. !
function* g() {
yield “a”;
var retVal = yield “b”;
return retVal;
}
var generator = g();
generator.next().value; //“a”
generator.next().value; //“b”
generator.next(“c”).value; //“c”

46. !
function* asyncFn() {
var data = yield getUser();
doSomethingElse(data);
}
function run(genFunction) {
var generator = genFunction();
generator.next().value.then(function(val){
generator.next(val);
}, function(err) {
generator.throw(err);
});
}
run(asyncFn);
Promise

47. for (let el of generator) {
console.log(el);
}
Generators are iterables

48. Generators & Iteration
Summary
Functions
Collections
Modularity
Scoping / Calling
API improvements
Proxies

49. Set
Set of values - NO duplicates
Different type of values
add(key)/ has(key) / delete(key)
entries() -> Iterator

50. let countries = new Set();
countries.add(“US”);
countries.add(“Italy”);
countries.add(“US”);
!
countries.values().next().value;
// “US”
!
countries.values().next().value;
// “Italy”
!
for(let country of countries) {
console.log(country);
}

51. Map
key-value
Different type of values
Object can be keys
get(key)/ has(key) / set(key,val)

52. let dict = new Map();
dict.set(“A”, 1);
dict.set(“B”, 2);
!
dict.get(“A”); // “1”
dict.delete(“B”);
!
for(let w of dict.keys()) {
console.log(w); // “A”
}
!
for(let w of dict.values()) {
console.log(w); // “A”
}

53. WeakMap
Avoid memory leaks
Reference to the key obj held weakly
Key must be an object
No iterators methods

54. Generators & Iteration
Summary
Functions
Collections
Modularity
Scoping / Calling
API improvements
Proxies

55. Module
!
module “ads” {
export function register(ad) {
return ad;
}
}
!
import {register} from “ads”;
var app = {
doIt: function() {
register({});
}
}
export app;
app.js
lib/ads.js

56. !
module “widget” {…}
module “widget/button” {…}
module “widget/text” {…}
!
!
import ‘lib/ad’ as c;
import { meth as method } from ‘a';
!
!
export default class {}; // Ad.js
import Ad from ‘ad'; // app.js

57. Loader API
System.load('http://json.org/modules/json2.js',
function(JSON) {
alert(JSON.stringify([0, {a: true}]));
});
System.import
Configure module loading

58. Class / Subclass!
class Animal {
constructor(name) {
this.name = name;
}
toString() {
return “This is: ” + this.name;
}
}
class Cat extends Animal {
constructor(name, ownerName) {
super.constructor(name);
this.ownerName = ownerName;
}
!
toString() {
return super.toString() + “ owned by ” +
this.ownerName;
}
}

59. !
function Animal(name) {
this.name = name;
}
!
Animal.prototype.toString = function() {
return “This is: ” + this.name;
};
!
function Cat(name, ownerName) {
Animal.call(this, name);
this.ownerName = ownerName;
}
!
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;
Cat.prototype.parent = Animal;
!
Cat.prototype.toString = function() {
return Animal.prototype.toString.call(this) + “ owned by ”
+ this.ownerName;
}

60. Generators & Iteration
Summary
Functions
Collections
Modularity
Scoping / Calling
API improvements
Proxies

61. String methods
startsWith()
endsWith()
contains()
…

62. Number methods
Number.isInteger(num)
Number.isNaN(num)
Number.isFinite(num)
…

63. Array methods
var divs = document.querySelectorAll("div");
Array.from(divs);
!
// [<div></div>, </div></div>]
!
Array.of(10, 11);
!
// [10, 11]
!
!

64. var array = [“a”, “b”, “c”];
!
for (let [index, el] of array.entries()) {
console.log(index, el); // 0 “a”
// 1 “b”
// 2 “c”
}
!
for (let index of array.keys()) {
console.log(index);
}
!
for (let el of array.values()) {
console.log(el);
}
!

65. Object methods
Object.setPrototypeOf(obj, proto)
Object.assign(obj, mixin)
Object.is(value1, value2)

66. var object = {
method() {
return “a”;
}
}
object.method(); // “a”
!

67. var object = {
method() {
return “a”;
}
}
object.method(); // “a”
!
function f(x, y) { return {x: x, y: y};}
function f(x, y) { return {x, y}; }
=

68. Math methods
Math.log2()
Math.log10()
Math.sinh()
Math.cosh()
…

69. Generators & Iteration
Summary
Functions
Collections
Modularity
Scoping
API improvements
Proxies

70. Proxies
var obj = {num: 1};
!
obj = Proxy(obj, {
set: function (target, property, value) {
target[property] = value + 1;
}
});
!
obj.num = 2 // [[Set]]
console.log(obj.num); // 3

71. Proxies
function createDefensiveObject(target) {
return new Proxy(target, {
get: function(target, property) {
if (property in target) {
return target[property];
} else {
throw new ReferenceError();
}
}
});
}
!
var obj = createDefensiveObject({name: “Seb”});
console.log(obj.lastname); //ReferenceError
http://www.nczonline.net/blog/2014/04/22/creating-defensive-objects-with-es6-proxies/

72. Generators & Iteration
Recap
Functions
Collections
Modularity
Scoping / Calling
API improvements
Proxies

73. Promises
Symbols
Generator Expressions
Quasi-literals (template-strings)

74. Tools
Traceur compiler (Google)
es6-transpiler
es6-module-transpiler (Square)
es6-shim
defs.js

75. http://wiki.ecmascript.org/doku.php
https://people.mozilla.org/~jorendorff/es6-draft.html
http://kangax.github.io/compat-table/es6/
http://esdiscuss.org/
@sebarmeli
Sebastiano Armeli