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 arrays. Aqui veremos alguns métodos que já existiam na especificação e outros que foram incorporados de bibliotecas famosas.

Cada “for” tem agora um objetivo específico, sendo muito mais intuitivo 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.

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 < 10; i++){
  // algum código
}

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

Conheça 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 < nomes.length; i++){
  console.log(nomes[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 < alunos.length; i++){
 var aluno = alunos[i];
 if(aluno.idade >= 18) alunosDeMaior.push(aluno); 
}
console.log(alunosDeMaior);

Encontrando com 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

• Kangax – https://kangax.github.io/compat-table/es6/

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

• Babel – https://babeljs.io/

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. E do ES7 para o ES6 e assim em diante.

Outra ferramenta parecida com o Babel, com a mesma função e muito fácil de utilizar se chama Repl.it (https://repl.it/). Você pode testar todos os métodos deste artigo nela.

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.

Se você ainda não o domina, estude o EcmaScript 6. Vá em frente!