image

Acesse bootcamps ilimitados e +650 cursos pra sempre

60
%OFF
Article image
Luiz Souza
Luiz Souza17/08/2023 09:41
Compartilhe
Nexa - Análise Avançada de Imagens e Texto com IA na AWSRecomendados para vocêNexa - Análise Avançada de Imagens e Texto com IA na AWS

Funcão forEach() em JavaScript

  • #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:

  1. element
  2. index
  3. 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)

Compartilhe
Recomendados para você
GFT Start #6 - Lógica de Programação
Potência Tech iFood - Desenvolvimento de Jogos
Potência Tech iFood - Programação do Zero
Comentários (0)
Recomendados para você