Método forEach no JavaScript: automatize tarefas repetitivas

Aprenda como usar o Método forEach no JavaScript para automatizar tarefas repetitivas e gerar tabelas dinâmicas de forma prática e eficiente.

Método forEach no JavaScript – Simplificando Trabalhos Repetitivos

Você já percebeu como tarefas repetitivas consomem tempo e energia no desenvolvimento? Copiar e colar estruturas, editar linhas manualmente e repetir o mesmo padrão dezenas de vezes é cansativo — e totalmente evitável.

É aí que entra o Método forEach no JavaScript. Ele permite que você percorra listas de dados automaticamente e aplique uma mesma ação em todos os itens, sem precisar escrever o mesmo código várias vezes.

Neste artigo, você vai aprender, na prática, como usar o método forEach para transformar uma tabela estática em uma tabela dinâmica, gerada automaticamente a partir de dados. Tudo de forma simples, didática e pensada para quem está começando.

Para que possamos compreender melhor como esse método funciona, eu preparei um exemplo envolvendo a criação de uma tabela de resultados da fórmula 1 em 2023.

Então, faça o download do material disponível e vamos aprender a utilizar o método forEach no JavaScript.

Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

Contextualizando o Exemplo da Aula

O objetivo desta aula será construir um sistema que gere uma tabela com a classificação dos pilotos de Fórmula 1 no ano de 2023, semelhante ao exemplo abaixo.

No material disponível para download, já deixei o código HTML da nossa página que receberá a tabela de classificação. Nela, teremos a posição, o piloto, a equipe e o número de pontos.

Se analisarmos esse código HTML, veremos que dentro dele temos um elemento table. Dentro desse elemento, temos a tag thead que representa o cabeçalho da tabela, com outros elementos th, sendo o texto de cada um dos cabeçalhos.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="./style.css" />
    <title>f1-2023-standings</title>
    <script defer src="./script.js"></script>
  </head>
  <body>
    <header class="bg-red-600 py-5 flex justify-center">
      <img
        src="./assets/logo/f1_logo.svg"
        alt="Logo da fórmula 1"
        class="h-8" />
    </header>
    <main>
      <h2 class="text-xl font-f1-bold m-5 text-center">
        2023 Driver Standings
      </h2>
      <table class="mt-8 table-auto w-screen text-sm text-gray-800">
        <thead class="text-sm font-f1-regular text-gray-500 uppercase">
          <th class="text-sm pb-5">Pos</th>
          <th class="text-sm pb-5">Piloto</th>
          <th class="text-sm pb-5">Equipe</th>
          <th class="text-sm pb-5">Pontos</th>
        </thead>
        <tbody id="corpo-tabela"></tbody>
      </table>
    </main>
  </body>
</html>

Além disso, logo abaixo, temos a tag tbody com o id “corpo-tabela”. É dentro dessa tag que iremos inserir os elementos tr, que são as linhas da tabela e, para cada tr, iremos adicionar um número de tags td correspondente a cada informação presente.

Ou seja, precisamos criar um elemento td para a posição, um para o piloto, um para a equipe e outro para os pontos. E repetir esse processo para cada piloto que participou da Fórmula 1 em 2023.

Vamos fazer isso apenas para o primeiro piloto.

      <table class="mt-8 table-auto w-screen text-sm text-gray-800">
        <thead class="text-sm font-f1-regular text-gray-500 uppercase">
          <th class="text-sm pb-5">Pos</th>
          <th class="text-sm pb-5">Piloto</th>
          <th class="text-sm pb-5">Equipe</th>
          <th class="text-sm pb-5">Pontos</th>
        </thead>
        <tbody id="corpo-tabela">
          <tr>
            <td class="text-center">1</td>
            <td class="text-center">Max Vestappen</td>
            <td class="text-center">Red Bull Racing</td>
            <td class="text-center">575</td>
          </tr>
        </tbody>
      </table>

Perceba quantas linhas de código eu precisei escrever para adicionar apenas um piloto. Agora pense em fazer isso para todos os pilotos. Além de demorado, qualquer alteração futura vira outro problema.

O objetivo aqui é simples: deixar o JavaScript gerar essas linhas automaticamente a partir de uma lista de dados.

Observação: Dentro dos elementos td, adicionei também a classe text-center, pois no exemplo dessa aula estou utilizando a biblioteca Tailwind CSS. O Tailwind CSS é uma biblioteca que fornece predefinições de estilos em CSS que simplifica o processo de estilização.

Estrutura base da tabela em HTML

Como visto, a página já possui uma estrutura básica, com o cabeçalho e o corpo da tabela vazio:

<table class="mt-8 table-auto w-screen text-sm text-gray-800">
  <thead class="text-sm font-f1-regular text-gray-500 uppercase">
    <th>Pos</th>
    <th>Piloto</th>
    <th>Equipe</th>
    <th>Pontos</th>
  </thead>
  <tbody id="corpo-tabela"></tbody>
</table>

O ponto importante aqui é o id="corpo-tabela". Ele será usado pelo JavaScript para inserir as linhas automaticamente.

Lista de dados dos pilotos em JavaScript

Os dados que iremos utilizar estão organizados em um array de objetos dentro do arquivo script.js, seguindo o modelo abaixo:

const tabelaPilotos = [
  { name: 'Max Verstappen', team: 'Red Bull Racing', points: 575 },
  { name: 'Sergio Perez', team: 'Red Bull Racing', points: 285 },
  { name: 'Lewis Hamilton', team: 'Mercedes', points: 234 },
  { name: 'Fernando Alonso', team: 'Aston Martin', points: 206 },
];

Cada objeto representa um piloto, com três propriedades:

• name (nome)
• team (equipe)
• points (pontos)

Esse formato é ideal para usar o Método forEach no JavaScript.

Full Stack Impressionador

Essa é uma trilha de especialização que vai te tornar um verdadeiro Desenvolvedor Web Full Stack, dominando todas as principais tecnologias usadas tanto para o Front End quanto para o Backend e ainda para Mobile, construindo projetos práticos e exercícios aplicados à realidade das empresas. Tudo o que você precisa para se tornar um Desenvolvedor Full Stack em um único lugar.

Começar agora

O que é o método forEach no JavaScript?

O foreach JavaScript é um método que percorre todos os elementos de um array e executa uma função para cada item.

Estrutura básica:

array.forEach((item, index) => {
  // ação para cada item
});

• item → representa o objeto atual
• index → posição do item no array (começa em 0)

É exatamente o que precisamos para gerar as linhas da tabela.

Criando a função para popular a tabela

Vamos criar uma função reutilizável com o método forEach. O passo a passo para a função será: identificar o corpo da tabela, ler os dados presentes nela e criar quantas linhas forem necessárias para que todos os dados do array sejam adicionados.

function popularTabelaComDadosLista(listaDeDadosPilotos, idCorpoTabela) {
  const corpoTabela = document.getElementById(idCorpoTabela);

  listaDeDadosPilotos.forEach((dadosPiloto, numeroElemento) => {
    const novaLinhaTabela = `<tr>
    <td class="text-center py-4">${numeroElemento + 1}</td>
    <td class="text-center py-4">${dadosPiloto.name}</td>
    <td class="text-center py-4">${dadosPiloto.team}</td>
    <td class="text-center py-4">${dadosPiloto.points}</td>
  </tr>`;

    corpoTabela.innerHTML += novaLinhaTabela;
  });
}

Explicação do Código Passo a Passo:

Vamos começar definindo nossa função. Ela precisa receber dois parâmetros para funcionar corretamente:

1. A lista de dados dos pilotos.
2. O id do corpo da tabela onde as linhas serão inseridas.

function popularTabelaComDadosLista(listaDeDadosPilotos, idCorpoTabela) {
}

Em seguida, precisamos identificar o corpo da tabela a partir do id recebido. Para isso, vamos criar uma variável que irá armazenar o elemento do HTML correspondente ao tbody da tabela.

Utilizamos o método document.getElementById(), que busca no documento o elemento cujo id seja igual ao valor informado em idCorpoTabela (no nosso caso, corpo-tabela).

function popularTabelaComDadosLista(listaDeDadosPilotos, idCorpoTabela) {
  const corpoTabela = document.getElementById(idCorpoTabela);
}

Agora precisamos que nossa função crie dinamicamente uma linha na tabela para cada piloto presente no array listaDeDadosPilotos. Para isso, utilizaremos o método forEach no JavaScript.

O método forEach percorre todos os elementos de um array e executa um procedimento específico para cada um deles. Ou seja, para cada piloto, vamos gerar uma nova linha na tabela.

Esse método recebe como argumento uma função de callback (uma arrow function), que define o que será feito com cada item iterado. Chamaremos cada item de dadosPiloto.

Essa função de callback recebe dois parâmetros:

• o elemento atual do array (obrigatório),
• o índice desse elemento (opcional).

Utilizaremos esse segundo parâmetro para definir a posição do piloto na tabela, já que essa informação não existe diretamente no array.

function popularTabelaComDadosLista(listaDeDadosPilotos, idCorpoTabela) {
  const corpoTabela = document.getElementById(idCorpoTabela);

  listaDeDadosPilotos.forEach((dadosPiloto, numeroElemento) => {
  });
}

Dentro dessa função de callback, vamos criar uma nova linha de tabela (<tr>) para cada piloto. Essa linha será armazenada na variável novaLinhaTabela como uma string.

Usamos crases (`) para permitir interpolação de strings, ou seja, inserir valores de variáveis dentro do texto por meio da sintaxe ${}.

function popularTabelaComDadosLista(listaDeDadosPilotos, idCorpoTabela) {
  const corpoTabela = document.getElementById(idCorpoTabela);

  listaDeDadosPilotos.forEach((dadosPiloto, numeroElemento) => {
    const novaLinhaTabela = `<tr>
    <td class="text-center py-4">${numeroElemento + 1}</td>
    <td class="text-center py-4">${dadosPiloto.name}</td>
    <td class="text-center py-4">${dadosPiloto.team}</td>
    <td class="text-center py-4">${dadosPiloto.points}</td>
  </tr>`;
  });
}

Aqui acontece o seguinte:

• numeroElemento representa o índice do item no array.
• Como índices começam em 0, somamos 1 para exibir a posição correta na tabela (não existe posição 0 em uma classificação).
• Em seguida, usamos as propriedades name, team e points do objeto dadosPiloto para preencher as demais colunas.

Ou seja, a cada iteração do forEach:

• Calculamos a posição do piloto.
• Inserimos nome, equipe e pontuação.
• Montamos uma linha completa em HTML.

Agora precisamos inserir essa linha no HTML. Para isso, usamos a propriedade innerHTML do corpoTabela e concatenamos a nova linha criada.

function popularTabelaComDadosLista(listaDeDadosPilotos, idCorpoTabela) {
  const corpoTabela = document.getElementById(idCorpoTabela);

  listaDeDadosPilotos.forEach((dadosPiloto, numeroElemento) => {
    const novaLinhaTabela = `<tr>
    <td class="text-center py-4">${numeroElemento + 1}</td>
    <td class="text-center py-4">${dadosPiloto.name}</td>
    <td class="text-center py-4">${dadosPiloto.team}</td>
    <td class="text-center py-4">${dadosPiloto.points}</td>
  </tr>`;

    corpoTabela.innerHTML += novaLinhaTabela;
  });
}

Com isso, cada linha gerada é adicionada ao corpo da tabela até que todos os pilotos sejam exibidos.

Chamando a função

Por fim, chamamos a função passando:

• o id do tbody da tabela.
• o array tabelaPilotos.

popularTabelaComDadosLista(tabelaPilotos, 'corpo-tabela');

E pronto! A tabela é preenchida automaticamente.

Perceba como o método forEach elimina a necessidade de criar manualmente dezenas de linhas HTML, tornando o código mais limpo, organizado e escalável. Em vez de repetir estrutura, você faz o JavaScript trabalhar por você.

Por que usar o Método forEach no JavaScript?

• Reduz código repetitivo
• Facilita manutenção
• Deixa o projeto mais escalável
• Evita erros humanos
• Automatiza processos

É uma das ferramentas mais importantes para quem está começando em JavaScript.

Conclusão – Método forEach JavaScript

O Método forEach no JavaScript é uma solução direta para eliminar tarefas repetitivas e tornar seu código mais inteligente. Ao aplicá-lo, você automatiza processos, ganha produtividade e melhora a qualidade do seu projeto.

Se você quer aprender a criar aplicações completas, automatizadas e profissionais, dê o próximo passo e conheça nosso curso completo Full Stack Impressionador.

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

FAQ – Perguntas Frequentes sobre forEach JavaScript