1. @HelsinkiJS meet-up
December 12, 2011
ECMAScript, 6
Dmitry Soshnikov
http://dmitrysoshnikov.com

2. Function parameter
default values

3. Function parameter
default values
function handleRequest(data, method) {
method = method || “GET”;
...
}

4. Function parameter
default values
function handleRequest(data, method) {
method = method || “GET”;
...
}
function handleRequest(data, method = “GET”) {
...
}

5. Modules system

6. Modules in ES3, ES5
var 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. Modules in ES3, ES5
var 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. Modules in ES6
module DBLayer {
export function query(s) { ... }
export function connection(...args) { ... }
}
import * from DBLayer; // import all
// import only needed exports
import {query, connection: attachTo} from DBLayer
query(“SELECT * FROM books”).format(“escape | split”);
attachTo(“/books/store”, {
onSuccess: function (response) { ... }
})

9. Quasi-Literals
(String templates)

10. Quasis : string templates
let content = “<a href=‘” + url + “’ title=‘”
+ title + “’>” + text+ “</a>”;
$(“#bar”).html(content);

11. Quasis : string templates
let 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. Array comprehensions

13. Array comprehensions
// map + filter way
let scores = [1, 7, 4, 9]
.filter(function (x) { return x > 5 })
.map(function (x) { return x * x }); // [49, 81]

14. Array comprehensions
// map + filter way
let scores = [1, 7, 4, 9]
.filter(function (x) { return x > 5 })
.map(function (x) { return x * x }); // [49, 81]
// array comprehensions
let scores = [x * x for (x in values([1, 7, 4, 9])) if (x > 5)];

15. Map and WeakMap

16. Map and WeakMap
let user = {name: “Ann”, x: 10, y: 20};
// Keys in a map are objects
let scoresMap = new Map;
map.set(user, 100);
console.log(scoresMap.get(user)); // 100

17. Map and WeakMap
let user = {name: “Ann”, x: 10, y: 20};
// Keys in a map are objects
let scoresMap = new Map;
map.set(user, 100);
console.log(scoresMap.get(user)); // 100
let 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. Destructuring assignment

19. Destructuring: arrays
// for arrays
let [x, y] = [10, 20, 30];
console.log(x, y); // 10, 20

20. Destructuring of
function parameters
function 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. Destructuring of
function parameters
function Panel({title: title, pos: [x, y]}) {
return title + x + y;
}
let config = {title: “Users”, pos: [10, 15]};
new Panel(config);

22. Eliminating of arguments:
...rest operator

23. Object arguments
// ES3, ES5
function 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. Complicated arguments
// ES3, ES5
function 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. ...rest
// ES6 aka Harmony
function 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. Proxy objects : meta level

27. Proxy-objects
/* target – original object
* handler – meta-handler */
Proxy(target, handler)
See: http://wiki.ecmascript.org/doku.php?id=harmony:direct_proxies
Note: 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. 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. 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. Struct types

31. Struct types
// struct types
let 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 types
let Triangle = new ArrayType(Pixel, 3);
// dense-objects, based on struct binary types
let 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. Struct types : example
// struct types
let IODataBlock = new StructType( /* attributes */ );
stream.read(IODataBlock, function (block) {
// partial handling
});

33. Thanks for your attention
Dmitry Soshnikov
dmitry.soshnikov@gmail.com
http://dmitrysoshnikov.com
@DmitrySoshnikov