Um pouco de JavaScript moderno

Thiago Teixeira Dallacqua

Software Engineer

Murcul

ES2015, ES2016...

ES6, ES7...

OMG eu tenho que re-aprender JavaScript do zero #halp #comofaz

import Component from '../basics';
import { stateManager } from '../higher-order';

export class MyComponent extends Component {

    constructor({ name, address, ...user }, ...params) {
        this.state = {
            name,
            address,
            [`${name}Story`]: 'Hi, this is my story',
            ...user
        };

        const answer = params.find((param) => param === 42);
    }

    sumArray(array = []) {
        return array
            .reduce((current, value) => current + value
            , 0);
    }
}

export default stateManager(MyComponent);

const variable = 'Eu não posso ser mudado';
variable = 'EEERRRRR'; // Erro


let other = 'Eu posso ser mudado';
other = 'YAY!!';

let e const

// código escrito

console.log(typeof fDec); // 'function'
console.log(typeof fExpr) // 'undefined'
console.log(typeof other); // 'undefined'

if (true) {
    var other = '1';
}
console.log(other); // '1'

function fDec() {}

var fExpr = function f(){}


// código compilado e executado

function fDec() {}
var other;
var fExpr;

console.log(typeof fDec);
console.log(typeof fExpr);
console.log(typeof other);

if (true) {
    other = '1';
}
console.log(other);

fExpr = function f(){}

console.log(variable); // Uncaught ReferenceError: variable is not defined

const variable = 'a';

// ES5

if (false) {
    var test = '1';
} else {
    test = '2';
}

console.log(test); // '2'


// ES6

if (false) {
    const test = '1';
} else {
    test = '2';
}

console.log(test); // ?

// obj = { name: 'Thiago', lastName: 'Dallacqua' }
const { name, lastName } = obj;
// array = ['My story', 'Palmas - Tocantins'];
const [story, city] = array;

const user = {
    name,
    lastName,
    fullName: `${name} ${lastName}`,
    story,
    city
};

Destructuring, String template, Object shortcuts

// Rest

const obj = { name: 'Thiago', lastName: 'Dallacqua', city: 'Palmas', state: 'Tocantins' }
const { name, lastName, ...address } = obj;

console.log(name); // 'Thiago'
console.log(lastName); // 'Dallacqua'
console.log(address); // { city: 'Palmas', state: 'Tocantins' }

const arr = ['My story', 'Palmas - Tocantins', 'Católica', 'ADS', 'SI'];
const [story, city, ...others] = arr;

console.log(story); // 'My story'
console.log(city); // 'Palmas - Tocantins'
console.log(others); // ['Católica', 'ADS', 'SI']

// Spread

const object = { name, lastName, ...address };
console.log(object);
// { name: 'Thiago', lastName: 'Dallacqua', city: 'Palmas', state: 'Tocantins' }

const array = [story, city, ...others];
console.log(array);
// ['My story', 'Palmas - Tocantins', 'Católica', 'ADS', 'SI']

Destructuring, String template, Object shortcuts

class Component {
    constructor(elementSelector = '.element') {
        this.domElement = document.querySelector('.element');
        this.name = 'My Element';

        this.domElement.onclick = function({ target }) {
            target.innerHTML = this.name;
            // this === domElement ☹️
        }
    }
}

// formas de Resolver:

const _this = this;
this.domElement.onclick = function({ target }) {
    target.innerHTML = _this.name;
}

// ou
const func = function({ target }) {
    target.innerHTML = this.name;
};
func.bind(this);

this.domElement.onclick = func;

Arrow functions

class Component {
    constructor(elementSelector = '.element') {
        this.domElement = document.querySelector('.element');
        this.name = 'My Element';

        this.domElement.onclick = ({ target }) => {
            target.innerHTML = this.name;
            // this === instance of Component 😀
        }
    }
}

Arrow functions