// Template strings
// 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 35
Slide 35 text
// Template strings
// 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 36
Slide 36 text
// Template strings
// 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 37
Slide 37 text
// Octal and Binary Literals
// ECMAScript 6
var value1 = 0o71; // 57 in decimal
var value2 = 0b101; // 5 in decimal
Credits: Nicholas Zakas, Understanding ES6
https://github.com/nzakas/understandinges6
// Destructuring assignment
(array pattern)
var m = 11, d = 29, y = 2014;
let [m, d, y] = [11, 29, 2014];
Slide 41
Slide 41 text
// Destructuring assignment
(object pattern)
function today() {
return { d: 29, m: 11, y: 2014 };
}
let { m: month, y: year } = today();
// month = 11, year = 2014
Slide 42
Slide 42 text
ES6 Main features
Slide 43
Slide 43 text
// Block scope
/* Let */
for (var i = 0; i < 3; i++) {
let j = i * i;
console.log(j); // Works
}
console.log(j); // Fail
http://jsrocks.com/2014/08/what-you-need-to-know-about-block-scope-let/
Slide 44
Slide 44 text
Arrow functions
Slide 45
Slide 45 text
- This binding
- Not newable
- No arguments object
- Always anonymous
Slide 46
Slide 46 text
// Single parameter arrow fn
let plusOne = x => x + 1;
console.log( plusOne(5) );
// 6
Slide 47
Slide 47 text
// Single parameter arrow fn
let plusOne = x => x + 1;
console.log( plusOne(5) );
// 6
Function
Slide 48
Slide 48 text
// Single parameter arrow fn
let plusOne = x => x + 1;
console.log( plusOne(5) );
// 6
Param name
Slide 49
Slide 49 text
// Single parameter arrow fn
let plusOne = x => x + 1;
console.log( plusOne(5) );
// 6
return
Slide 50
Slide 50 text
// n parameters arrow fn
let sum = (n1, n2) => n1 + n2;
console.log( sum(2,2) );
// 4
// Arrow fn with a body
let doSomething = (x, y) => {
// logic
return true;
}
Slide 53
Slide 53 text
// Classical ‘this’ issue
var foo = {
init: function () {
setTimeout(function () {
this.log();
}, 1000);
},
log: function () {
console.log('foooo');
}
}
foo.init();
//TypeError: this.log is not a function
Slide 54
Slide 54 text
// Fixing ‘this’ issue ES5 way
var foo = {
init : function () {
setTimeout((function () {
this.log();
}).bind(this), 1000);
},
log : function () {
console.log('foooo');
}
}
foo.init();
// foooo
Slide 55
Slide 55 text
// Fixing ‘this’ issue ES6 way
let foo = {
init : function () {
setTimeout( () => this.log(), 1000 );
},
log : function () {
console.log('foooo');
}
};
foo.init();
// foooo
Slide 56
Slide 56 text
Classes
Slide 57
Slide 57 text
class Animal {
constructor(name) {
this.name = name;
}
breathe () {
console.log( `${this.name} is breathing` );
}
}
Slide 58
Slide 58 text
class Dog extends Animal {
constructor(name) {
super(name);
}
bark() {
console.log(`Woof! ${this.name} is barking`);
}
}
Slide 59
Slide 59 text
class Cat extends Animal {
constructor(name) {
super(name);
}
meow() {
console.log(`Meow! ${this.name} is meowing`);
}
}
Slide 60
Slide 60 text
Modules
Slide 61
Slide 61 text
// Creating modules
// baz.js
let baz = 'baz';
export default baz;
// app.js
import baz from “baz”;
Slide 62
Slide 62 text
// Creating modules
// print.js
let print = function (what) {
return `print module - ${what}`;
}
export default print;
Slide 63
Slide 63 text
// Creating modules
// foo.js
import baz from "./baz";
console.log('From module baz >>> ', baz);
let foo = 'foo';
export default foo;
export let bar = 'bar';
// foo.js
import { bar } from “foo”;
Slide 64
Slide 64 text
// Using modules
// app.js
import print from "./modules/print";
import foo, { bar } from "./modules/foo";
console.log( print('it works') );
// print module - it works
console.log( print('wow') );
// print module - wow
console.log( foo ); // foo
console.log( bar ); // bar
Slide 65
Slide 65 text
Case study on ES7 async
functions
https://github.com/jaydson/es7-async
Slide 66
Slide 66 text
Old friend Ajax
Slide 67
Slide 67 text
Not so new friend, Promises
Slide 68
Slide 68 text
Fetch API
Slide 69
Slide 69 text
Parallel execution
Slide 70
Slide 70 text
New powerful friend, generators
Slide 71
Slide 71 text
The new awesome beast, async
functions
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
Parallel operations with async:
Slide 75
Slide 75 text
Parallel operations with async +
fetch (Oh my god this is great!):