ES6 - Level up your JavaScript Skills

50 %
50 %
Information about ES6 - Level up your JavaScript Skills

Published on November 23, 2016

Author: stefanoceschiberrini

Source: slideshare.net

1. LEVEL UP YOUR SKILLS ES6 by Stefano Ceschi BerriniProgrammers 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/

Add a comment