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.
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
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é?
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.
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
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
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
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
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.
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
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); }); } }
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
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
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...
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
diegopinho
koluku
star_zero
yutootsuka
yamatcha
iwasiman
ericgpks
masayaaoyama
fendo181
en2zo
napplecomputer
hicka04
colly
jakevdp
zakiyama
marktimemedia
62gerente
denniskardys
caitiem20
3n
mojombo
tanoku
maltzj
jonrohan