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.

9ce1dc6b940b4ab85ecb2f1eacfbe7c1?s=128

Diego Martins de Pinho

September 28, 2017
Tweet

Transcript

  1. 1.
  2. 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
  3. 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
  4. 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é?
  5. 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.
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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.
  11. 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
  12. 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); }); } }
  13. 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
  14. 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
  15. 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...
  16. 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:
  17. 17.

    Dúvidas? Essa é a hora de vocês perguntarem o que

    diabos eu acabei de mostrar pra vocês nos últimos 40 minutos.
  18. 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