What’s new in ECMAScript 6.0

9. var es = []; for (var i = 0; i < 10; i++) { es[i] = function () { console.log("i = " + i); }; } es[6](); // i = 10 var es = []; for (var i = 0; i < 10; i++) { let c = i; es[i] = function () { console.log("i = " + c); }; } es[6](); // i = 6 © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

10. const PI = 3.14159; // Can't re-assign PI = 3; console.log(PI); // 3.14159 // Can't re-initialize const PI = 4; console.log(PI); // 3.14159 // Can't re-declare var PI = 4; console.log(PI); // 3.14159 © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

11. var name = "Eyal"; var age = 43; var user = { 'name': name, 'age': age }; var name = "Eyal"; var age = 43; var user = { name, age }; © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

12. function Person(name, age){ this.name = name; this.age = age; } Person.prototype.sayName = function(){ alert(this.name); }; Person.prototype.getOlder = function(years){ this.age += years; }; function Person(name, age){ this.name = name; this.age = age; } Person.prototype = { sayName(){ © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com alert(this.name); }, getOlder (years){ this.age += years; } };

13. function equinox2() { return { date: 20, month: "March", year: 2013, time: { hour: 11, minute: 2 } }; } var { date: d, month: m, time : { hour: h} } = equinox2(); // 20 March at 11 console.log(d + “ ” + m + " at " + h); © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

14. var [start, end] = ["earth", "moon"] // initialize console.log(start + " => " + end); // earth => moon [start, end] = [end, start] // swapping console.log(start + " => " + end); // moon => earth function equinox() { return [20, "March", 2013, 11, 02]; } var [date, month, , ,] = equinox(); console.log( date +" "+ month); // 20 March © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

18. // defining rest parameters with 3 dot syntax function push(array, ...items) { items.forEach(function(item) { array.push(item); console.log( item ); }); } // 1 fixed + 3 variable parameters var planets = []; push(planets, "Mercury", "Venus", "Earth"); © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

19. // Spread operator "...weblink" function createURL (comment, path, protocol, subdomain, domain, tld) { // ... } var weblink = ["ht/w/abc.html", "http", "info", "cern", "ch"], comment = "World's first Website"; createURL( comment, ...weblink ); Spread operator © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

21. var f= x => x; var f= (n1,n2) => n1+n2; var f= id => ({id:id,name:"T"}); var f = function(x) { © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com return x; } var f = function(n1,n2) { return n1 + n2; } var f = function(id) { return { id: id, name: "T" }; }

22. var PageHandler = { id: "123456", init: function() { document.addEventListener("click", function(event) { this.doSomething(event.type); // error }, false); }, Global doSomething: function(type) { console.log("Handling " + type + " for " + this.id); } }; © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

23. var PageHandler = { id: "123456", init: function() { document.addEventListener("click", (function(event) { this.doSomething(event.type); }).bind(this), false); }, doSomething: function(type) { console.log("Handling " + type + " for " + this.id); } } © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

24. var PageHandler = { id: "123456", init: function() { document.addEventListener("click", event => this.doSomething(event.type), false); }, doSomething: function(type) { console.log("Handling "+type+" for " + this.id); } }; © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

28. class Person { constructor(name, age){ public name = name; public age = age; } sayName(){ alert(this.name); } getOlder(years){ this.age += years; } } function Person(name, age){ this.name = name; this.age = age; } Person.prototype.sayName = function(){ alert(this.name); }; Person.prototype.getOlder = function(years){ this.age += years; }; © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

29. class Person { constructor(name, age){ public name = name; private age = age; } sayName(){ alert(this.name); } getOlder(years){ private(this).age+= years; } } © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

30. class Person { constructor(name, age){ private innerTitle = ""; // getter and setter for title property. get title() { return innerTitle; } set title(value){ innerTitle = value; } } } © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

31. class Answer{ constructor(value){ this._val = value; } get(){ return this._val; } } class FirmAnswer extends Answer { constructor(value){ super(value); } get(){ return super() + "!!"; } } © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

32. class Answer{ constructor(value){ this._val = value; } get(){ return this._val; } } class FirmAnswer extends Answer { constructor(value){ super(value); } get(){ return super() + "!!"; } } // ES 5.0 function FirmAnswer(name, age){ Answer.call(this, name, age); } FirmAnswer.prototype = new Answer(); © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

33. var base = { sayName : function(){ alert(this.name); }, getOlder: function(years){ this.age += years; } }; class Employee prototype base { constructor(name, age){ public name = name; public age = age; } } Employee.prototype = Object.create(base.prototype); © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

34. class Answer{ constructor(value){ this._val = value; } get(){ return this._val; } } class FirmAnswer prototype Answer { constructor(value){ super(value); } get(){ return super() + "!!"; } } © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

35. function Answer(value) { this._val = value; } Answer.prototype.get = function fn1() { return this._val; }; // Derive class function FirmAnswer(value) { Answer.call(this, value); } FirmAnswer.prototype = Object.create(Answer.prototype); FirmAnswer.prototype.constructor = FirmAnswer; FirmAnswer.prototype.get = function fn2() { return Answer.prototype.get.call(this) + "!!"; }; © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

37. var engines = new Set(); // create new Set engines.add("Webkit"); engines.add("Hippo"); engines.add("Hippo"); // note that Hippo is added twice console.log(engines.has("Hippo")); // true console.log(engines.has("Indigo")); // false engines.delete("Hippo"); // delete item console.log(engines.has("Hippo")); // false © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

38. var es6 = new Map(); // create new Map es6.set(262, "standard"); // key is number es6.set(undefined, "nah"); // key is undefined var hello = function () { console.log("hello"); }; es6.set(hello, "Hello ES6!"); // key is function console.log( es6.has("edition")); // true © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

39. var key = {}, map = new WeakMap(); map.set(key, "Hello!"); // Dereference the key so the value is also removed key = null; © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

41. //original array var numbers = [0,1,2,3,4,5,6,7,8,9,10]; //just copy all items into a new array var duplicate = [i for each (i in numbers)]; //get just the even numbers var evens = [i for each (i in numbers) if (i % 2 == 0)]; //multiply every value by 2 var doubled = [i*2 for each (i in numbers)]; //multiply every odd number by 3 var tripledOdds = [ i*3 for each (i in numbers) if ( i % 2 > 0 ) ]; © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

42. var Size = new StructType( { width: uint32, height: uint32 }); © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com uint8 , uint16 , uint32 int8 , int16 , int32 float32, float64

43. var Size = new StructType({width:uint32, height:uint32 }); var SizeArray = new ArrayType(Size, 2); Array Type © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com Array Size

45. let arr = [ "blue", "green" ]; arr.notAnIndex = 123; Array.prototype.protoProp = 456; for (k in arr) console.log(k); © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com Print: > 0 > 1 > notAnIndex > protoProp

46. var colors = new Set(['rojo', 'amarillo', 'azul']); colors.language = 'es'; // add an expando property for (let name in colors) alert(name); // "language" (the property name) for (let word of colors) alert(word); // "rojo", "amarillo", "azul" (the data) © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

48. import items from "@iter"; let obj = { first: "Jane", last: "Doe" }; for ( let [k,v] of items(obj) ) { console.log( k + " = " + v ); } Output: first = Jane last = Doe © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

49. function Range(low, high){ this.low = low; this.high = high; } Range.prototype.__iterator__ = function () { return new RangeIterator(this); }; function RangeIterator(range) { this.range = range; this.current = this.range.low; } RangeIterator.prototype.next = function () { if (this.current > this.range.high) throw StopIteration; else return this.current++; }; © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

50. Function* simpleGenerator(){ yield "Hello"; yield "World"; for (var i = 0; i < 2; i++) yield i; } var g = simpleGenerator(); print(g.next()); // "Hello" print(g.next()); // "World" print(g.next()); // 0 print(g.next()); // 1 © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

51. function Range(low, high){ this.low = low; this.high = high; } Range.prototype.__iterator__ = function(){ for (var i = this.low; i <= this.high; i++) yield i; }; var range = new Range(3, 5); for (var i in range) print(i); // 3, 4, 5 in sequence © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

53. function fibonacci(){ var fn1 = 1; var fn2 = 1; while (1){ var current = fn2; fn2 = fn1; fn1 = fn1 + current; var reset = yield current; if (reset){ fn1 = 1; fn2 = 1; } } } var fib = fibonacci(); print(fib.next()); // 1 print(fib.next()); // 1 print(fib.next()); // 2 print(fib.send(true)); // 1 print(fib.next()); // 1 print(fib.next()); // 2 © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

57. module E4D { //export this stuff export let myobj = {}; export function hello(){ alert("hello"); }; //keep this stuff hidden function goodbye(){ //... } } //import just myobject import myobj from E4D; console.log(myobj); //import everything import * from E4D; console.log(myobj); console.log(hello); //explicitly named imports import {myobj, hello} from E4D; console.log(myobj); console.log(hello); // use module directly console.log(MyModule.hello); © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

60. var proxy = Proxy.create( handler ); //create proxy that has a prototype of myObject var proxy = Proxy.create( handler , myObject ); var p = Proxy.create( {} ,{ get: function (target, name){ return 'Hello, '+ name;} }); document.write( p.World ); // print 'Hello, World' © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

61. var p = Proxy.create( {} ,{ get: function (target, name){ return 'Hello, '+ name;} }); document.write( p.World ); // print 'Hello, World' © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

62. Operation Intercepted as proxy[name] handler.get(proxy, name) proxy[name] = val handler.set(proxy, name, val) name in proxy handler.has(name) delete proxy[name] handler.delete(name) for (var name in proxy) {...} handler.iterate() Object.keys(proxy) handler.keys() © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

63. getOwnPropertyDescriptor: function(name) -> PropertyDescriptor | undefined getPropertyDescriptor: function(name) -> PropertyDescriptor | undefined getOwnPropertyNames: function() -> [ string ] getPropertyNames: function() -> [ string ] defineProperty: function(name, propertyDescriptor) -> any delete: function(name) -> boolean fix: function() -> { string: PropertyDescriptor } | undefined © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

64. // Object.getOwnPropertyDescriptor(proxy, name) // Object.getPropertyDescriptor(proxy, name) (not in ES5) // Object.getOwnPropertyNames(proxy) // Object.getPropertyNames(proxy) (not in ES5) // Object.defineProperty(proxy,name,pd) // delete proxy.name // Object.{freeze|seal|preventExtensions}(proxy) © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

65. has: function(name) -> boolean hasOwn: function(name) -> boolean get: function(receiver, name) -> any set: function(receiver, name, val) -> boolean enumerate: function() -> [string] keys: function() -> [string] © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

66. function makeSimpleProfiler(target) { var count = Object.create(null); return Proxy.create( target, { get: function ( receiver , name) { count[name] = (count[name] || 0) + 1; return target[name]; }, stats: function () { return count; } }); } © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

67. var Stack = (function() { var stack = [], allowed = ["push", "pop", "length"]; return Proxy.create({ get: function(receiver, name) { if (allowed.indexOf(name) > -1) { if (typeof stack[name] == "function") { return stack[name].bind(stack); } else { return stack[name]; } } else { return undefined; } } }); }); © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

68. Proxy.createFunction( handler, callTrap, constructTrap ); // proxy() -> callTrap // new proxy() -> constructTrap | callTrap var fp = Proxy.createFunction({}, callTrap); var o = { name: fp }; o.name(x); // reified as callTrap.apply(o,[x]) © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

71. // calculation expression sample var total = 30, msg = `The total is ${total} (${total*1.05} with tax)`; console.log(msg); // "The total is 30 (31.5 with tax)" © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

72. // HTML escaping sample url = "http://e4d.com/"; message = query = "Hello & Goodbye"; color = "red"; safehtml`<a href="${url}?q=${query}" onclick= alert(${message}) style="color: ${color}"> ${message} </a>` <a href="http://e4d.com/?q=Hello%20%26%20Goodbye" onclick=alert('Hello x26 Goodbye') style="color: red">Hello & Goodbye</a> url = "javascript:alert(1337)"; color = "expression(alert(1337))"; <a href="#innocuous?q=Hello%20%26%20Goodbye" onclick=alert('Hello x26 Goodbye') style="color: innocuous">Hello & Goodbye</a> © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

73. http://www.2ality.com/ Kit Cambridge A Few New Things Coming To JavaScript HARMONY OF DREAMS COME TRUE Harmony specification_drafts © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com

What’s new in ECMAScript 6.0

What’s new in ECMAScript 6.0

Recommended

More Related Content

What's hot

What's hot(20)

Similar to What’s new in ECMAScript 6.0

Similar to What’s new in ECMAScript 6.0(20)

More from Eyal Vardi

More from Eyal Vardi(20)

Recently uploaded

Recently uploaded(20)

What’s new in ECMAScript 6.0