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.

Transcript

1. O que tem de tão legal assim no ES6? por: Diego Martins de Pinho
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Dúvidas? Essa é a hora de vocês perguntarem o que diabos eu acabei de mostrar pra vocês nos últimos 40 minutos.
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
19. Muito obrigado! Contatos Site: http://www.diegopinho.com.br Twitter: @DiegoPinho Code Prestige: http://www.codeprestige.com.br/ Twitter: @CodePrestige Facebook: /CodePrestigeBrasil