// 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 15
Slide 15 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 16
Slide 16 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 17
Slide 17 text
// Tagged template strings
let upper = function(strings, ...values) {
let result = '';
for (let i = 0; i < strings.length - 1; i += 1) {
result += strings[i].toUpperCase()
+ values[i].toUpperCase();
}
return result;
}
let name = 'Jaydson';
let conf = 'JSConf';
let result = upper `Hello ${name}, welcome to ${conf}`;
console.log(result);
HELLO JAYDSON, WELCOME TO JSCONF
// simple i18n implementation
let i18n = function(strings, ...values) {
let result = '';
let len = strings.length - 1;
for (let i = 0; i < len; i +=1) {
result +=
strs[currentLang][strings[i]] + values[i];
}
return result;
};
http://www.es6fiddle.net/i0r5wpso/
http://jaysoo.ca/2014/03/20/i18n-with-es6-template-strings/
Slide 20
Slide 20 text
// simple i18n implementation
currentLang = 'es-ar';
let name = 'Jaydson';
let conf = 'JSConf';
let result = i18n `Hello ${name}, welcome to ${conf}`;
console.log(result);
// Hola Jaydson, bienvenido a JSConf
Slide 21
Slide 21 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
// Array.from(obj, mapFn)
let lis = document.querySelectorAll('.speaker h2');
console.log(Array.from(lis, s => s.innerHTML));
http://www.2ality.com/2014/05/es6-array-methods.html
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
// Object literal shorthand
function foo(bar, baz) {
return { x: true, bar: bar, baz: baz };
}
function conf(name) {
return { country: 'AR', name: name };
}
Slide 28
Slide 28 text
// Object literal shorthand
function foo(bar, baz) {
return { x: true, bar, baz };
}
function conf(name) {
return { country: 'AR', name };
}
Slide 29
Slide 29 text
// Destructuring assignment
(array pattern)
var m = 11, d = 29, y = 2014;
let [m, d, y] = [11, 29, 2014];
Slide 30
Slide 30 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 31
Slide 31 text
Main
Features
Slide 32
Slide 32 text
// Block scope
/* Let */
for (var i = 0; i < 3; i++) {
let j = i * i;
console.log(j); // Works
}
console.log(j); // Fail
http://es6rocks.com/2014/08/what-you-need-to-know-about-block-scope-let/
Slide 33
Slide 33 text
Arrow
Functions
=>
Slide 34
Slide 34 text
- This binding
- Not newable
- No arguments object
- Always anonymous
Slide 35
Slide 35 text
// Single parameter arrow fn
let plusOne = x => x + 1;
console.log( plusOne(5) );
// 6
Slide 36
Slide 36 text
// Single parameter arrow fn
let plusOne = x => x + 1;
console.log( plusOne(5) );
// 6
Function
Slide 37
Slide 37 text
// Single parameter arrow fn
let plusOne = x => x + 1;
console.log( plusOne(5) );
// 6
Param name
Slide 38
Slide 38 text
// Single parameter arrow fn
let plusOne = x => x + 1;
console.log( plusOne(5) );
// 6
return
Slide 39
Slide 39 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 42
Slide 42 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 43
Slide 43 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 44
Slide 44 text
// Fixing ‘this’ issue ES6 way
let foo = {
init : function () {
setTimeout( () => this.log(), 1000 );
},
log : function () {
console.log('foooo');
}
};
foo.init();
// foooo
Slide 45
Slide 45 text
Classes
Slide 46
Slide 46 text
class Animal {
constructor(name) {
this.name = name;
}
breathe () {
console.log( `${this.name} is breathing` );
}
}
Slide 47
Slide 47 text
class Dog extends Animal {
constructor(name) {
super(name);
}
bark() {
console.log(`Woof! ${this.name} is barking`);
}
}
Slide 48
Slide 48 text
class Cat extends Animal {
constructor(name) {
super(name);
}
meow() {
console.log(`Meow! ${this.name} is meowing`);
}
}
Slide 49
Slide 49 text
Modules
Slide 50
Slide 50 text
// Creating modules
// baz.js
let baz = 'baz';
export default baz;
// app.js
import baz from “baz”;
Slide 51
Slide 51 text
// Creating modules
// print.js
let print = function (what) {
return `print module - ${what}`;
}
export default print;
Slide 52
Slide 52 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 53
Slide 53 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