ES6 - Level up your JavaScript Skills

In this talk we will discover the "new" version of the standard of the most hated|used|loved programming language: JavaScript. We're gonna see how it evolved and how it got better, making our developers' life definitely better.
We will also see how it allows us to pick our favourite paradigm: Functional or Object Oriented.

Transcript

1. LEVEL UP YOUR SKILLS ES6 by Stefano Ceschi Berrini Programmers In Padua - Nov, 21st 2016
2. WHO AM I? Stefano Ceschi Berrini Software Engineer @ TimeRepublik ~9 yrs relationship w/ JS In <3 with React @stecb https://stecb.github.io
3. Yes. Software Engineer.
4. I was joking. This is what I actually do
5. 1995/‘96 2006 2009 2015
6. Nov 21th, 2016
7. A high-level, dynamic, untyped, and interpreted programming language dʒævəˌskrɪpt
8. ES6 is JavaScript adds to JS a tons of cool features you will love
9. CONSTANTS & VARIABLES
10. // scopes the variable to the nearest **block** {} // No hoisting let 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
11. // constant reference to the value, we shouldn't redefine it! // And MUST be initialised. Same scoping rules of let const pi = 3.14; const arr = []; const obj = {}; // we can change referenced value in this case arr.push('hey'); // but we can't redefine constants i.e. // arr = [] // or // pi = 5 obj.str = 'foo'; // also ok! obj = {}; // ! ok!
12. STRING INTERPOLATION
13. 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;
14. ARROW FUNCTIONS
15. 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()); // ?
16. 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(); // ?
17. OBJECT PROPERTIES ENHANCEMENTS
18. 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] );
19. PARAMETERS HANDLING
20. // default params values const foo = (x, y = 1, z = 2) => x * y * z; foo(3); // ? // rest params const bar = (x, y, ...z) => x * y * z.length; bar(1, 2, 'some', 'more', 'args'); // ? // spread syntax const baz = (x, y, z) => x * y * z; const arr = [2, 4, 6]; baz(...arr); // ?
21. DESTRUCTURING
22. 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 + aliasing const { 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 } });
23. CLASSES
24. // class class 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); } } // subclass class 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!');
25. MODULES
26. js helpers.js constants.js app.js moviesManager.js
27. // /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;
28. // /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)); } }
29. // /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)); });
30. GENERATORS
31. Generators are new kind of functions that can be paused/resumed, allowing meanwhile other code to run.
32. 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}`); } });
33. function* generatorFunction() { // paused initally! console.log('Hey'); yield; // operator to pause the generator! console.log('there!'); } const generatorObj = generatorFunction(); generatorObj.next(); // Hey generatorObj.next(); // there! // at the end: { value: undefined, done: true }
34. 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 === ?
35. // function declaration function* generatorFunction() { /* code */ } // function expression const generatorFunction = function* () { /* code */ } // generator method const obj = { * myMethod() { /* code */ } } // generator method def in class class MyClass { * myMethod() { /* code */ } }
36. RESOURCES https://github.com/lukehoban/es6features https://babeljs.io/docs/learn-es2015/ http://exploringjs.com/es6/
37. Thanks. Images taken from https://unsplash.com/