ForEach em Javascript: Veja Como Usar - Programadores Brasil
JavascriptLinguagens de programaçãoLógica de Programação

[Iniciantes] Aprenda a Como Fazer ForEach em Javascript

4 Mins read

Hoje iniciaremos a nova série de tutoriais de programação em Javascript! Para iniciarmos, veremos como iterar array ao fazer foreach em Javascript. Além disso, veremos boas práticas de como lidar com objetos que se parecem com arrays e também como usar this nesse loop em Javascript.

O método array.forEach( ) itera sobre os itens de um array, em ordem crescente, sem fazer alterações durante o loop. O primeiro argumento de forEach( ) é a função callback – função passada como argumento de uma outra função para ser executada quando a função externa for executada também – chamada para cada item do array. O segundo argumento, que é opcional, é o valor de this para esta callback. Exemplo:

array.forEach(callback [, thisArgument])

Vamos ver como forEach( ) funciona na prática. No exemplo a seguir, o array cores possui 3 itens. Vamos usar forEach( ) para imprimir no console todas as cores:

const cores = ['azul', 'verde', 'branco'];

function ireta(item) {
  console.log(item);
}

cores.forEach(itera);

Resultado:

azul
verde
branco

A função calback itera é chamada na linha cores.forEach(itera) e então executa a função itera para cada item em cores, definindo o item iterado como o primeiro argumento. Desta forma:

  • itera(‘azul’)
  • itera(‘verde’)
  • itera(‘branco’)

É assim que, em poucas palavras, é feito um loop em Javascript usando o método forEach( ), mas vamos ver agora exemplos mais complexos.

Como obter o índice de um item iterado em forEach em Javascript

A função array.forEach(callback) executa a função callback com 3 argumentos: o item iterado atual, o índice do item iterado e a própria instância do array que está sendo iterado. No caso do exemplo do array cores, para acessar os índices dos itens do array:

const cores = ['azul', 'verde', 'branco'];

function itera(item, index) {
  console.log(`${item} tem índice ${index}`);
}
cores.forEach(itera);

Resultado:

azul tem índice 0
verde tem índice 1
branco tem índice 2

Como acessar o array dentro da função callback

Para acessar o próprio array durante o loop forEach( ), você pode usar o terceiro parâmetro dentro da função callback, isto permite fazer muito com o array como códigos condicionais, alterações no array etc.. Exemplo:

const cores = ['azul', 'verde', 'branco'];

function itera(item, index, array) {
  if (index === array.length - 1) {
    console.log('Última iteração do array!');
  }
  console.log(item);
}

cores.forEach(itera);

Resultado:

azul
verde
Última iteração do array!
branco

Uso de this em uma função callback

Agora, iremos executar o código abaixo no console de um navegador. Para isso, clique com o botão direito do mouse e vá para inspecionar e depois Console ou então aperte o botão F12 com a tela de um navegador aberto e depois vá para Console.

const letras = ['a', 'b', 'c'];

function itera(letras) {
  console.log(this === window); // esta comparação retorna true
}

letras.forEach(itera); // imprime "true" três vezes

A palavra reservada this dentro de itera( ) é igual à window, que é o objeto global no ambiente do navegador. Em algumas situações, pode ser necessário definir this como um objeto de interesse para ser utilizado em seu código. Em seguida, indique este objeto como o segundo argumento ao chamar forEach( ):

array.forEach(callback, thisArgument)

No exemplo a seguir, vamos implementar uma classe que tem uma lista de objetos únicos, tal como um conjunto usando forEach( ):

class Unica {
  constructor(itens) {
    this.itens = itens;
  }
  
  append(novosItens) {
    novosItens.forEach(function(novoItem) {
      if (!this.itens.includes(novoItem)) {
        this.itens.push(novoItem);
      }
    }, this);      }
}

const coresUnicas = new Unica(['azul']);
console.log(coresUnicas.itens); // imprime ['azul']

coresUnicas.append(['vermelho', 'azul']);
console.log(coresUnicas.itens); // imprime ['azul', 'vermelho']

O trecho novosItens.forEach(function( ) {}, this) é chamado com o segundo argumento apontando para this, ou seja, a instância da classe Unica. Dentro da função callback de forEach( ), this também aponta para uma instância de Unica. A partir desta parte do código é seguro acessar this.itens.

Observe que, para o exemplo acima, usar uma arrow function como uma função callback de forEach( ) seria melhor. A arrow function preserva o valor de this do escopo léxico, portanto, não há necessidade de usar o segundo argumento em forEach( ).

Pulando itens vazios em arrays

A função forEach( ) pula automaticamente elementos vazios em arrays, caso haja alguma posição que esteja vazia.

const array = [1, , 3];
console.log(array.length);

array.forEach(function(item) {
  console.log(item);
});

Resultado:

3
1, 3

Loop forEach( ) para iterar sobre objetos parecidos com arrays

Caso um objeto seja parecido com um array, contendo um dicionário de índices e itens e também o tamanho deste array, é possível iterar sobre este objeto usando o método Array.prototype.forEach.call( ), que chama a função forEach( ) indiretamente. Exemplo:

const cores = {
  "0": "azul",
  "1": "verde",
  "2": "branco",
  "length": 3
};

function itera(item) {
  console.log(item);
}

Array.prototype.forEach.call(cores, itera);

Resultado:

azul
verde
branco

Outra possibilidade é transformar o objeto em um array, usando a função Array.from( ) e então chamar a função forEach( ) e iterar sobre os itens. Exemplo:

const cores = {
  "0": "blue",
  "1": "green",
  "2": "white",
  "length": 3
};

function itera(item) {
  console.log(item);
}

Array.from(cores).forEach(itera);

Quando usar a função forEach em Javascript

o método forEach( ) é melhor usado para iterar itens de um array, sem quebrar e ter simultaneamente algum efeito colateral. Os exemplos de efeitos colaterais são uma mutação de uma variável de escopo externo, operações de entrada ou saída (como solicitações HTTP), manipulações de DOM, entre outros. Por exemplo, vamos selecionar todos os elementos de entrada do DOM e usar forEach( ) para apagá-los:

const entradas = document.querySelectorAll('input[type="text"]');

entradas.forEach(function(entrada) {
  entrada.value = '';
});

O efeito colateral na função de callback é limpar o valor do campo de entrada. Lembre-se que, normalmente, não pode interromper a iteração de forEach( ) (a não ser através de uma maneira complicada de lançar um erro para interromper a iteração). O método sempre itera sobre todos os itens até o fim. Se o seu caso requer uma pausa precoce no ciclo, a melhor opção é o clássico loop for ou forof.

Quando a iteração da matriz calcula um resultado, sem efeitos colaterais, uma alternativa melhor é selecionar um método de array como:

  • array.map();
  • array.reduce();
  • array.every();
  • array.some();

Veja também:

Cursos de Programação -> Veja também: [+] 4 Dicas de Como Escolher Os Melhores Cursos de Programação.

Curso de Programação -> Veja também: [+] Pacote Full Stack para Iniciantes em Programação.

Curso para Desenvolvimento de Games -> Veja também: [+] Curso completo de Desenvolvimento de Games

Curso de Python para iniciantes ->  Veja também: [+] Pacote Python Faixa preta para iniciantes.


Deixe o seu comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Continue Lendo

Next.js: Conheça o Framework para ReactJS

[Python] Criando um Layout Interativo com Tkinter

[Python] Construindo um Layout para seu App usando Tkinter

[Python] Tkinter - Aprenda a Programar em Python Com Interfaces Gráficas

[Iniciantes] Python List: Aprenda como Manipular as Listas

[Iniciantes] Veja Como Instalar o Python 3 no Windows

WooCommerce: Veja Como Criar Sua Loja Virtual Wordpress

Sistema SAP: Entenda o que é e Como Funciona

[Python] PyCharm ou VSCode ? Qual o Melhor? Veja os Prós e Contras de cada um

[Iniciantes] Java Server Faces (JSF) - Começando do Zero