Upgrade to Pro — share decks privately, control downloads, hide ads and more …

O que tem de tão legal assim no ES6?

O que tem de tão legal assim no ES6?

Nesta palestra iremos discutir sobre as principais melhorias trazidas ao JavaScript e como elas resolvem muitas das antigas dores de cabeça que tínhamos com a linguagem.

Diego Martins de Pinho

September 28, 2017
Tweet

More Decks by Diego Martins de Pinho

Other Decks in Programming

Transcript

  1. O que tem de tão legal assim
    no ES6?
    por: Diego Martins de Pinho

    View full-size slide

  2. Quem sou eu?
    const palestrante = {
    nome: 'Diego Martins de Pinho',
    idade: 25,
    url:'http://www.diegopinho.com.br'
    profissão: 'Desenvolvedor Full Stack',
    realizacoes: [
    {
    livro: 'ECMAScript 6 - Entre de
    cabeça no futuro do JavaScript',
    editora: 'Casa do Código'
    },
    {
    startup: 'Code Prestige'
    objetivo: 'Ensinar programação'
    }
    ]
    }
    palestrante.render();
    http://diegopinho.com.br
    http://entendendoes6.com.br

    View full-size slide

  3. O futuro do JavaScript
    O JavaScript basicamente passou por duas fases:
    adolescente
    zuado, esculachado, piadinha,
    incompreendida, ninguém quer
    adulto
    robusta, flexível, poderosa,
    todo mundo quer

    View full-size slide

  4. O que mudou nos últimos anos?
    Com a explosão do ecossistema node/npm, o JavaScript começou
    a ser mais utilizado pela comunidade e pelo mercado. A
    partir daí, surgiram muitas tecnologias bacanas e a
    linguagem foi ganhando mais força.
    Enquanto você lia isso, mais 128012820 frameworks JS foram
    criados, bacana né?

    View full-size slide

  5. Bem-vindo ao glorioso ES6
    Para tornar a linguagem mais prática e convidativa para
    iniciantes, a sexta versão da especificação ECMAScript
    trouxe várias melhorias significativas.

    View full-size slide

  6. var x const e let
    var mensagem = 'first';
    {
    var mensagem = 'second';
    }
    console.log(mensagem);
    Pergunta:
    O que será exibido no
    console ao executar
    este código?
    A) first
    B) second
    C) undefined
    D) nenhuma das anteriores
    B) second

    View full-size slide

  7. const e let
    Com o let não temos mais este problema, já que agora as
    variáveis possuem escopo de bloco e não de função.
    // escopo de função
    var mensagem = 'first';
    function mensagem() {
    var mensagem = 'second';
    }
    console.log(mensagem);
    ---
    > first
    // escopo de bloco
    let mensagem = 'first';
    {
    let mensagem = 'second';
    }
    console.log(mensagem);
    ---
    > first

    View full-size slide

  8. Já que estamos falando sobre escopos
    const arrayVar = [];
    for(var i = 1; i < 5; i++) {
    array.push(function(){
    console.log(i)
    });
    }
    const arrayLet = [];
    for(let i = 1; i < 5; i++) {
    array.push(function(){console.log(i)});
    }
    Pergunta:
    Qual resultado é obtido ao
    iterar as listas? A) var → 5 5 5 5 5
    let → 1 2 3 4 5
    B) var → 1 2 3 4 5
    let → 1 2 3 4 5
    C) var → 5 5 5 5 5
    let → 5 5 5 5 5
    D) nenhuma das anteriores
    A) var → 5 5 5 5 5
    let → 1 2 3 4 5

    View full-size slide

  9. Quem é você, this?
    var equipe = {
    equipe: 'front-end',
    membros: ['Luciano', 'Maria', 'Virgínia'],
    imprimeNomes: function() {
    this.membros.forEach(function(membro) {
    console.log(membro + ' é da equipe '
    + this.nome );
    });
    }
    }
    Pergunta:
    O que será exibido no
    console ao executarmos
    equipe.imprimeNomes()?
    A) A mensagem é exibida sem
    problemas para cada integrante
    B) A mensagem é exibida uma vez
    com o nome dos integrantes
    C) A mensagem é exibida para cada
    integrante com undefined no final
    D) A mensagem é exibida, mas sem
    o nome do membro nem o time
    C) A mensagem é exibida para cada
    integrante com undefined no final

    View full-size slide

  10. Mas o que está acontecendo?
    Toda função no JavaScript possui um contexto de execução
    acessível por meio do this. Na função de callback do
    forEach(), temos um contexto diferente, por isso ele não
    encontra a propriedade nome e gera undefined.

    View full-size slide

  11. E isso tem solução?
    Uma possível solução pré-ES6 é armazenar o contexto em uma variável
    externa e então referenciá-la:
    var equipe = {
    nome: 'front-end',
    membros: ['Luciano', 'Maria', 'Virgínia'],
    imprimeNomes: function() {
    var that = this; // guarda o contexto
    this.membros.forEach(function(membro) {
    console.log(membro + ' é da equipe'
    + that.nome );
    });
    }
    }
    > Luciano é da equipe
    front-end
    > Maria é da equipe
    front-end
    > Virgínia é da equipe
    front-end

    View full-size slide

  12. Conheçam as Arrow Functions
    Com o ES6,
    chegaram as Arrow
    Functions. Elas
    são funções que
    capturam o
    contexto do seu
    antecessor. Isso
    resolve o nosso
    problema.
    const equipe = {
    nome: 'front-end',
    membros: ['Luciano', 'Maria', 'Virgínia'],
    imprimeNomes() {
    this.membros.forEach((membro) => {
    console.log(membro + ' é da equipe' +
    this.nome);
    });
    }
    }

    View full-size slide

  13. Iterando objetos
    Pergunta:
    Qual é o resultado da
    execução deste código?
    var Casa = {
    metrosQuadrados: 4000,
    altura: 3000,
    nQuartos: 4,
    nBanheiros: 2
    }
    for(var atributo in Casa) {
    console.log(atributo);
    }
    A) Os valores dos atributos serão
    exibidos (4000, 3000, 4, 2)
    B) Será exibido undefined para
    todos os valores
    C) O nome dos atributos serão
    exibidos
    D) nenhuma das anteriores
    C) O nome dos atributos serão
    exibidos

    View full-size slide

  14. Mas e se eu quiser iterar o valor dos itens?
    Nesta abordagem, para iterarmos os valores das propriedades,
    precisamos pegá-las do objeto:
    var Casa = {
    metrosQuadrados: 4000,
    altura: 3000,
    nQuartos: 4,
    nBanheiros: 2
    }
    for(var atributo in Casa) {
    console.log(Casa[atributo]);
    }
    > 4000
    > 3000
    > 4
    > 2

    View full-size slide

  15. A abordagem bacana
    Com o ES6, podemos definir como um objeto deve ser iterado
    usando funções geradoras, símbolos e posteriormente o laço
    de repetição for...of.
    É muita coisa, mas só um exemplo para sentir um gostinho...

    View full-size slide

  16. Iterando Like a boss
    const equipe = {
    gerente: 'Gilberto',
    estagiario: 'Fernanda',
    senior: 'Paulo',
    pleno: 'Camila',
    junior: 'Adão',
    [Symbol.iterator]: function* () {
    yield this.gerente;
    yield this.estagiario;
    yield this.senior;
    yield this.pleno;
    yield this.junior;
    }
    }
    for(let integrante of equipe) {
    console.log(integrante);
    }
    > Gilberto
    > Fernanda
    > Paulo
    > Camila
    > Adão
    Resultado:

    View full-size slide

  17. Dúvidas?
    Essa é a hora de vocês perguntarem o que diabos eu acabei de
    mostrar pra vocês nos últimos 40 minutos.

    View full-size slide

  18. Espero que tenham gostado!
    Esta palestra é
    baseada no livro
    ECMAScript 6 -
    Entre de cabeça no
    futuro do
    JavaScript e o
    curso Entendendo o
    ECMAScript 6
    R$ 30,00
    R$ 30,00

    View full-size slide

  19. Muito obrigado!
    Contatos
    Site: http://www.diegopinho.com.br
    Twitter: @DiegoPinho
    Code Prestige: http://www.codeprestige.com.br/
    Twitter: @CodePrestige
    Facebook: /CodePrestigeBrasil

    View full-size slide