Aprenda como usar forEach, e como ele difere de outros métodos, e quando você deve/não deve usá-lo.

Introdução

Se você passou algum tempo em alguma linguagem de programação, muito provavelmente se deparou com um "Loop For". Os loops são quase uma adição diária ao código que escrevemos. O loop for clássico é um dos primeiros trechos de código que aprendemos quando iniciamos nossa vida como programador.

JavaScript é maquina criativa. Há sempre uma tonelada de maneiras diferentes de fazer coisas simples, e cada programador tem sua própria maneira de fazer isso. Neste artigo, aprenderemos de forma simples sobre forEach em JavaScript, com uma abordagem pratica. Vamos direto ao assunto.

O método forEach

Um forEach() é um tipo de método de matriz que executa uma função de retorno de chamada em cada item de uma matriz. Isso significa que forEach() só pode ser usado em itens iteráveis, como Arrays, Sets e Maps.

Aqui está um exemplo de sintaxe de como um forEach() se parece:

const items = ["abacate", "melancia", "melao"];
items.forEach(item => {
 //Coloque seu codigo aqui
 console.log(item.index);
});

O loop forEach executará quantas vezes houver itens dentro da matriz que está sendo executada. Por exemplo, se houver três itens em uma matriz, o forEach será executado três vezes -- uma vez em cada item da matriz.

Ele é usado para percorrer os elementos da matriz e retorna undefined. O retorno de chamada pode receber três argumentos (elemento, valor e índice).

Veja o exemplo abaixo:

let numeroArray = [1, 2, 3 , 4];
//ES5:
arr.forEach(function(elementos){
 return elementos * 2;
});
//retorna "indefinido"

//ES6:
arr.forEach(elementos => elementos * 2);
//retorna "indefinido"

Como você pode ver, o método forEach retorna indefinido, ou seja, ele não altera o array, mas pode alterá-lo com o retorno de chamada.

Podemos ver que o método forEach, em vez de recuperar cada item usando seu índice, passa cada item do array como um argumento da função callback. O retorno de chamada é executado em cada item do array, um após o outro.

Portanto, estes seriam funcionalmente equivalentes:

for (var i = 0; i < arr.length; i++) {
console.log('Elemento', i, 'esse', arr[i]);
}

arr.forEach(function(elemento, i) {
console.log('ElementoA', i, 'ElementoB', elemento);
});

Quando comparamos esses dois métodos de loop por meio de uma matriz, o método forEach é mais limpo e fácil de implementar, pois não precisamos definir manualmente os limites de índice da matriz, como em um loop for.

OBS:

forEach vem com uma pequena ressalva. Só funciona em arrays. Então, se você realmente quer contar, forEach provavelmente não será a melhor opção.

Exemplos de código:

Considere a matriz abaixo. Usaremos o forEach para dobrar cada elemento da matriz.

let arrayNum= [1, 2, 3, 4, 5];

Observe que nunca sairia return de uma função forEach, pois os valores return são simplesmente descartados:

Aplicando o forEach

arrayNum.forEach((num, index) => {
return arrayNum[index] = num * 2;
});

Resultado

// arrayNum = [2, 4, 6, 8, 10]

Conclusão

A principal coisa a lembrar aqui, porém, é que um forEach é útil quando você planeja executar a mesma função em todos os itens de uma matriz. 

Notas finais:

Obrigado por ler, e espero que isso tenha sido útil! 

Segue o links do Guia e da Referência JavaScript

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide