ECMAScript (ECMA-262) is the name
of the international standard that
defines JavaScript.
Credits: Allen Wirfs-Brock, ES6:
A Better JavaScript for the Ambient Computing Era
http://www.slideshare.net/allenwb/wdc14-allebwb
Slide 10
Slide 10 text
Credits: Ecmascript6 the future is here,
https://speakerdeck.
com/sebarmeli/ecmascript-6-the-future-
Slide 11
Slide 11 text
Credits: Ecmascript6 the future is here,
https://speakerdeck.
com/sebarmeli/ecmascript-6-the-future-
Slide 12
Slide 12 text
TC39
Slide 13
Slide 13 text
Credits: Allen Wirfs-Brock, ES6:
A Better JavaScript for the Ambient Computing Era
http://www.slideshare.net/allenwb/wdc14-allebwb
// ECMAScript 3
var number = 071; // 57 in decimal
var value1 = parseInt("71"); // 71
var value2 = parseInt("071"); // 57
Octal and Binary Literals
Credits: Nicholas Zakas, Understanding ES6
https://github.com/nzakas/understandinges6
Slide 23
Slide 23 text
// ECMAScript 5
var number = 071; // 57 in decimal
var value1 = parseInt("71"); // 71
var value2 = parseInt("071"); // 71
var value3 = parseInt("071", 8); // 57
function getValue() {
"use strict";
return 071; // syntax error
}
Octal and Binary Literals
Credits: Nicholas Zakas, Understanding ES6
https://github.com/nzakas/understandinges6
Slide 24
Slide 24 text
// ECMAScript 6
var value1 = 0o71; // 57 in decimal
var value2 = 0b101; // 5 in decimal
Octal and Binary Literals
Credits: Nicholas Zakas, Understanding ES6
https://github.com/nzakas/understandinges6
=> Lexical this binding
=> Not newable
=> Can't change this
=> No arguments object
Arrow Functions
Slide 33
Slide 33 text
let plus = x => x + 1;
console.log( plus(2) ); // 3
Arrow Fn one parameter
Slide 34
Slide 34 text
let sum = (num1, num2) => num1 + num2;
console.log( sum(2,3) ); // 5
Arrow Fn n parameters
Slide 35
Slide 35 text
let confName = () => "Front in Aracaju";
console.log( confName() );
//Front in Aracaju
Arrow Fn no parameters
Slide 36
Slide 36 text
let doSomething = (x, y) => {
// Some logic
return true;
};
Arrow Fn body
Slide 37
Slide 37 text
var foo = {
init: function () {
setTimeout(function () {
this.log();
}, 1000);
},
log: function () {
console.log('foooo');
}
}
foo.init(); //undefined is not a function
classical ‘this’ error
Slide 38
Slide 38 text
var foo = {
init : function () {
setTimeout((function () {
this.log();
}).bind(this), 1000);
},
log : function () {
console.log('foooo');
}
}
foo.init(); // foooo
Fixing ‘this’ error ES5 way
Slide 39
Slide 39 text
var foo = {
init : function () {
setTimeout( () => this.log(), 1000);
},
log : function () {
console.log('foooo');
}
};
foo.init(); // foooo
Fixing ‘this’ error ES6 way
Slide 40
Slide 40 text
Classes
Slide 41
Slide 41 text
class Animal {
constructor(name) {
this.name = name;
}
breathe () {
console.log( `${this.name} is breathing` );
}
}
Slide 42
Slide 42 text
class Dog extends Animal {
constructor(name) {
super(name);
}
bark() {
console.log(`Woof! ${this.name} is barking`);
}
}
Slide 43
Slide 43 text
class Cat extends Animal {
constructor(name) {
super(name);
}
meow() {
console.log(`Meow! ${this.name} is meowing`);
}
}
Slide 44
Slide 44 text
Template Strings
Slide 45
Slide 45 text
// Basic literal string creation
console.log(`In JavaScript '\n' is a line-feed.`);
// Multiline strings
console.log(`In JavaScript this is
not legal.`);
// Construct a DOM query
var name = "Bob", time = "today";
console.log(`Hello ${name}, how are you ${time}?`);
Slide 46
Slide 46 text
Paramaters
Slide 47
Slide 47 text
/* Rest parameters */
function sortRestArgs(...theArgs) {
var sortedArgs = theArgs.sort();
return sortedArgs;
}
console.log(sortRestArgs(10,4,1,2,3));
// 1,10,2,3,4
Slide 48
Slide 48 text
/* Spread parameters */
function f(x, y, z) {
console.log(x,y,z);
}
var args = [0, 1, 2];
f(...args); // 0 1 2
/* Default paramaters */
function foo(bar='baz') {
console.log(bar);
}
foo(); // baz
Slide 49
Slide 49 text
Scope
Block
Slide 50
Slide 50 text
/* Let */
for (var i = 0; i < 3; i++) {
let j = i * i;
console.log(j); // Works
}
console.log(j); // Fail
/* Const */
const π = 3.14;
console.log(π);
try {
π += 1;
} catch (constError) {
console.log(constError);
}
Slide 51
Slide 51 text
Modules
Slide 52
Slide 52 text
var asap;
var isNode = typeof process !== "undefined" &&
{}.toString.call(process) === "[object process]";
if (isNode) {
asap = process.nextTick;
} else if (typeof setImmediate !== "undefined") {
asap = setImmediate;
} else {
asap = setTimeout;
}
export default asap;
Creating a module
Credits: JSModules.io
http://jsmodules.io/
Slide 53
Slide 53 text
import asap from "asap";
asap(function() {
console.log("hello async world!");
});
Importing a module
Credits: JSModules.io
http://jsmodules.io/
Slide 54
Slide 54 text
var asap;
var isNode = typeof process !== "undefined" &&
{}.toString.call(process) === "[object process]";
if (isNode) {
asap = process.nextTick;
} else if (typeof setImmediate !== "undefined") {
asap = setImmediate;
} else {
asap = setTimeout;
}
export default asap;
export var later = isNode ? process.setImmediate : asap;
Named exports
Credits: JSModules.io
http://jsmodules.io/
Slide 55
Slide 55 text
import { later } from "asap";
later(function() {
console.log("Running after other network events");
});
import asap, { later } from "asap";
Named imports
Credits: JSModules.io
http://jsmodules.io/
Slide 56
Slide 56 text
import { unlink as rm } from "fs"; // Rename
import * as fs from "fs"; // Into namespace
Conveniences
Credits: JSModules.io
http://jsmodules.io/
Slide 57
Slide 57 text
Promises
Slide 58
Slide 58 text
let confs = ['Aracaju','Poa','Sampa','Rio'];
let FrontIn = function() {
return new Promise(function(resolve, reject) {
setTimeout(() => {
let len = confs.length;
let label = 'FrontIn';
let rand = Math.floor(Math.random() * len);
let conf = `${label} ${confs[rand]}`;
resolve(conf);
}, 1000);
});
};
Promises
From MDN:
“Generators are functions which can
be exited and later re-entered.
Their context (variable bindings) will
be saved across re-entrances”
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Statement
s/function*
Slide 63
Slide 63 text
function* idMaker() {
var index = 0;
while(true)
yield index++;
}
var gen = idMaker();
console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
// ...