@HelsinkiJS meet-up       December 12, 2011   ECMAScript, 6     Dmitry Soshnikovhttp://dmitrysoshnikov.com
Function parameter  default values
Function parameter            default valuesfunction handleRequest(data, method) {  method = method || “GET”;  ...}
Function parameter            default valuesfunction handleRequest(data, method) {  method = method || “GET”;  ...}functio...
Modules system
Modules in ES3, ES5var DBLayer = (function (global) {   /* save original */   var originalDBLayer = global.DBLayer;   func...
Modules in ES3, ES5var DBLayer = (function (global) {   /* save original */   var originalDBLayer = global.DBLayer;   func...
Modules in ES6module DBLayer {  export function query(s) { ... }  export function connection(...args) { ... }}import * fro...
Quasi-Literals(String templates)
Quasis : string templateslet content = “<a href=‘” + url + “’ title=‘”  + title + “’>” + text+ “</a>”;$(“#bar”).html(conte...
Quasis : string templateslet content = “<a href=‘” + url + “’ title=‘”  + title + “’>” + text+ “</a>”;$(“#bar”).html(conte...
Array comprehensions
Array comprehensions// map + filter waylet scores = [1, 7, 4, 9]  .filter(function (x) { return x > 5 })  .map(function (x...
Array comprehensions// map + filter waylet scores = [1, 7, 4, 9]  .filter(function (x) { return x > 5 })  .map(function (x...
Map and WeakMap
Map and WeakMaplet user = {name: “Ann”, x: 10, y: 20};// Keys in a map are objectslet scoresMap = new Map;map.set(user, 10...
Map and WeakMaplet user = {name: “Ann”, x: 10, y: 20};// Keys in a map are objectslet scoresMap = new Map;map.set(user, 10...
Destructuring assignment
Destructuring: arrays// for arrayslet [x, y] = [10, 20, 30];console.log(x, y); // 10, 20
Destructuring of           function parametersfunction Panel(config) {  var title = config.title;  var x = config.pos[0]; ...
Destructuring of            function parametersfunction Panel({title: title, pos: [x, y]}) {  return title + x + y;}let co...
Eliminating of arguments:     ...rest operator
Object arguments// ES3, ES5function format(pattern /*, rest */) {  var rest = [].slice.call(arguments, 1);  var items = re...
Complicated arguments// ES3, ES5function format(pattern /*, rest */) {  var rest = [].slice.call(arguments, 1); // complic...
...rest// ES6 aka Harmonyfunction format(pattern, …rest) { // real array  var items = rest.filter(function (x) { return x ...
Proxy objects : meta level
Proxy-objects/* target – original object * handler – meta-handler */Proxy(target, handler)See: http://wiki.ecmascript.org/...
Proxy-objects // original object       // proxied object let point = {            let loggedPoint = Proxy(point, {    x: 1...
Proxy-objects                                    // proxied object    Meta-handler                    let loggedPoint = Pr...
Struct types
Struct types// struct typeslet Point2D = new StructType({ x: uint32, y: uint32 });let Color = new StructType({ r: uint8, g...
Struct types : example// struct typeslet IODataBlock = new StructType( /* attributes */ );stream.read(IODataBlock, functio...
Thanks for your attention     Dmitry Soshnikovdmitry.soshnikov@gmail.com  http://dmitrysoshnikov.com      @DmitrySoshnikov
Upcoming SlideShare
Loading in …5
×

HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6

8,296
-1

Published on

1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,296
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
21
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6

  1. 1. @HelsinkiJS meet-up December 12, 2011 ECMAScript, 6 Dmitry Soshnikovhttp://dmitrysoshnikov.com
  2. 2. Function parameter default values
  3. 3. Function parameter default valuesfunction handleRequest(data, method) { method = method || “GET”; ...}
  4. 4. Function parameter default valuesfunction handleRequest(data, method) { method = method || “GET”; ...}function handleRequest(data, method = “GET”) { ...}
  5. 5. Modules system
  6. 6. Modules in ES3, ES5var DBLayer = (function (global) { /* save original */ var originalDBLayer = global.DBLayer; function noConflict() { global.DBLayer = originalDBLayer; 1. Create local scope } 2. Restoring function /* implementation */ 3. Implementation 4. Public API function query() { ... } /* exports, public API */ return { noConflict: noConflict, query: query };})(this);
  7. 7. Modules in ES3, ES5var DBLayer = (function (global) { /* save original */ var originalDBLayer = global.DBLayer; function noConflict() { global.DBLayer = originalDBLayer; 1. Create local scope } 2. Restoring function /* implementation */ 3. Implementation 4. Public API function query() { ... } /* exports, public API */ Too much of “noise”. return { A “sugar” is needed. noConflict: noConflict, query: query };})(this);
  8. 8. Modules in ES6module DBLayer { export function query(s) { ... } export function connection(...args) { ... }}import * from DBLayer; // import all// import only needed exportsimport {query, connection: attachTo} from DBLayerquery(“SELECT * FROM books”).format(“escape | split”);attachTo(“/books/store”, { onSuccess: function (response) { ... }})
  9. 9. Quasi-Literals(String templates)
  10. 10. Quasis : string templateslet content = “<a href=‘” + url + “’ title=‘” + title + “’>” + text+ “</a>”;$(“#bar”).html(content);
  11. 11. Quasis : string templateslet content = “<a href=‘” + url + “’ title=‘” + title + “’>” + text+ “</a>”;$(“#bar”).html(content);let content = safeHtml `<a href=“${url} “ title=“${title}”>${text}</a>`;$(“#bar”).html(content);See: http://wiki.ecmascript.org/doku.php?id=harmony:quasis
  12. 12. Array comprehensions
  13. 13. Array comprehensions// map + filter waylet scores = [1, 7, 4, 9] .filter(function (x) { return x > 5 }) .map(function (x) { return x * x }); // [49, 81]
  14. 14. Array comprehensions// map + filter waylet scores = [1, 7, 4, 9] .filter(function (x) { return x > 5 }) .map(function (x) { return x * x }); // [49, 81]// array comprehensionslet scores = [x * x for (x in values([1, 7, 4, 9])) if (x > 5)];
  15. 15. Map and WeakMap
  16. 16. Map and WeakMaplet user = {name: “Ann”, x: 10, y: 20};// Keys in a map are objectslet scoresMap = new Map;map.set(user, 100);console.log(scoresMap.get(user)); // 100
  17. 17. Map and WeakMaplet user = {name: “Ann”, x: 10, y: 20};// Keys in a map are objectslet scoresMap = new Map;map.set(user, 100);console.log(scoresMap.get(user)); // 100let markers = new WeakMap;marker = new Marker(10, 20);markers.set(marker, “Ann”);console.log(weakMap.get(marker)); // “Ann”delete marker; // if marker is GC’ed, it’s removed from WeakMap too!
  18. 18. Destructuring assignment
  19. 19. Destructuring: arrays// for arrayslet [x, y] = [10, 20, 30];console.log(x, y); // 10, 20
  20. 20. Destructuring of function parametersfunction Panel(config) { var title = config.title; var x = config.pos[0]; Too “noisy” var y = config.pos[1]; return title + x + y;}new Panel({title: “Users”, pos: [10, 15]});
  21. 21. Destructuring of function parametersfunction Panel({title: title, pos: [x, y]}) { return title + x + y;}let config = {title: “Users”, pos: [10, 15]};new Panel(config);
  22. 22. Eliminating of arguments: ...rest operator
  23. 23. Object arguments// ES3, ES5function format(pattern /*, rest */) { var rest = [].slice.call(arguments, 1); var items = rest.filter(function (x) { return x > 1}); return pattern.replace(“%v”, items);}format(“scores: %v”, 1, 5, 3); // scores: 5, 3
  24. 24. Complicated arguments// ES3, ES5function format(pattern /*, rest */) { var rest = [].slice.call(arguments, 1); // complicated var items = rest.filter(function (x) { return x > 1}); return pattern.replace(“%v”, items);}format(“scores: %v”, 1, 5, 3); // scores: 5, 3
  25. 25. ...rest// ES6 aka Harmonyfunction format(pattern, …rest) { // real array var items = rest.filter(function (x) { return x > 1}); return pattern.replace(“%v”, items);}format(“scores: %v”, 1, 5, 3); // scores: 5, 3
  26. 26. Proxy objects : meta level
  27. 27. Proxy-objects/* target – original object * handler – meta-handler */Proxy(target, handler)See: http://wiki.ecmascript.org/doku.php?id=harmony:direct_proxiesNote: old semantics (currently is implemented in Firefox) will not longer be available:Proxy.create(handler, [proto]), Proxy.createFunction(handler, [call, [consruct]])See: http://wiki.ecmascript.org/doku.php?id=harmony:proxies
  28. 28. Proxy-objects // original object // proxied object let point = { let loggedPoint = Proxy(point, { x: 10, get: function (point, name, rcvr) { y: 20 console.log(“get: ”, name); }; return point[name]; }, set: function (point, name, value, rcvr) {Trap of getting of console.log(“set: ”, name, value); properties point[name] = value; }Trap of setting the }); properties
  29. 29. Proxy-objects // proxied object Meta-handler let loggedPoint = Proxy(point, { get: function (point, name, rcvr) {// reading trap console.log(“get: ”, name);loggedPoint.x; // get: x, 10 return point[name]; },// writing trap set: function (point, name, value, rcvr) {loggedPoint.x = 20; // set: x, 20 console.log(“set: ”, name, value); point[name] = value;// reflected on the original object }point.x; // 20 });
  30. 30. Struct types
  31. 31. Struct types// struct typeslet Point2D = new StructType({ x: uint32, y: uint32 });let Color = new StructType({ r: uint8, g: uint8, b: uint8 });let Pixel = new StructType({ point: Point2D, color: Color });// array typeslet Triangle = new ArrayType(Pixel, 3);// dense-objects, based on struct binary typeslet t = new Triangle([ { point: { x: 0, y: 0 }, color: { r: 255, g: 255, b: 255 } }, { point: { x: 5, y: 5 }, color: { r: 128, g: 0, b: 0 } }, { point: { x: 10, y: 0 }, color: { r: 0, g: 0, b: 128 } }]);
  32. 32. Struct types : example// struct typeslet IODataBlock = new StructType( /* attributes */ );stream.read(IODataBlock, function (block) { // partial handling});
  33. 33. Thanks for your attention Dmitry Soshnikovdmitry.soshnikov@gmail.com http://dmitrysoshnikov.com @DmitrySoshnikov
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×