What’s new in ECMAScript 6.0

  • 7,779 views
Uploaded on

What’s new in ECMAScript 6.0

What’s new in ECMAScript 6.0

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
7,779
On Slideshare
0
From Embeds
0
Number of Embeds
15

Actions

Shares
Downloads
0
Comments
0
Likes
35

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  • 2. © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  • 3. © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  • 4. © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  • 5. © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  • 6. © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  • 7. © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  • 8. © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  • 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
  • 15. © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  • 16. © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  • 17. function history( lang = "C", year = 1972 ) { return lang + " was created around the year " + year; } © 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
  • 20. © 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
  • 25. © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  • 26. © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  • 27. class Answer(){ constructor(value){ this._val = value; } get(){ return this._val; } } © 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
  • 36. © 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
  • 40. Array = [ value for each ( variable in values ) condition ]; © 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
  • 44. © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  • 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
  • 47. © 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
  • 52. © 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
  • 54. © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  • 55. © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  • 56. © 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
  • 58. module MyModule from "mymodule.js"; import myobject from MyModule; © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com blocking
  • 59. © 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
  • 69. © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  • 70. var name = "Eyal", Expression msg = `Hello, ${name}!`; console.log(msg); // "Hello, Eyal!" © 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(&#39;Hello&#32;x26&#32;Goodbye&#39;) style="color: red">Hello &amp; Goodbye</a> url = "javascript:alert(1337)"; color = "expression(alert(1337))"; <a href="#innocuous?q=Hello%20%26%20Goodbye" onclick=alert(&#39;Hello&#32;x26&#32;Goodbye&#39;) style="color: innocuous">Hello &amp; 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
  • 74. eyalvardi.wordpress.com © 2014 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com