es6 overview
TRANSCRIPT
![Page 1: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/1.jpg)
import * as $ from 'jQuery';import svg from 'svglib';import Chart from 'Chart';
class LineChart extends Chart { constructor(series, canvas = document.body){
super(series, canvas); this.draw();
} draw() {
var plot = svg.buildLineChart(this.series);this.$canvas.append(plot);this.series.forEach(x => {
var { max, average: avg } = LineChart.getSerieData(x); super.addStats(max, avg);
}); } static getSerieData(serie) {
if (serie.length > 0){ let sum = serie.reduce((x, y) => x+y);return { max: Math.max(...series), average: sum/serie.length };
} return null;
}}
export default LineChart;
![Page 2: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/2.jpg)
ECMAScript 2015Overview
ECMAScript 6
@brunoscopelliti
![Page 3: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/3.jpg)
in the browser and on the server, too in a not too far future …
![Page 4: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/4.jpg)
![Page 5: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/5.jpg)
Object Literals ShorthandIt’s just syntactic sugar for Object literals.
var v = 42, propertyName = "count"; function fn() { console.log(v); };
// the old wayvar obj = { v: v, fn: fn, fn2: function() { /*...*/ } }; obj[propertyName] = 10;
// es6 shorthand \O/var obj = {
v, fn, fn2() { /*...*/ }, [propertyName]: 10
}
![Page 6: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/6.jpg)
DestructuringAllows to extract values from object and array using patterns.
// ... and support default valuesvar [name, extension = ""] = "LICENSE".split("."); console.log(extension) // ""
// it works with array too!var [name, extension] = "me.jpeg".split("."); console.log(extension); // jpeg
// destructuring + object literal shorthandvar { v, fn } = obj; console.log(v); // 42
var { v: value, fn: log } = obj; console.log(value); // 42
![Page 7: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/7.jpg)
Rest & Spread OperatorThe Spread operator turns an array into consecutive arguments in a function call. The Restoperator binds trailing parameters to an array.
var arr = [1, 2]; arr.concat([3, 4]); // [1, 2, [3, 4]] FAIL! ಥ_ಥ
[3, 4].forEach(function(x) { arr.push(x) }); // [1, 2, 3, 4] At least it works ¯\_(ツ)_/¯
// spread to the rescue!arr.concat(...[3, 4]); // [1, 2, 3, 4] \0/
// rest var [winner, ...theOthers] = ["a", "b", "c"];console.log(theOthers instanceof Array); // trueconsole.log(theOthers.length); // 2
![Page 8: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/8.jpg)
Super-powered functionsVarargs and default parameters.
// default value for function’s arguments repeat("yo"); // yoyo
function repeat(msg, time = 2) { return msg.repeat(time);
}
// rest parametersfunction resize(width, height, ...elems){ console.log(elems); }resize(100, 100, "#box", "#photo"); // ["#box", "#photo"]
function fn(...args){ console.log(args); } fn(); // []fn(42, "bho!"); // [42, "bho!"]
![Page 9: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/9.jpg)
Block Scoped variablesBlock scoped variable assignments with let and const.> Organized code!
if(true){ let v = 42;
}
console.log(v); // ReferenceError: v is not defined
// constantsconst pi = 3.14156;
pi = 3.14; // SyntaxError: invalid assignment to const pi
![Page 10: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/10.jpg)
Arrow FunctionsFunction shorthand with arrow syntax, and more…
[1,2,3].reduce(function(a, b) { return a+b; });
// the syntax[1,2,3].reduce((a,b) => { console.log("oO"); return a+b; }); // 6
// and even shorter[1,2,3].reduce((a,b) => a+b);
![Page 11: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/11.jpg)
Arrow Functions… arrow functions share the same context with their surrounding code;the context can’t be modified via call, apply nor bind.
var team = { n: "Justice League", people: ["Batman", "..."], logMember() {
// arrows have the same context (this) of their surrounding code.this.people.forEach(p => console.log(p + " is member of the " + this.n));
} }
team.logMember(); // Batman is member of the Justice League
![Page 12: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/12.jpg)
Class sugarES6 classes are a simple sugar over the prototype-based OO pattern.
class Animal {
constructor(name) { this.name = name;
}
getName() { return this.name;
} }
var pet = new Animal("foo"); pet instanceof Animal // truepet.getName(); // foo
![Page 13: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/13.jpg)
Fish.canSwim(); // true
var fish = new Fish("nemo"); fish instanceof Animal; // truefish instanceof Fish; // truefish.getName(); // nemo, the fish.
class Fish extends Animal { constructor(name){
// execute Animal's constructorsuper(name); this.domain = "water";
} getName() {
return super.getName() + ", the fish."; } static canSwim() {
return true; }
}
![Page 14: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/14.jpg)
ModulesA standard module system for JavaScript.
// utils.jsexport function decode(str) { /*...*/ } export function encode(str) { /*...*/ }
// main.jsimport * as helper from 'utils';
utils.encode("foo");
![Page 15: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/15.jpg)
Template StringsA decent string interpolation feature.
// welcome template stringvar str = `<p class="${cssClass}">${content}</p>`;
// backtick is ALT+96// progressive enhancement -_-
var cssClass = "visible"; var content = "Hello, world!";
// oldvar str = "<p class='"+cssClass+"'>"+content+"</p>";
![Page 16: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/16.jpg)
JavaScript has not private object property.
ECMAScript 6 proposal:Object can have non-string property.
* At the end, the requisite of privateness for Symbol properties was dropped.Symbolic properties are just non-enumerable.
A new primitive type was created for this purpose, Symbol.
![Page 17: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/17.jpg)
SymbolsA new primitive type.
var s = Symbol(); // Symbol()typeof s === "symbol" // true
var s1 = Symbol("s1"); var s2 = Symbol("s1");
s1 === s2 // false
![Page 18: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/18.jpg)
For ... Of is a new loop construct.It allows to loop over the values of an Iterable collection.
A collection is Iterable if has a Symbol property Symbol.iteratorthat returns an Iterator.
An Iterator is an object with a next methodthat returns a { done, value } tuple.
![Page 19: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/19.jpg)
Iterators & For ... Of loopFor ... Of loop over values of an iterable collection.
var collection = ["a", "b", "c", "d", "e", "f", "g"];
for(value of collection){ console.log(value);
}
// "a", "b", "c", "d", "e", "f", "g"
![Page 20: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/20.jpg)
// custom iteration
collection[Symbol.iterator] = function() { var index = 0; return {
next: () => { if (index < this.length) {
let obj = { done: false, value: this[index] }; index = index + 2; return obj;
} else { return { done: true };
} }
} }
for(value of collection){ console.log(value); } // "a", "c", "e", "g"
![Page 21: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/21.jpg)
Generator FunctionsAre functions which can be interrupted, and then resumed, used to create Iterators.The yield operator is used to interrupt the execution. The generator execution resumes when the iterator’s next method is called.
collection[Symbol.iterator] = function* () { for (let i=0; i<this.length; i++) {
if (i%2 === 0) yield this[i]; }
};
for(value of collection){ console.log(value); } // "a", "c", "e", "g"
![Page 22: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/22.jpg)
SetAn ordered collection with no duplicates.
* Set has a rich prototype that expose method to work with the set instance.
var arr = [1, 2, 2, 3, 3, 3, 4]; var set = new Set(arr);
set; // Set {1, 2, 3, 4}
![Page 23: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/23.jpg)
MapAn ordered collection of {key, value} tuples, without duplicated keys.
* Map has a rich prototype that expose method to work with the map instance.
var arr = [ [1, "first"], [1, "one"], [2, "two"] ]; var map = new Map(arr);
map; // Map { 1: "one", 2: "two" }
![Page 24: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/24.jpg)
ProxiesAllows to intercept, and re-implement, operations executed over an object.
var obj = { v: 42 }; var traps = {
set(target, propKey, value, receiver) { console.log('SET '+propKey+'='+value);target[propKey] = value;
} };
var proxy = new Proxy(obj, traps); proxy.v = 0;
// SET v=0
![Page 25: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/25.jpg)
PromisesExecute asynchronous code like if it’s synchronous
function getJSON() { return new Promise(function(resolve, reject) {
setTimeout(function() { resolve('{"value": 42}'); }, 500); });
}
getJSON().then(function(resp) { console.log("success", resp);
});
![Page 26: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/26.jpg)
ReflectionReflect is a built-in object that provides methods for interceptable JavaScript operations
var obj = { v: 42 };
var proxy = new Proxy(obj, { set(target, propKey, value, receiver) {
console.log('SET '+propKey+'='+value); Reflect.set(target, propKey, value, receiver);
} });
![Page 27: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/27.jpg)
Did you like this?
![Page 28: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/28.jpg)
![Page 29: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/29.jpg)
... what about the browser support?
//kangax.github.io/compat-table/es6/
![Page 30: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/30.jpg)
![Page 31: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/31.jpg)
![Page 32: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/32.jpg)
2015:This is no more a problem!
![Page 33: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/33.jpg)
![Page 34: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/34.jpg)
var team = { name: "Justice League", members: [ { name: "Batman", gender: "M" }, { name: "Wonder woman", gender: "F" }
], add(...members) { this.members.push(...members)
},remove(name) { let memberIndex = this.members.findIndex(x => x.name === name); if (memberIndex >= 0){this.members.splice(memberIndex, 1);
} }, log(gender = "M") { this.members.filter(x => x.gender === gender) .forEach(h => console.log(`${h.name} is member of the ${this.name}`)); }
}
team.add({ name: "Gipsy", gender: "F" }); team.add({ name: "Flash", gender: "M" }, { name: "Green Lantern", gender: "M" });
team.remove("Batman")
team.log("M"); team.log("F");
var team = { name: "Justice League", members: [{ name: "Batman", gender: "M" }, { name: "Wonder woman", gender: "F" }
], add: function add() { var _members, _len = arguments.length;for (var members = _len, _key = 0; _key < _len; _key++){ members[_key] = arguments[_key];
} (_members = this.members).push.apply(_members, members);
}, remove: function remove(name) { var memberIndex = this.members.findIndex(function (x){ return x.name === name;
}); if (memberIndex >= 0) { this.members.splice(memberIndex, 1);
} }, log: function log() { var _this = this; var gender = arguments[0] === undefined ? "M" : arguments[0]; this.members.filter(function (x) { return x.gender === gender; }).forEach(function (h) { return console.log("" + h.name + " is member of the " + _this.name); });
} };
![Page 35: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/35.jpg)
![Page 36: ES6 Overview](https://reader034.vdocument.in/reader034/viewer/2022042504/55a5d2511a28abd2758b45f2/html5/thumbnails/36.jpg)
Grazie!