• Save
What’s new in ECMAScript 6.0
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

What’s new in ECMAScript 6.0

  • 8,896 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
8,896
On Slideshare
6,750
From Embeds
2,146
Number of Embeds
15

Actions

Shares
Downloads
0
Comments
0
Likes
35

Embeds 2,146

http://eyalvardi.wordpress.com 1,410
https://ocean.cybozu-dev.com 511
https://twitter.com 78
http://blog.igorcarvalho.com 52
http://www.scoop.it 47
https://ocean.s.cybozu-dev.com 18
https://eyalvardi.wordpress.com 10
https://sendtoinc.com 8
https://www.linkedin.com 5
http://plus.url.google.com 2
http://www.linkedin.com 1
https://translate.googleusercontent.com 1
http://cloud.feedly.com 1
http://feedly.com 1
https://cybozulive.com 1

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