Funções em JavaScript, conhecendo o Foreach

Pensando no mundo das Funções em JavaScript ao longo da nossa jornada como dev, nos deparamos com vários métodos ao explorar o universo dos arrays, e um deles é o forEach().

Acredito que muitos, senão todos, já tenham enfrentado uma situação em que precisamos percorrer cada elemento de um grupo de informações. Nesse contexto, o Foreach se torna um aliado importante, nos permitindo percorrer e manipular cada um deles.

Além disso, os usos possíveis do Foreach incluem: Atualizar dados de um array, manipular o DOM, fazer chamadas assíncronas e criar elementos dinamicamente.

Afinal, qual a estrutura dele?

A estrutura basicamente é a seguinte:

array.forEach(function(element, index, array) {
  // Aqui vai todo o código a ser executado para cada elemento
});

Destrinchando a estrutura, primeiro precisamos do array que vamos iterar, nesse caso seria um array simples de uma sequencia de números:

const numeros = [1,2,3]

Depois pegamos o nome desse Array + forEach:

numeros.forEach()

Dentro do parênteses podemos definir uma função que pode receber um elemento, um incremento e o próprio array que está sendo iterado, nesse caso vamos utilizar apenas o elemento e o incremento:

numeros.forEach(function(element, index){ })

Por último, definimos o que queremos que essa função realize, esse array de números será percorrido e a cada elemento será exibida uma mensagem no console:

numeros.forEach(function(element, index){
console.log(`Elemento no index ${index}: ${number}`)
})

Logo, será exibida a seguinte saída com o índice do elemento dentro do array:

Elemento no index 0: 1
Elemento no index 1: 2
Elemento no index 2: 3
Elemento no index 3: 4
Elemento no index 4: 5

Esse exemplo aborda a iteração de dados estáticos. Agora, para a iteração de dados dinâmicos, veremos a manipulação do DOM.

Aplicando na manipulação do DOM

Podemos mostrar, alterar, atualizar, remover elementos dinamicamente com o Foreach. 

Vejamos uma situação simples, na qual temos um menu de navegação e queremos alterar o estilo dele, caso ele seja o site ativo no momento.

Para isso vamos selecionar cada item de link do menu nav:

const menu = document.querySelectorAll('nav a')

Agora que temos o nosso array, que armazena os elementos de link do nosso menu nav, podemos acessar o método Foreach por ele chamando em cada elemento uma função, que por sua vez alterna para o estilo de ativo:

menu.forEach(toggleLink)

Nessa função pegamos cada item e verificamos se a URL do documento local inclui o conteúdo do HREF do link:

function toggleLink(item) {
  if (document.location.href.includes(item.href)) {
      item.classList.add("ativo")
  }
}

Caso o resultado da verificação seja verdadeiro, é adicionada a classe de menu ativo que contém a estilização que queremos para o link atual:

Concluindo…

Com isso, podemos perceber que o método forEach é poderoso e extremamente útil no cotidiano de um desenvolvedor. Sua simplicidade o torna um elemento essencial para diversas situações comuns nessa longa jornada de aprendizado contínuo.

E para mais informações sobre usos do Foreach, acesse a documentação: mozila.org