Download - ES6 - Level up your JavaScript Skills
![Page 1: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/1.jpg)
LEVEL UP YOUR SKILLSES6
by Stefano Ceschi BerriniProgrammers In Padua - Nov, 21st 2016
![Page 2: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/2.jpg)
WHO AM I?Stefano Ceschi BerriniSoftware Engineer @ TimeRepublik~9 yrs relationship w/ JSIn <3 with React
@stecb https://stecb.github.io
![Page 3: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/3.jpg)
Yes. Software Engineer.
![Page 4: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/4.jpg)
I was joking. This is what I actually do
![Page 5: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/5.jpg)
1995/‘96 2006 2009 2015
![Page 6: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/6.jpg)
Nov 21th, 2016
![Page 7: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/7.jpg)
A high-level, dynamic, untyped, and interpreted programming language
dʒævəˌskrɪpt
![Page 8: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/8.jpg)
ES6 is JavaScriptadds to JS a tons of cool features you will love
![Page 9: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/9.jpg)
CONSTANTS & VARIABLES
![Page 10: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/10.jpg)
// scopes the variable to the nearest **block** {}// No hoistinglet foo = 'bar';
for (let i = 0; i < 10; i++) { let y = 'something';}// while foo is available, both i and y are not available
console.log(y)// ReferenceError: y is not defined
![Page 11: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/11.jpg)
// constant reference to the value, we shouldn't redefine it! // And MUST be initialised. Same scoping rules of letconst pi = 3.14;const arr = [];const obj = {};
// we can change referenced value in this casearr.push('hey'); // but we can't redefine constants i.e. // arr = [] // or // pi = 5
obj.str = 'foo';// also ok!
obj = {};// ! ok!
![Page 12: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/12.jpg)
STRING INTERPOLATION
![Page 13: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/13.jpg)
const god = { name: 'John Petrucci', instrument: 'guitar', influences: ['Pink Floyd', 'Metallica', 'Iron Maiden', 'Meshuggah']};
const domNode =` <div> <em> <b>${god.name}</b> can play ${god.instrument} faster than you!! </em> <p>Influences:</p> <ul> ${god.influences.map(i => `<li>${i}</li>`).join('')} </ul> </div>`;
document.body.innerHTML = domNode;
![Page 14: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/14.jpg)
ARROW FUNCTIONS
![Page 15: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/15.jpg)
let arr = [1,2,3];let something = arr.map(n => n * 2).reduce((a, b) => a + b);
let foo = () => () => console.log('heya!');
console.log(something); // ?
console.log(foo()); // ?
![Page 16: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/16.jpg)
let guitars = ['music man', 'ibanez', 'taylor'];let guitarsShop = { location: 'Montebelluna', name: 'EsseMusic', // shorthand assignment => guitars: guitars guitars, // method listGuitars() { this.guitars.forEach(guitar => { console.log(`${this.name} in ${this.location} has ${guitar} guitars`); }); }}guitarsShop.listGuitars(); // ?
![Page 17: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/17.jpg)
OBJECT PROPERTIES ENHANCEMENTS
![Page 18: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/18.jpg)
let guitars = ['music man', 'ibanez', 'taylor'];let guitarsShop = { location: 'Montebelluna', name: 'EsseMusic', // shorthand assignment => guitars: guitars guitars, // computed properties [`property_${guitars[1]}`]: guitars[1], // method listGuitars() { this.guitars.forEach(guitar => { console.log(`${this.name} in ${this.location} has ${guitar} guitars`); }); }}
console.log( guitarsShop[`property_${guitars[1]}`] === guitars[1] );
![Page 19: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/19.jpg)
PARAMETERS HANDLING
![Page 20: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/20.jpg)
// default params valuesconst foo = (x, y = 1, z = 2) => x * y * z;foo(3); // ?
// rest paramsconst bar = (x, y, ...z) => x * y * z.length;bar(1, 2, 'some', 'more', 'args'); // ?
// spread syntaxconst baz = (x, y, z) => x * y * z;const arr = [2, 4, 6];baz(...arr); // ?
![Page 21: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/21.jpg)
DESTRUCTURING
![Page 22: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/22.jpg)
const arr = [1, 2, 3, 4, 5];const [a, b, ...other] = arr;console.log(other) // ?
const obj = { x: 1, y: 2 };const { x, y } = obj;console.log(x, y); // 1 2
const obj2 = { options: { top: 10, left: 20, bg: '#fff' } };// destructuring + aliasingconst { options: { bg: background } } = obj2;console.log(background); // '#fff'
const foo = () => [1, 2, 3];const [c, ,d] = foo();console.log(c, d); // 1 3
function draw({ size = 'big', coords = { x: 0, y: 0 } } = {}) { console.log(size, coords);}draw({ coords: { x: 18, y: 30 }});
![Page 23: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/23.jpg)
CLASSES
![Page 24: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/24.jpg)
// classclass Person { // default params constructor(name = 'unknown', age = 0, sex = 'whatever') { this.age = age; this.name = name; this.sex = sex; } displayInfo() { console.log(this.name, this.age, this.sex); }}
// subclassclass Female extends Person { constructor(name, age) { // super call super(name, age, 'f'); } yell(what) { super.displayInfo(); setInterval(() => console.log(what), 1000); }}
const myWife = new Female('Deborah', 29);myWife.yell('wash your own cup and dishes please!');
![Page 25: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/25.jpg)
MODULES
![Page 26: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/26.jpg)
js
helpers.js
constants.js
app.js
moviesManager.js
![Page 27: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/27.jpg)
// /js/helpers.js
export function isOdd(n) { return n % 2 !== 0;}
export const capitalizeFirst = str => str[0].toUpperCase() + str.slice(1);
// /js/constants.js
export const API_ENDPOINT = 'http://my.api.com/';export const PER_PAGE = 30;export const MAGIC = 42;
![Page 28: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/28.jpg)
// /js/moviesManager.js
import { API_ENDPOINT, PER_PAGE, MAGIC } from 'constants';
export default class MoviesManager { constructor(per_page = PER_PAGE) { this.page = 0; this.per_page = per_page; }
fetch(title, cb) { fetch(`${API_ENDPOINT}?title=${title}&page=${this.page++} &per_page=${this.per_page}&API_KEY=${MAGIC}`) .then(response => response.json()) .then(json => cb(json)); }}
![Page 29: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/29.jpg)
// /js/app.js
import * as lib from 'helpers';import MoviesManager from 'moviesManager';
const arr = [1, 2, 3, 4, 5];const oddArr = arr.filter(lib.isOdd);
(new MoviesManager).fetch('spider man', json => { // I will receive the json // of all the people who bought spider man. console.log(lib.capitalizeFirst(json.people[0].firstName));});
![Page 30: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/30.jpg)
GENERATORS
![Page 31: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/31.jpg)
Generators are new kind of functions that can be paused/resumed, allowing meanwhile other code to run.
![Page 32: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/32.jpg)
const fetchJson = co.wrap(function* (url) { try { let request = yield fetch(url); let text = yield request.text(); return JSON.parse(text); } catch (error) { console.log(`ERROR: ${error.stack}`); }});
![Page 33: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/33.jpg)
function* generatorFunction() { // paused initally! console.log('Hey'); yield; // operator to pause the generator! console.log('there!');}
const generatorObj = generatorFunction();
generatorObj.next(); // HeygeneratorObj.next(); // there!
// at the end: { value: undefined, done: true }
![Page 34: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/34.jpg)
function *foo(x) { let y = 2 * (yield (x + 1)); let z = yield (y / 3); return (x + y + z);}
const iterator = foo(1);
iterator.next(); // => value === ?, done === ?
iterator.next(3); // => value === ?, done === ?
iterator.next(12); // => value === ?, done === ?
![Page 35: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/35.jpg)
// function declarationfunction* generatorFunction() { /* code */ }
// function expressionconst generatorFunction = function* () { /* code */ }
// generator methodconst obj = { * myMethod() { /* code */ }}
// generator method def in classclass MyClass { * myMethod() { /* code */ }}
![Page 36: ES6 - Level up your JavaScript Skills](https://reader031.vdocuments.us/reader031/viewer/2022020119/58ec47aa1a28ab35628b4625/html5/thumbnails/36.jpg)
RESOURCEShttps://github.com/lukehoban/es6features
https://babeljs.io/docs/learn-es2015/
http://exploringjs.com/es6/