Javascript forEach: o que é e como usar esse método?

Em linguagens de programação existem diferentes tipos de estruturas de repetição, como o for, o while ou o do-while, que são uma espécie de função que permite repetir um ou vários comandos até que uma condição seja atingida. O método JavaScript forEach é um tipo de estrutura de repetição, só que ele é disponível para a manipulação dos elementos de um array.

Trata-se de um recurso muito útil para ser utilizado sempre que queremos que uma determinada função seja aplicada em todos os elementos de um array, pois elimina a necessidade de escrevermos muitas linhas de códigos. Entretanto, é preciso compreender em que situações esse recurso é a melhor alternativa. Por isso, fizemos esse conteúdo em que vamos mostrar.

  • O que é o JavaScript forEach e qual a sua função?
  • Qual a sua sintaxe?
  • Como utilizar o forEach? Confira 5 exemplos
  • Qual a compatibilidade com os navegadores?

Vamos lá? Boa leitura!

O que é o JavaScript forEach e qual a sua função?

Antes de mostrarmos como funciona o método forEach(), vamos falar rapidamente sobre o que é um objeto array. Na prática ele funciona como uma estrutura de dados que permite o armazenamento de outras variáveis ou objetos. Imagine que esses elementos são adicionados a essa estrutura como em uma fila. Dessa forma, o primeiro elemento é o número zero, o segundo é o número um e assim por diante.

Existem diversas formas de manipular os elementos de um array e uma delas é por meio do método forEach(). A tradução em português de forEach é para cada. Portanto, seu objetivo é executar determinada função para cada elemento de um array em ordem ascendente.

Suponha que você tenha uma lista de nomes e deseje exibir na tela uma mensagem de cumprimento para cada nome da lista, por exemplo. Dessa forma, será preciso executar uma determinada ação com cada um desses elementos.

O método forEach() executa uma função callback para cada elemento do array. Por isso, ele representa uma boa alternativa para a execução do exemplo acima. Basicamente, uma função callback corresponde a uma chamada de retorno, ou seja, ela retorna o processamento de um comando ou de um conjunto de comandos para que esse conteúdo seja utilizado no ponto de chamada.

Se você quiser saber mais sobre o que é uma função callback, dê uma olhada nesse conteúdo que traz uma explicação mais detalhada sobre o assunto. É importante dizer que o método forEach() é indicado para quando todos os elementos de um array precisam passar pela ação definida na função callback.

Isso porque uma vez que o loop é iniciado, ele só será encerrado após o processamento do último elemento. Entretanto, existem formas de interromper o loop, como com a utilização do Javascript forEach break. Apesar disso, se a intenção é encontrar um determinado valor no array, por exemplo, esse método não é o mais indicado.

Qual a sua sintaxe?

Como mencionamos, o objetivo do método forEach() é executar uma função callback em todos os elementos de um array. Por isso, ela é passada como parâmetro para a execução do loop. Confira a sua sintaxe a seguir.

array.forEach(funcao_callback(elemento [, indice [, array]])[, thisArgumento])

No qual:

  • array: corresponde ao array de elementos;
  • funcao_callback:
  • elemento: elemento atual que pertence ao array e é passado como referência para a função callback;
  • índice: valor opcional que corresponde ao índice do elemento atual;
  • array: valor opcional que representa o nome do array em que o método forEach() será aplicado;
  • thisArgumento: valor opcional, que corresponde ao valor “this”.

Como utilizar o forEach? Confira 5 exemplos

Existem diferentes formas de utilizar o método forEach(). Por isso, a utilização de exemplos práticos é a melhor forma de demonstrar como ele funciona. Confira, a seguir, diferentes maneiras de aplicar esse recurso.

Exemplo 1

Vamos criar um array com os números de 1 a 6 e exibir na console do navegador apenas os números pares. Confira o código a seguir.

var arrayNumeros = [1,2,3,4,5,6];
function verificaPares(elemento){
    if (elemento % 2 == 0) 
    console.log(elemento);
}
arrayNumeros.forEach(verificaPares);
/*saída:
2
4
6
*/

Na segunda linha do código declaramos a função callback verificaPares para ser utilizada no método forEach(). Perceba que ela recebe apenas um parâmetro, que corresponde a cada elemento do array. Os parâmetros índice e array são opcionais e utilizados automaticamente, ou seja, cada elemento tem seu índice e o valor array corresponde ao array que invocou o método forEach().

Portanto, os parâmetros opcionais só devem ser declarados se forem necessários para o código dentro da função. Confira o próximo algoritmo.

var arrayNumeros = [1,2,3,4,5,6];
function verificaPares(elemento, indice){
    if (elemento % 2 == 0) 
    console.log("O número : " + elemento + " corresponde ao índice " + indice + " do arrayNumeros");
}
arrayNumeros.forEach(verificaPares);
/*saída:
O número 2 corresponde ao índice 1 do arrayNumeros 
O número 4 corresponde ao índice 3 do arrayNumeros 
O número 6 corresponde ao índice 5 do arrayNumeros
*/


Exemplo 2

Outra forma de utilizar o método forEach() é declarar a função ao mesmo tempo em que utilizamos o comando. Confira o algoritmo a seguir.

var arrayNumeros = [1,2,3,4,5,6];
arrayNumeros.forEach(function(elemento){
    if (elemento % 2 == 0) 
    console.log(elemento);
});
/* saída:
2
4
6
*/


Perceba que toda a função é passada como parâmetro ao utilizarmos o método forEach(). Assim como no exemplo anterior, só utilizamos os parâmetros da função callback que serão utilizados no código. Também podemos escrever esse mesmo bloco com a utilização de arrow function, que uma forma de escrever semelhante a uma expressão. Veja o exemplo a seguir.   

var arrayNumeros = [1,2,3,4,5,6];
arrayNumeros.forEach(numero => {
    if (numero % 2 === 0) 
   console.log(numero);
});
/* saída:
2
4
6
*/

Perceba que, ao utilizarmos o método forEach() com arrow function, atribuímos ao parâmetro número o resultado do código declarado após a seta “=>” e entre as chaves “{ }”. Portanto, o resultado será o mesmo que as outras formas já apresentadas.

Exemplo 3

É importante dizer que o método forEach() não faz nenhuma alteração no array original. Por isso, é preciso muito cuidado ao implementar qualquer comando que modifique o array a partir da função callback, pois ele refletirá instantaneamente nos elementos, o que pode causar uma certa confusão ou um resultado indesejado. Veja o exemplo a seguir.

var arrayMarcas = ['Ford', 'BMW', 'Fiat', 'Audi', 'Volkswagen'];
arrayMarcas.forEach((marca, indice) => {
    console.log("A marca " + marca + " corresponde ao índice: " + indice);
    if (marca === 'BMW'){
        let itemExcluido = arrayMarcas.shift();
        console.log("Excluímos o elemento " + itemExcluido);
    }
});
/* saída:
A marca Ford corresponde ao índice: 0
A marca BMW corresponde ao índice: 1
Excluímos o elemento Ford
A marca Audi corresponde ao índice: 2
A marca Volkswagen corresponde ao índice: 3
*/


Nesse exemplo criamos um array chamado arrayMarcas com cinco marcas de veículos. A seguir, utilizamos o método forEach() para percorrer todos os elementos do array e exibimos uma mensagem sobre qual a marca atual e o seu índice no array. Também procuramos pela marca BMW e utilizamos o método shift(), que é aplicado para eliminar o primeiro elemento do array.

Perceba que quando executamos o método shift() exibimos uma mensagem para demonstrar que o array sofreu uma mudança. Ao retirarmos o primeiro elemento, houve alteração no índice e em seus elementos. Entretanto, o método forEach() continua a execução do índice em que já estava. Por isso, o elemento Fiat fica fora da listagem.

Ao executarmos a leitura novamente do arrayMarcas o resultado será diferente, pois o método forEach() reiniciará a passagem por todos os elementos. Veja a continuação do código ao fazer a leitura da variável após a exclusão do primeiro elemento.

arrayMarcas.forEach((marca, indice) => { 
    console.log("A marca " + marca + " corresponde ao índice: " + indice)});
/* saída:
A marca BMW corresponde ao índice: 0
A marca Fiat corresponde ao índice: 1
A marca Audi corresponde ao índice: 2
A marca Volkswagen corresponde ao índice: 3
*/

Exemplo 4

Também é possível utilizar JavaScript forEach object, ou seja, usar o método forEach() com um array de objetos. No exemplo a seguir criamos uma variável com objetos que listam a marca e modelo de cada veículo. Veja o código:

var marcas = [{marca: 'Ford', modelo: 'Focus'},
              {marca: 'BMW', modelo: 'BMW Z4'},
              {marca: 'Fiat', modelo: 'Palio'},
              {marca: 'Audi', modelo: 'A3'}];
marcas.forEach((elemento) => {
      console.log("Marca: " + elemento.marca + " - modelo: " + elemento.modelo);
})
/* saída:
Marca: Ford - modelo: Focus
Marca: BMW - modelo: BMW Z4
Marca: Fiat - modelo: Palio
Marca: Audi - modelo: A3
*/


Exemplo 5

No exemplo a seguir vamos entender como utilizar o thisArgumento, que é um dos parâmetros do método forEach(). Ele é passado para a função callback que, ao ser executada, utiliza esse valor. Confira a depuração do código.

function Operacoes() {
    this.resultadoSoma = 0
    this.resultadoSubtracao = 0
}
Operacoes.prototype.adicionar = function(arrayNumeros) {
    arrayNumeros.forEach((elemento) => {
      this.resultadoSoma += elemento;
    }, this)
}
Operacoes.prototype.subtrair = function(arrayNumeros) {
    arrayNumeros.forEach((elemento, indice) => {
        if (indice == 0)
            this.resultadoSubtracao = elemento;
        else
            this.resultadoSubtracao -= elemento;
    }, this)
}
var operacoesMatematicas = new Operacoes();
operacoesMatematicas.adicionar([5,10,20]);
console.log("O resultado da soma é " + operacoesMatematicas.resultadoSoma);
operacoesMatematicas.subtrair([200,100,50]);
console.log("O resultado da subtração é " + operacoesMatematicas.resultadoSubtracao);
/*saída:
O resultado da soma é 35
O resultado da subtração é 50
*/

Criamos uma função chamada Operações com duas propriedades. A seguir, adicionamos dois métodos a essa função, um que têm a finalidade de somar os elementos do array e o outro, de subtraí-los. Portanto, em cada um deles é utilizado o método forEach(), enquanto o thisArgumento é usado para passar a função Operações, que é necessária no método prototype subtrair() e adicionar().

A seguir, criamos uma variável chamada operaçõesMatemáticas, que utiliza uma instância do objeto Operações e executa os métodos adicionar() e subtrair() com os elementos numéricos de um array. Por fim, exibimos o resultado das operações na console do navegador.

Qual a compatibilidade com os navegadores?

O método forEach() pode não funcionar de maneira adequada em todos os navegadores. Isso acontece especialmente em versões mais antigas, que não contemplam todos os recursos que acompanham a evolução do JavaScript. Dessa forma, podem acontecer falhas durante a execução de uma aplicação web.

Por isso, é importante que as pessoas que desenvolvem programas avaliem a compatibilidade entre essas ferramentas para utilizá-la com mais segurança. Confira, a seguir, a partir de quais versões os principais navegadores oferecem suporte total a esse recurso.

  • Chrome: 23;
  • Edge: 12;
  • Firefox: 21;
  • Internet Explorer: 10;
  • Safari: 6;
  • Opera: 15;
  • iOS Safari: 6;
  • Android Browser: 81;
  • Opera Mobile: 46;
  • Chrome for Android: 81;
  • Firefox for Android: 68;
  • Samsung Internet: 4.

O JavaScript forEach é um tipo de estrutura de repetição utilizado para a manipulação de arrays. É uma ferramenta indicada para quando é preciso executar uma determinada função em todos os seus elementos. Existem diversas formas de usar esse recurso, que também contribui para reduzir a necessidade de escrever muitas linhas de código e, portanto, a mantê-lo mais organizado.

Gostou do nosso conteúdo sobre como utilizar o método forEach()? Então confira este guia inicial sobre expressões regulares com dicas imperdíveis sobre o assunto!