Funcão forEach() em JavaScript
Conhecendo o forEach JavaScript ☕:
"forEach()" é um método interno em JavaScript que permite
iterar sobre os elementos de um array(matriz) ou propriedades de um objeto e executar uma função para cada elemento. É uma maneira de simplificar o processo de looping através de elementos de array sem a necessidade de loops tradicionais como por exemplo o "for".
Diferenças entre o for loop e forEach☕:
Embora ambos sejam utilizados para percorrer arrays, eles possuem diferenças notáveis em sua sintaxe e comportamento, o loop for é uma estrutura de controle que oferece maior flexibilidade e controle durante a iteração, permitindo definir condições de início, parada e incremento manualmente.
Por outro lado, o forEach é mais conciso e expressivo, pois automatiza parte desse processo, lidando com os detalhes de índices e controle de iteração.
Sintaxe
let array = [...];
array.forEach(function(element, index, array),thisArg){
//crie a iteração aqui;
});
Note que a função tem três parâmentros:
- element
- index
- array
Callback:
Função para executar em cada elemento, recebendo três argumentos:
Ex:
function myFunction(number, index, array) {
console.log(`No array: ${array}, o ${number} está no ${index}`);
// a função callback pode receber até três parâmetros, podemos iterar de varias formas;
});
Element:
O valor atual do elemento sendo processado no array.
Ex:
[15, 10, 5, 8] // cada valor separado por ",";
Index:
O índice do elemento atual sendo processado no array, cada elemento tem uma posição e ela se inicia a partir do "0".
Ex:
[0, 1, 2, 3]; // cada posição dentro do array;
Array :
O array que forEach() está sendo ou será aplicado.
Ex:
let arrayAtual = [15, 10, 5, 8];
ThisArg:
Valor a ser usado como "this" quando executar callback.
Benefícios do forEach() ☕:
O método forEach traz alguns benefícios bem notáveis:
Código mais limpo;
Maior legibilidade;
Funcionalidade mais concisa;
Reduções de erros.
Malefícios do forEach()☕:
Por ele não ter tratamento de parada, ele vai te deixar na mão, no caso terá que usar os loops tradicionais como o "for loop".
Como ficará na pratica:
Aqui está um exemplo de como usar para iterar através de um array de números e registrar cada número e indice no console:
let arrayAtual = [15, 10, 5, 8];
arrayAtual.forEach( function myFuntion(number, index, array) {
console.log(`No [${array}], o ${number} está no indice: ${index}`);
});
Saída no console:
No [15,10,5,8], o 15 está no indice: 0
No [15,10,5,8], o 10 está no indice: 1
No [15,10,5,8], o 5 está no indice: 2
No [15,10,5,8], o 8 está no indice: 3
Você também pode usar funções de seta para uma sintaxe mais concisa:
numbers.forEach((number, index) => {
console.log(`${index} = ${number};` );
});
Saída no console:
0 = 15;
1 = 10;
2 = 5;
3 = 8;
forEach em Objetos☕:
Embora seja mais comum usar o forEach com arrays, ele também pode ser aplicado a objetos para percorrer suas propriedades.
Ex:
let tenis = {
marca: 'nike',
modelo: 'Airmax',
ano: 2022
};
Object.keys(tenis).forEach(function(prop) {
console.log(`${prop}: ${tenis[prop]}`);
});
Saída no console:
marca: nike
modelo: Airmax
ano: 2022
Conclusão:
😰☕
Lembrando que o objetivo principal do metodo forEach() é iterar e executar alguma ação sobre cada elemento.
💻😅
Fonte: Array.prototype.forEach() - JavaScript | MDN (mozilla.org).
Fonte: Javascript ForEach: Tudo o que você precisa saber [2023] (alonza.com.br)
