DEV Community

Lucas Wendell
Lucas Wendell

Posted on

Iterando sobre arrays

#watercooler

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'])
})
Enter fullscreen mode Exit fullscreen mode

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>`;
});
Enter fullscreen mode Exit fullscreen mode

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
]
*/
Enter fullscreen mode Exit fullscreen mode

Podemos melhorar nosso código usando o destructuring e usando o retorno implícito da arrow function

const precos = produtos.map(({ preco }) => preco);
Enter fullscreen mode Exit fullscreen mode

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 }
]
*/
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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
*/
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

📝 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)