Aprenda a utilizar o método forEach no JavaScript para simplificar e facilitar tarefas repetitivas!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:
Na aula de hoje, quero te mostrar o método forEach no JavaScript e demonstrar como ele pode te ajudar a simplificar trabalhos repetitivos!
Muitas vezes, quando estamos trabalhando com programação, precisamos repetir uma mesma estrutura ou um mesmo procedimento diversas vezes.
Com o método forEach, esse trabalho repetitivo pode ser simplificado, pois esse método nos permite iterar sobre todos os elementos de um array e aplicar os procedimentos necessários.
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.
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.
<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>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. Imagine como seria trabalhoso e repetitivo se tivéssemos de fazer isso manualmente para cada piloto presente na Fórmula 1.
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.
Para evitar esse trabalho manual e repetitivo, vamos utilizar o método forEach e criar nosso código em JavaScript.
Podemos deletar essa parte que adicionamos diretamente no HTML e, dentro dos arquivos disponíveis para download, vamos escrever nosso código no arquivo script.js que facilitará e agilizará esse processo.
Como já deixei o material pronto para você, nosso código HTML já está importando nosso código JavaScript. Precisamos apenas desenvolver o código.
Dentro do arquivo script.js teremos um array ordenado dos pilotos, do que pontuou mais para o que pontuou menos, com as informações referentes a eles (nome, time e pontuação).
A partir desse array, que iremos popular nossa tabela. Para isso, iremos criar uma função que identifique o corpo da tabela no arquivo HTML, a partir do id dela, e preencha com as informações de cada piloto presente no array, para quantas linhas forem necessárias.
O passo a passo para o nosso código será: identificar o corpo da tabela, ler os dados presentes na tabela, criar quantas linhas forem necessárias para que todos os dados do array sejam adicionados à tabela, e, por fim, chamar a função criada.
Vamos começar definindo nossa função, ela precisará receber dois argumentos para ser executada, a lista de dados dos pilotos e o id do corpo da tabela.
function popularTabelaComDadosLista(listaDeDadosPilotos, idCorpoTabela) {
}Em seguida, precisamos identificar o corpo da tabela a partir do id. Para isso, vamos criar uma variável que irá receber e armazenar o elemento do nosso documento HTML que tenha o id correspondente, idCorpoTabela (que será o corpo-tabela).
function popularTabelaComDadosLista(listaDeDadosPilotos, idCorpoTabela) {
const corpoTabela = document.getElementById(idCorpoTabela);
}Feito isso, agora precisamos que nossa função construa linhas na nossa tabela para cada piloto presente no nosso array tabelaPilotos. Para isso, utilizaremos o método forEach no JavaScript.
O forEach é utilizado para percorrer cada elemento de um array e executar um procedimento específico para ele. Nesse caso, para cada elemento da listaDeDadosPilotos, queremos adicionar as informações à tabela na nossa página HTML.
O método forEach no JavaScript recebe como argumento uma função de callback, uma arrow function. É ela que vai definir o que será feito com cada elemento percorrido. Nesse caso, chamaremos cada um desses elementos de dadosPiloto.
Essa função de callback recebe como argumento obrigatório o elemento atual que está sendo processado (dadosPiloto). E também pode receber como argumento opcional o índice atual do elemento iterado.
Para o nosso caso, precisaremos utilizar esse argumento opcional para preencher a posição dos pilotos na tabela. Já que essa informação não consta diretamente no nosso array.
function popularTabelaComDadosLista(listaDeDadosPilotos, idCorpoTabela) {
const corpoTabela = document.getElementById(idCorpoTabela);
listaDeDadosPilotos.forEach((dadosPiloto, numeroElemento) => {
});
}Essa função criará uma nova linha de tabela (<tr>) com os dados do piloto para cada elemento na lista. Essa linha ficará armazenada na variável novaLinhaTabela no formato de um texto entre crases.
A estrutura dessa linha será semelhante com a que construímos anteriormente dentro do HTML. Ou seja, ela terá um elemento <td> para cada um dos valores que precisam ser inseridos na tabela.
E ficará entre crases porque dessa forma podemos utilizar a interpolação de string para inserir o valor de variáveis dentro do texto. Essas variáveis ficam definidas dentro de ${}.
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>`;
});
}Para definir a posição do piloto na tabela, utilizaremos o numeroElemento que representa o índice do elemento iterado no momento, mais o número 1, já que o JavaScript começa seus índices a partir do número 0 e não existe a posição 0 em uma tabela de Fórmula 1.
Em seguida, vamos passar em sequência os valores da propriedade name, team e points do objeto dadosPiloto.
Ou seja, a cada iteração do forEach, essa função irá pegar o índice do elemento iterado e somar 1 para determinar a posição, e os valores de cada propriedade para determinar o nome, o time e a pontuação de cada piloto.
Essas informações ficarão estruturadas na forma de um texto que corresponde ao elemento tr do HTML.
Para adicionar essa informação ao nosso HTML, precisamos acessar a propriedade innerHTML do corpoTabela e concatenar a ele a variável novaLinhaTabela.
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;
});
}Feito isso, basta chamarmos a função passando para ela a nossa tabelaPilotos (o array que temos com as informações) e o id do elemento tbody do nosso HTML.
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;
});
}
popularTabelaComDadosLista(tabelaPilotos, 'corpo-tabela');
Perceba como o método forEach facilitou o trabalho, preenchendo mais de 20 pilotos rapidamente.
Nesta aula, demonstrei como o método forEach no JavaScript é capaz de facilitar e simplificar processos e trabalhos repetitivos.
Com um exemplo prático de criação de uma tabela de Fórmula 1, utilizamos o método forEach para preencher rapidamente cada uma das informações dos pilotos participantes em 2023. Um trabalho que, se fosse feito manualmente, demandaria muito tempo e esforço.
Agora, com esse método, você poderá tornar seus processos, trabalhos e tarefas muito mais rápidos e eficientes com o método forEach no JavaScript.
Para acessar publicações de JavaScript, clique aqui!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.
Quer sair do zero no Python e virar uma referência na sua empresa? Inscreva-se agora mesmo no Python Impressionador