4 dicas para usar o método forEach de forma eficiente

Se você tem uma variável que é um Array, qual é primeira coisa que você pensa em fazer? Iterar através dos itens! Sim, eu já sabia. É aqui que o método Javascript forEach pode ser útil.

Este post descreve como usar o método forEach() para iterar sobre os itens de um array em JavaScript. Além disso, você vai descobrir as melhores práticas de como utilizar esse método de forma correta.

O básico sobre Javascript forEach

A primeira coisa que você precisa saber sobre esse método é:

array.forEach() itera sobre os itens do array, em ordem ascendente, sem alterar o array.

Essa é uma das diferenças entre o esse método e o método map(), por exemplo.

O primeiro argumento do método é a função callback chamada para cada item do Array. O segundo argumento (opcional) é o argumento this.

Você pode checar todos a sintaxe completa na documentação.

const languages = ['PHP', 'Python', 'Javascript'];
function callbackFunction(item) {
  console.log(item);
}
languages.forEach(callbackFunction);
// "PHP"
// "Python"
// "Javascript"

Utilize o Índice do elemento durante a iteração

Um parâmetro muito útil que podemos usar é o index. O index é sempre o segundo argumento da nossa função de callback.

Esse parâmetro vai te informar qual índice do item que está sendo iterado no momento.

const languages = ['PHP', 'Python', 'Javascript'];
function callbackFunction(item, index) {
   console.log(`${item} - index ${index}`);
}
languages.forEach(callbackFunction);
//"PHP - index 0"
//"Python - index 1"
//"Javascript - index 2"

Acesse o Array dentro do callback

Até aqui, você consegue acessar os itens do Array e o índice de cada elemento. Mas e se você quisesse acessar o Array inteiro, dentro do loop?

Para isso você pode utilizar o terceiro parâmetro da função callback. O terceiro parâmetro da função callback é o Array o qual estamos iterando, então temos acesso a todas as propriedades e métodos do Object.Array.

No exemplo abaixo, eu estou utilizando o parâmetro array para incluir mais um elemento no Array original.

const languages = ['PHP', 'Python', 'Javascript'];
function callbackFunction(item, index, array) {
   console.log(`${item} - index ${index}`);
   if (index == (array.length - 1)) {
      array.push("Java");
   }
}
languages.forEach(callbackFunction);
console.log(languages)
//"PHP - index 0"
//"Python - index 1"
//"Javascript - index 2"
//[ 'PHP', 'Python', 'Javascript', 'Java' ]

forEach pula os espaços vazios no seu Array

Isso pode ser particularmente útil em diversas situações. O método não gera nenhum erro ou excessão, ele apenas ignora o espaço vazio.

const languages = ['PHP', 'Python', 'Javascript'];
function callbackFunction(item) {
  console.log(item);
}
languages.forEach(callbackFunction);
// "PHP"
// "Python"
// "Javascript"

Os itens no entanto mantém os mesmo indices. você consegue iterar sobre os dois itens restantes, mas você não consegue fazer nada sobre o item vazio, (se essa é a sua intenção).

Mas uma coisa que você precisa ter em mente é que o tamanho do array permanece o mesmo, consequentemente o número de iterações.

const languages = ['PHP', , 'Javascript'];
languages.length; // 3

Você pode iterar objetos com forEach

Ok não é forma mais conviniente e nem de longe algo que indicaria. Mas quero mostrar todas as possibilidades. A diferença básica entre um Array e um objeto, é que os itens de um Objeto não tem nenhum ordem definida. Então se você quer iterar um objeto com forEach, você vai precisar adaptar o seu Objeto e deixar ele com uma cara de Array.

const objLikeArrayLanguages = {
   "0": "PHP",
   "1": "Python",
   "2": "Javascript",
   "length": 3
 };
function callbackFunction(item, index, array) {
   console.log(`${item} - index ${index}`);
}
Array.prototype.forEach.call(objLikeArrayLanguages, callbackFunction);
// "PHP - index 0"
// "Python - index 1"
// "Javascript - index 2"

Como você pode ver, conseguimos o mesmo resultado, mas é uma situação tão especifica que espero que você não precise chegar tão longe para resolver.

Conclusão

O método forEach é uma maneira eficiente de iterar sobre todos os itens do array. Seu primeiro argumento é a função de callback, que é invocada para cada item da matriz com 3 argumentos: item, índice e a própria matriz.

forEach() é útil para iterar sobre todos os itens da matriz, sem quebrar, envolvendo simultaneamente alguns efeitos colaterais. Caso contrário, considere um método de array alternativo.

Em quais situações você usa o forEach? Escreva-os em um comentário abaixo.

0 Comments