For JavaScript: como usar o loop da linguagem?

Os loops são fundamentais em qualquer linguagem de programação, e em JavaScript não é diferente!

Neste artigo, vamos explorar o uso do loop “for” em JavaScript, entender como ele funciona e ver exemplos práticos do seu uso. Além disso, discutiremos as diferenças entre for/in e for/of. Vamos lá! 

O que é um loop em JavaScript?

Um loop em JavaScript é uma estrutura de controle fundamental que permite a repetição de um bloco de código várias vezes. Essa repetição é executada enquanto uma condição específica permanecer verdadeira. Em outras palavras, um loop permite automatizar tarefas repetitivas, evitando a necessidade de escrever o mesmo código várias vezes. 

Imagine que você precise executar uma determinada tarefa várias vezes, como imprimir uma mensagem no console cinco vezes seguidas. Em vez de escrever a instrução de impressão cinco vezes, você pode usar um loop para fazer isso de forma mais eficiente. 

A linguagem de programação JavaScript oferece várias formas de implementar loops, mas todos eles seguem o mesmo princípio básico: repetir um bloco de código enquanto uma condição for verdadeira. 

Essas condições podem ser baseadas em contadores, valores de arrays, propriedades de objetos ou qualquer outra expressão que possa ser avaliada como verdadeira ou falsa. 

A capacidade de usar loops é fundamental para escrever código JavaScript eficiente e elegante. Eles permitem lidar com grandes conjuntos de dados, processar listas, realizar cálculos repetitivos e muito mais, tudo de forma automatizada e concisa. 

O que é o For? 

O “for” em JavaScript é uma estrutura de controle de loop utilizada para repetir um bloco de código várias vezes, com base em uma condição específica. Ele é uma das estruturas de loop mais comuns e versáteis na linguagem JavaScript. 

É frequentemente utilizado quando se sabe exatamente quantas vezes deseja-se executar um bloco de código, tornando-o ideal para iterações sobre arrays, manipulação de dados ou execução de tarefas repetitivas.

Como funciona o For em JavaScript? 

A estrutura do “for” é composta por três partes essenciais: a inicialização, a condição e o incremento. Essas partes são definidas entre parênteses logo após a palavra-chave “for”, proporcionando um controle preciso sobre o fluxo do loop. 

• Inicialização: A primeira parte do “for” é a inicialização, onde você define e inicializa uma variável de controle do loop. Esta variável é geralmente utilizada como um contador, que será atualizado a cada iteração do loop. 

for (let i = 0; i < 5; i++) { 
} 

Neste exemplo, a variável “i” é inicializada com o valor 0. Isso geralmente representa o índice inicial de uma coleção ou o contador do loop. 

• Condição: A segunda parte do “for” é a condição, onde você especifica a condição que determina se o loop deve continuar ou não. Enquanto essa condição for verdadeira, o bloco de código dentro do loop continuará a ser executado. 

for (let i = 0; i < 5; i++) { 
} 

Neste caso, a condição é “i < 5”. Enquanto “i” for menor do que 5, o loop continuará a ser executado. 

• Incremento/Decremento: A terceira parte do “for” é o incremento ou decremento, onde você atualiza a variável de controle do loop a cada iteração. Isso geralmente envolve aumentar ou diminuir o valor do contador. 

for (let i = 0; i < 5; i++) { 
} 

Aqui, “i++” significa que o valor de “i” será incrementado em 1 a cada iteração. 

O loop “for” é extremamente versátil e pode ser usado em uma variedade de situações. Desde percorrer arrays e objetos até repetir ações específicas um número determinado de vezes, o “for” é uma ferramenta indispensável para muitos desenvolvedores JavaScript. 

Exemplos do uso de for em JavaScript 

Vamos ver alguns exemplos do uso do loop “for” em JavaScript (2 mais simples e 1 mais complexo): 

Exemplo 1: Imprimir números de 1 a 5 

for (let i = 1; i <= 5; i++) { 
    console.log(i); 
}

Neste exemplo, estamos utilizando um loop “for” para imprimir os números de 1 a 5 no console. 

• let i = 1;: Aqui, inicializamos a variável i com o valor 1. Este será o nosso contador, começando do número 1. 
• i <= 5;: Esta é a condição do loop. Enquanto i for menor ou igual a 5, o loop continuará a ser executado. 
• i++: Após cada iteração do loop, incrementamos o valor de i em 1. Isso garante que o loop progrida para o próximo número. 

Durante cada iteração do loop, o valor de i é impresso no console usando console.log(i). 

Então, o resultado desse código será: 

1
2
3
4
5 

Exemplo 2: Iterar por um array 

const frutas = ["maçã", "banana", "laranja", "morango"]; 
for (let i = 0; i < frutas.length; i++) { 
    console.log(frutas[i]); 
} 

Neste exemplo, estamos utilizando um loop “for” para iterar sobre os elementos do array frutas e imprimir cada elemento no console. 

• let i = 0;: Aqui, inicializamos a variável i com o valor 0. Esta variável será o nosso índice para acessar cada elemento do array. 
• i < frutas.length;: A condição do loop verifica se o valor de i é menor que o comprimento do array frutas. Enquanto essa condição for verdadeira, o loop continuará a ser executado. 
• i++: Após cada iteração do loop, incrementamos o valor de i em 1 para acessar o próximo elemento do array. 

Durante cada iteração do loop, usamos console.log(frutas[i]) para imprimir o elemento atual do array frutas correspondente ao índice i. 

Então, o resultado desse código será: 

maçã
banana
laranja
morango 

Exemplo 3 (Mais complexo): Criar uma tabela HTML com dados 

<body> 

<h2>Dados do Usuário</h2> 

<table id="tabela-dados"> 

     <thead> 

         <tr> 

             <th>Nome</th> 

             <th>Idade</th> 

             <th>Profissão</th> 

         </tr> 

     </thead> 

     <tbody id="corpo-tabela"></tbody> 

</table> 

<script> 

     const usuarios = [ 

         { nome: "João", idade: 30, profissao: "Engenheiro" }, 

         { nome: "Maria", idade: 25, profissao: "Designer" }, 

         { nome: "Pedro", idade: 35, profissao: "Programador" } 

     ]; 

  

     const corpoTabela = document.getElementById("corpo-tabela"); 

     for (let i = 0; i < usuarios.length; i++) { 

         const usuario = usuarios[i]; 

         const tr = document.createElement("tr"); 

         tr.innerHTML = ` 

             <td>${usuario.nome}</td> 

             <td>${usuario.idade}</td> 

             <td>${usuario.profissao}</td> 

         `; 

         corpoTabela.appendChild(tr); 

     } 

</script> 

</body> 

Aqui é definido um array chamado usuarios, contendo objetos que representam dados de usuários. Cada objeto possui propriedades como nome, idade e profissao. 

O loop “for” começa declarando uma variável i igual a 0. A condição especificada é i < usuarios.length, o que significa que o loop continuará enquanto o valor de i for menor que o número de elementos no array usuarios. 

A cada iteração do loop: 

• const usuario = usuarios[i];: É criada uma variável usuario que recebe o objeto atual do array usuarios na posição i. 
• const tr = document.createElement(“tr”);: É criado um elemento <tr> (linha da tabela) para cada objeto de usuário. 
• tr.innerHTML = …;: É definido o conteúdo HTML da linha da tabela. Aqui, o template string é usado para inserir os valores das propriedades do objeto usuario dentro das células <td> (colunas) da tabela. 
• corpoTabela.appendChild(tr);: A linha da tabela é adicionada ao corpo da tabela. 

E o resultado é esse: 

Nome	Idade	Profissão
João	30	Engenheiro
Maria	25	Designer
Pedro	35	Programador

Aproveite todo o potencial do JavaScript com a Hospedagem da Locaweb! 

Quer desenvolver aplicações incríveis em JavaScript e garantir que elas estejam sempre disponíveis na web? 

Conheça nossos serviços de Hospedagem de Sites e conte com toda a estrutura necessária para impulsionar seus projetos! 

Como funcionam for/in e for/of? 

Além do tradicional “for”, JavaScript oferece outras formas de loops, como o “for/in” e o “for/of”, cada um com sua própria finalidade e aplicação. 

• for/in: Este loop é utilizado para iterar sobre as propriedades enumeráveis de um objeto. Ele percorre todas as propriedades de um objeto, incluindo as propriedades herdadas da cadeia de protótipos. 

Por exemplo: 

const carro = {marca: "Ford", modelo: "Focus", ano: 2010};  
for (let chave in carro) {  
    console.log(chave + ": " + carro[chave]);  
} 

Neste exemplo, o loop “for/in” itera sobre as chaves do objeto carro. A cada iteração, a variável chave contém o nome de uma propriedade do objeto, que é usada para acessar o valor correspondente. 

• for/of: Este loop é utilizado para iterar sobre os valores de um objeto iterável, como arrays, strings, mapas, sets, entre outros. Ele retorna os valores em si, em vez dos índices ou chaves. 

Por exemplo: 

const cores = ["vermelho", "verde", "azul"];  
for (let cor of cores) {  
    console.log(cor);  
} 

Neste caso, o loop “for/of” itera sobre os valores do array cores. A cada iteração, a variável cor contém o valor atual do array. 

O “for” é uma ferramenta poderosa em JavaScript, permitindo a repetição de um bloco de código várias vezes. Entender como usar o “for”, juntamente com as variações “for/in” e “for/of”, é essencial para o desenvolvimento eficaz em JavaScript. Experimente esses loops em seus próprios projetos e explore todo o potencial da linguagem.

Aproveite que está nessa jornada de conhecimento sobre JavaScript e confira nossos conteúdos sobre Timestamp e ForEach JavaScript!