es6 - level up your javascript skills
TRANSCRIPT
LEVEL UP YOUR SKILLSES6
by Stefano Ceschi BerriniProgrammers In Padua - Nov, 21st 2016
WHO AM I?Stefano Ceschi BerriniSoftware Engineer @ TimeRepublik~9 yrs relationship w/ JSIn <3 with React
@stecb https://stecb.github.io
Yes. Software Engineer.
I was joking. This is what I actually do
1995/‘96 2006 2009 2015
Nov 21th, 2016
A high-level, dynamic, untyped, and interpreted programming language
dʒævəˌskrɪpt
ES6 is JavaScriptadds to JS a tons of cool features you will love
CONSTANTS & VARIABLES
// 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
// 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!
STRING INTERPOLATION
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;
ARROW FUNCTIONS
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()); // ?
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(); // ?
OBJECT PROPERTIES ENHANCEMENTS
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] );
PARAMETERS HANDLING
// 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); // ?
DESTRUCTURING
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 }});
CLASSES
// 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!');
MODULES
js
helpers.js
constants.js
app.js
moviesManager.js
// /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;
// /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)); }}
// /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));});
GENERATORS
Generators are new kind of functions that can be paused/resumed, allowing meanwhile other code to run.
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}`); }});
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 }
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 === ?
// function declarationfunction* generatorFunction() { /* code */ }
// function expressionconst generatorFunction = function* () { /* code */ }
// generator methodconst obj = { * myMethod() { /* code */ }}
// generator method def in classclass MyClass { * myMethod() { /* code */ }}
RESOURCEShttps://github.com/lukehoban/es6features
https://babeljs.io/docs/learn-es2015/
http://exploringjs.com/es6/
