Nesse artigo vamos falar sobre como iterar sobre arrays em javascript usando os principais métodos da linguagem.
Antigamente a única forma de iterar sobre arrays era através dos loops convencionais (for, while e etc…). Agora temos vários métodos para iterar sobre os arrays, mas nesse artigo falaremos somente de alguns que no caso são: foreach, reduce, map e o filter.
⚠️ Dica: Para melhor compreensão dos exemplos recomendo que leia os comentários do código.
Foreach
O foreach recebe um callback que será executado para cada item do array. Esse callback recebe 3 argumentos, sendo que somente o primeiro é obrigatório, o primeiro argumento indica o item atual do array, o segundo argumento indica o index atual e o terceiro indica o array completo.
O método foreach sempre retorna undefined e por isso é recomendado usá-lo somente quando formos executar um efeito colateral no nosso código,e isto é,toda e qualquer modificação no estado da aplicação percebida fora do destino da função chamada.
const carros = ['ferrari', 'gol', 'audi', 'bmw']
carros.forEach((carroAtual, index, array) => {
console.log(carroAtual) // na primeira vez que esse callback for executado o carroAtual vai ser igual a ferrari, na segunda vez vai ser igual a gol e assim por diante até acabar o array
console.log(index) // Na primeira vez valerá 0 na segunda 1 e assim por diante até acabar o array
console.log(array) // Sempre vai armazenar meu array completo (['ferrari', 'gol', 'audi', 'bmw'])
})
Exemplo de uso:
Vamos imaginar que temos um array que contém vários objetos que representam produtos de uma loja de eletrônicos e queremos inserir o nome desses produtos em uma lista no html, nesse caso o ideal é usarmos o foreach já que a única coisa que estamos fazendo é executar um efeito colateral.
const ul = document.querySelector('ul');
const produtos = [
{ nome: 'Celular', preco: 1227 },
{ nome: 'Notebook', preco: 3000 },
{ nome: 'Monitor', preco: 1550 },
{ nome: 'Desktop', preco: 2500 },
{ nome: 'Mouse', preco: 197 },
{ nome: 'Teclado', preco: 250 },
{ nome: 'Fone', preco: 400 },
];
produtos.forEach(produtoAtual => {
ul.innerHTML += `<li>${produtoAtual.nome}</li>`;
});
Map
O método map é idêntico ao foreach, vai executar seu callback para cada item do array até o arrayacabar. A única e principal diferença é que ele retorna um novo array. Então… Quando devemos usar o map? Devemos usar o map quando queremos um novo array com a mesma quantidade de itens do array original só que com os dados transformados.
Exemplo de uso:
Podemos criar um novo array usando map que contém somente os preços dos meus produtos.
const produtos = [
{ nome: 'Celular', preco: 1227 },
{ nome: 'Notebook', preco: 3000 },
{ nome: 'Monitor', preco: 1550 },
{ nome: 'Desktop', preco: 2500 },
{ nome: 'Mouse', preco: 197 },
{ nome: 'Teclado', preco: 250 },
{ nome: 'Fone', preco: 400 },
];
const precos = produtos.map(produtoAtual => {
return produtoAtual.preco;
});
/*
a variavael preços agora armazena:
[
1227, 3000, 1550,
2500, 197, 250,
400
]
*/
Podemos melhorar nosso código usando o destructuring e usando o retorno implícito da arrow function
const precos = produtos.map(({ preco }) => preco);
Filter
Podemos imaginar o filter exatamente como um filtrador de array’s. Ele retorna um novo array com os elementos filtrados.
Exemplo de uso:
Vamos imaginar que precisamos dos produtos do nosso array que tenham o preço maior que mil reais.
const produtos = [
{ nome: 'Celular', preco: 1227 },
{ nome: 'Notebook', preco: 3000 },
{ nome: 'Monitor', preco: 1550 },
{ nome: 'Desktop', preco: 2500 },
{ nome: 'Mouse', preco: 197 },
{ nome: 'Teclado', preco: 250 },
{ nome: 'Fone', preco: 400 },
];
const produtosCaros = produtos.filter(produtoAtual => {
if (produtoAtual.preco >= 1000) {
return produtoAtual;
}
});
console.log(produtosCaros);
/*
A variavel produtosCaros agora armazena
[
{ nome: 'Celular', preco: 1227 },
{ nome: 'Notebook', preco: 3000 },
{ nome: 'Monitor', preco: 1550 },
{ nome: 'Desktop', preco: 2500 }
]
*/
Podemos melhorar nosso código usando distructuring, usando o retorno implícito da arrow function e evitando o if.
const produtosCaros = produtos.filter(({ preco }) => preco >= 1000);
console.log(produtosCaros);
Reduce
O reduce é um pouco mais complicado de entender mas garanto que com prática ele se tornará mais fácil. O reduce recebe dois argumentos, um callback que pode receber 4 parâmetros acumulador, valorAtual, index, array (exatamente nessa ordem), o segundo parâmetro do reduce é um valor default que vai ser atribuído ao primeiro parâmetro da callback (acumulador) na primeira execução do reduce. Devemos usar o reduce quando a partir de um array eu queira retornar um valor único que não seja um array.
const numeros = [10, 20, 30, 40, 50, 60];
const soma = numeros.reduce((acumulador, valorAtual, index, array) => {
// Na primeira execução o acumulador vai ser igual ao item da primeira posição do array (10) e o valorAtual vai ser igual ao item da segunda posição do array (20)
// Na segunda execução o acumulador vai valer 30, pois a soma de 10 + 20 é igual a 30, já o valorAtual vai ser igual ao terceiro item do array (30)
// Na terceira execução o acumulador vai valer 60, pois 30 + 30 é igual a 60
// Assim vai continuar até meu array acabar
return acumulador + valorAtual;
});
console.log(soma);
Exemplo de uso:
Vamos imaginar que queremos somar o preço de todos os produtos para saber quanto temos no nosso estoque. Esse é um caso típico de uso para o reduce já que queremos retornar um único novo valor que não é um array.
const produtos = [
{ nome: 'Celular', preco: 1227 },
{ nome: 'Notebook', preco: 3000 },
{ nome: 'Monitor', preco: 1550 },
{ nome: 'Desktop', preco: 2500 },
{ nome: 'Mouse', preco: 197 },
{ nome: 'Teclado', preco: 250 },
{ nome: 'Fone', preco: 400 },
];
const valorTotalDoEstoque = produtos.reduce((acumulador, produtoAtual) => {
return acumulador + produtoAtual.preco;
}, 0);
console.log(valorTotalDoEstoque);
/*
A variavel valorTotalDoEstoque agora armazena: 9124
*/
Podemos melhorar o nosso código usando destructuring e o retorno implícito da arrow function.
const valorTotalDoEstoque = produtos.reduce(
(acumulador, { preco }) => acumulador + preco,
0,
);
console.log(valorTotalDoEstoque);
📝 Nota: Nesse caso somos obrigados a passar o segundo parâmetro do
reduce, se não tivéssemos passado o acumulador na primeira iteração seria um objeto e não é possível fazer uma operação matemática em um objeto.
Top comments (0)