Neste breve artigo, estarei mostrando como usar o forEach no JavaScript usando todas as possibilidades de passagem de valores no exemplos. Estarei presumindo que você entende como funcionam Arrays e Arrow Functions.
Descrição e uso do forEach
O forEach é um método acessado dos objetos array (vetores) que itera entre todos os itens da lista executando uma função que informamos passada por parâmetro. Sendo assim, quando você possui uma coleção que precisa ser iterada ele é um ótimo candidato por ser sucinto e fácil de entender.
Quando não usar o forEach
Se você precisa parar a iteração, o forEach não é o melhor candidato. Ele não é um loop que podemo encerrar com ‘break’ e se na função de callback colocarmos um ‘return’, ele simplesmente seguirá para o próximo item. Neste tipo de situação, de preferencia para os loops tradicionais.
Array.forEach simples
a forma mais simples é chamando o método e passando uma função de callback que possui apenas um parâmetro
// Uma lista simples const dados = [1,2,3,4,5,6,7,8]; // uma função de callback com apenas 1 item passado de parametro const callback = item => console.log(item) // a chamada dados.forEach(callback);
Poderíamos colocar a função diretamente dentro da chamada
dados.forEach(item => console.log(item));
Ou chamar todo o primeiro exemplo em apenas 1 linha
[1,2,3,4,5,6,7,8].forEach(item => console.log(item));
Mas é importante tentar manter o seu código o mais fácil de entender possível.
Array.forEach com 2 parâmetros no callback
Digamos que você precise saber o índice do item por algum motivo, neste caso, precisamos informar mais um parâmetro em nossa callback. Vamos fazer um exemplo um pouco diferente
// Uma lista com strings para não confundir com o valor do indice
const dados2 = ['caixa', 'pallet', 'caixote', 'sacola', 'avulo'];
// A callback agora precisa de um segundo parametro
const callback2 = (item, indice) => console.log(`${indice}: ${item}`)
// mesma chamada
dados2.forEach(callback2);
Ao executar o código você verá que teremos a posição dos items e seus valores. Para comparação, o For tradicional geraria este Loop da seguinte maneira:
for(let indice; indice < dados2.length; indice++) console.log(`${indice}: ${item}`)
Array.forEach com 2 parâmetros
Para este exemplo, manteremos o nosso segundo vetor
const dados2 = ['caixa', 'pallet', 'caixote', 'sacola', 'avulo'];
e vamos criar um objeto bem simples com apenas 1 função que executa um console log no valor passado por parametro, no mundo real seria somente uma função, mas para nosso exemplo ele ele vale.
let obj = { log : (umItem) => console.log(umItem)}
Agora, se você quisesse executar o obj.log para cada item do dados2, você poderia fazer algo assim:
dados2.forEach(item => obj.log(item));
e vai funcionar. Agora digamos que você tenha uma ambiente dinamico no qual você não sabe o qual objeto está executando o método log e dentro deste método poderiam acontecer coisas diferentes ou até que você está montando uma biblioteca que receberá o objeto e executará alguma coisa. Como você faria? Com o forEach, é possível fazer o seguinte
dados2.forEach(item => this.log(item), obj);
Deu erro? Isso é porque arrow function não podem receber escopo, se não entendeu, veja novamente o link Arrow Functions. Entendeu, então a parte abaixo é simples. A solução mais simples, use a função normal.
dados2.forEach(function(item){ this.log(item)}, obj);
Era isso, espero que tenham gostado, qualquer duvida deixem nos comentários.