• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
What’s new in ECMAScript 6.0
 

What’s new in ECMAScript 6.0

on

  • 8,246 views

What’s new in ECMAScript 6.0

What’s new in ECMAScript 6.0

Statistics

Views

Total Views
8,246
Views on SlideShare
6,164
Embed Views
2,082

Actions

Likes
33
Downloads
0
Comments
0

14 Embeds 2,082

http://eyalvardi.wordpress.com 1373
https://ocean.cybozu-dev.com 511
https://twitter.com 62
http://blog.igorcarvalho.com 52
http://www.scoop.it 47
https://ocean.s.cybozu-dev.com 18
https://sendtoinc.com 8
https://eyalvardi.wordpress.com 4
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
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    What’s new in ECMAScript 6.0 What’s new in ECMAScript 6.0 Presentation Transcript

    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il var name = "Eyal"; var age = 43; var user = { 'name': name, 'age': age }; var name = "Eyal"; var age = 43; var user = { name, age };
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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(){ alert(this.name); }, getOlder (years){ this.age += years; } };
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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);
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il function history( lang = "C", year = 1972 ) { return lang + " was created around the year " + year; }
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il // 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");
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il // 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
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il var f= x => x; var f= (n1,n2) => n1+n2; var f= id => ({id:id,name:"T"}); var f = function(x) { return x; } var f = function(n1,n2) { return n1 + n2; } var f = function(id) { return { id: id, name: "T" }; }
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il var PageHandler = { id: "123456", init: function() { document.addEventListener("click", function(event) { this.doSomething(event.type); // error }, false); }, doSomething: function(type) { console.log("Handling " + type + " for " + this.id); } }; Global
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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); } }
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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); } };
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il class Answer(){ constructor(value){ this._val = value; } get(){ return this._val; } }
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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; };
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il class Person { constructor(name, age){ public name = name; private age = age; } sayName(){ alert(this.name); } getOlder(years){ private(this).age+= years; } }
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il class Person { constructor(name, age){ private innerTitle = ""; // getter and setter for title property. get title() { return innerTitle; } set title(value){ innerTitle = value; } } }
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il class Answer{ constructor(value){ this._val = value; } get(){ return this._val; } } class FirmAnswer extends Answer { constructor(value){ super(value); } get(){ return super() + "!!"; } }
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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();
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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);
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il class Answer{ constructor(value){ this._val = value; } get(){ return this._val; } } class FirmAnswer prototype Answer { constructor(value){ super(value); } get(){ return super() + "!!"; } }
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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) + "!!"; };
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il var key = {}, map = new WeakMap(); map.set(key, "Hello!"); // Dereference the key so the value is also removed key = null;
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il Array = [ value for each ( variable in values ) condition ];
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il //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 ) ];
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il var Size = new StructType( { width: uint32, height: uint32 }); uint8 , uint16 , uint32 int8 , int16 , int32 float32, float64
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il var Size = new StructType({width:uint32, height:uint32 }); var SizeArray = new ArrayType(Size, 2); Array Type Array Size
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il let arr = [ "blue", "green" ]; arr.notAnIndex = 123; Array.prototype.protoProp = 456; for (k in arr) console.log(k); Print: > 0 > 1 > notAnIndex > protoProp
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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)
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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++; };
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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);
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il module MyModule from "mymodule.js"; import myobject from MyModule; blocking
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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'
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il var p = Proxy.create( {} ,{ get: function (target, name){ return 'Hello, '+ name;} }); document.write( p.World ); // print 'Hello, World'
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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()
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il // 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)
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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]
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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; } }); }
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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; } } }); });
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il 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])
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il var name = "Eyal", msg = `Hello, ${name}!`; console.log(msg); // "Hello, Eyal!" Expression
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il // 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)"
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il // 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>
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il http://www.2ality.com/ Kit Cambridge A Few New Things Coming To JavaScript HARMONY OF DREAMS COME TRUE Harmony specification_drafts
    • © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il eyalvardi.wordpress.com