Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6

9,331 views

Published on

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

×