EcmaScript 6: Conheça os novos “loops”

Photo of EcmaScript 6: Conheça os novos “loops”
Facebook
VKontakte
share_fav

A linguagem de script que é a base do JavaScript: seria basicamente esta a definição para “EcmaScript”.

Este artigo tem como objetivo mostrar as diferentes maneiras de como trabalhar com os loops.

Cada “for” tem agora uma forma específica de se fazer, sendo muito mais intuitiva e simples.

Conheça elas:

  • forEach()
  • map()
  • filter()
  • find()
  • every()
  • some()
  • reduce()

A seguir entenda tecnicamente como funciona cada uma delas.

A base deste conhecimento, veio a partir do curso: “Entendendo o ECMAScript 6”, por Diego Martins de Pinho.

(fonte: https://udemy-images.udemy.com/course/750×422/1267132_58bc_3.jpg)

O “for” como conhecemos

Antes de começar com as novas funções, é preciso relembrar o antigo for.

Abaixo, aparece o código de como era antes:

for(var i = 0; i 

Certo. Agora chega de iterar com o “for”!

Conheça a nova função: forEach( );

Imagine a seguinte situação: uma variável que traga, dentro dela, os seguintes nomes: Luiz, Ana e Gabriel. Para que o loop passe por cada uma destas variáveis, anteriormente era necessário percorrer por elas com a seguinte função:

for(var i = 0; i 

Com o forEach(), este código ficou bem mais simples:

nomes.forEach(function(nome){
  console.log(nome);
});

Perceba que a função ficou bem mais simples de entender, no que resulta em um código mais limpo e fácil manutenção.

O poderoso: map( );

O map() retorna um novo array. Em cada valor armazenado no primeiro array, é realizado a iteração, retornado um novo dado, e guardado em um segundo array.

Para que este entendimento seja o mais claro possível, a seguir temos um exemplo de como funciona esta função:

var numeros = [1, 2, 3];var dobro = numeros.map(function(numero){
  return numero*2
});
console.log(dobro);
console.log(numeros);

Já sabia da função filter() ?

O filter() sempre retornará um valor booleano. Se o valor for verdadeiro, o valor entra no array, se acaso for negativo, não entra no segundo array.

Pense na seguinte situação: existe uma lista de alunos e suas idades. Nestes dados, é preciso retornar somente os alunos que forem menores de idade:

var alunos = [
  {nome: 'joão', idade:15},
  {nome: 'josé', idade:18},
  {nome: 'maria', idade:20},
  {nome: 'tulio', idade:17}
];var alunosDeMaior = alunos.filter(function(aluno){
  return aluno.idade >= 18;
});
console.log(alunosDeMaior);

Se fosse feito este mesmo código, porém com a utilização do EcmaScript 5:

var alunos = [
  {nome: 'joão', idade:15},
  {nome: 'josé', idade:18},
  {nome: 'maria', idade:20},
  {nome: 'tulio', idade:17}
];var alunosDeMaior = [];for(var i = 0; i = 18) alunosDeMaior.push(aluno); 
}
console.log(alunosDeMaior);

Nova função: find();

Como o nome mesmo intui, esta função tem como objetivo encontrar o registro. O find() guarda o valor na variável especificada. Porém, ele serve somente para encontrar apenas um registro de dentro do array. Então, caso exista o risco de voltar mais de um registro, deve ser utilizado outro método ou deverá existir uma condição que bata apenas com um registro, pois o find() sempre vai voltar apenas a primeira ocorrência.

Como mostra a seguir o exemplo:

var alunosFind = [
  {nome: 'joão', idade:15},
  {nome: 'adalto', idade:19},
  {nome: 'maria', idade:20},
];
var alunoProcurado = alunosFind.find(function(aluno){
  return aluno.nome === 'adalto';
});
console.log(alunoProcurado);

Para quem é a função: every()?

O every(), ao invés de retornar um array, retorna um valor booleano.

Preste atenção no seguinte exemplo:

var filmes = [
  {nome: '10 coisas que eu odeio em você', categoria: 'romance'},
  {nome: 'Velozes e Furiosos', categoria: 'ação'},
  {nome: 'Os mercenários', categoria: 'ação'},
  {nome: 'Triplo X', categoria: 'ação'}
];
var todosFilmes = filmes.every(function(filme){
  return filme.categoria === 'ação';
});
console.log(todosFilmes);

Na função acima, o valor retornado será “falso” ou “verdadeiro”. A pergunta é: “todos os filmes são de ação?”. O retorno será “falso”, pois existe uma categoria que é diferente das demais, definida na função.

O que fazer com o some()?

O some() pode ser simplificado: método contrário do every().

Ele valida se existe algum valor dentro do array, que respeite o critério estabelecido na função.

var filmes = [
  {nome: '10 coisas que eu odeio em você', categoria: 'romance'},
  {nome: 'Velozes e Furiosos', categoria: 'ação'},
  {nome: 'Harry Poter', categoria: 'aventura'},
  {nome: 'Simpsons', categoria: 'desenho animado'},
  {nome: 'Os mercenários', categoria: 'ação'},
  {nome: 'The walking dead', categoria: 'terror'},
  {nome: 'Triplo X', categoria: 'ação'}
]
var temFilmeDeAcao = filmes.some(function(filme){
  return filme.categoria === 'ação';
});
console.log('Tem filme de ação? : ', temFilmeDeAcao);

Como no exemplo acima, a pergunta seria: “Nesta lista, tem filme com a categoria ação?”, a resposta será “verdadeira” e retorna o valor: true.

Se o some( ) encontrar pelo menos um resultado, ele sempre trará o valor “true”. Experimente tirar todas as categorias de “ação” e obter um resultado booleano diferente.

Último método de auxiliar de array: reduce( );

O reduce() é utilizado quando for necessário pegar os valores do array e condensar eles em um único valor.

O exemplo a seguir, demonstra com mais exatidão o intuito do método reduce( ):

var numeros = [1,2,3,4,5];
var soma = numeros.reduce(function(somaAux, numero){
  return somaAux + numero;
}, 0);console.log(soma);

No código foi realizado a seguinte pergunta: “Qual a soma de todos os valores do array especificado?”. E a resposta, é nada mais que a soma de todos os números, resultando no valor: 15.

Dicas interessantes

Conheça a ferramenta chamada Kangax e saiba qual o nível de compatibilidade/suporte de cada navegador.

Sabia que existe um tradutor de JavaScript? Uma maneira de usar os novos recursos do JS, mesmo que não tenha compatibilidade com alguns navegadores. O Babel é uma ferramenta que traduz, por exemplo, um código em ECMAScript 6, para um código equivalente ao ECMAScript 5, e transforma para uma versão já adotada pelos navegadores.

Outra ferramenta parecida com o Babel, com a mesma função e muito fácil de utilizar se chama Repl.it (https://repl.it/).

Por que aprender EcmaScript 6?

O EcmaScript 6 está presente em diversos Frameworks. Entre eles: Angular, VueJs, React, entre outros.

É fundamental entender a sua base antes de iniciar, seja qual for o Framework escolhido. Mesmo que muitos navegadores ainda estejam se adaptando à linguagem, existem várias formas de se traduzir o código EcmaScript 6 para os navegadores que ainda não possuem a compatibilidade.

Estude EcmaScript 6. Vá em frente!

ver iMasters
#dor
#javascript
#framework
#react
#angular
#desenvolvimento
#vuejs
#ecmascript
#every
#some