Laços de Repetição em JavaScript: for, while e do while (Guia Completo para Iniciantes)
Bem-vindo(a) a mais um post da trilha JavaScript!
Neste post você vai aprender como fazer o JavaScript repetir tarefas automaticamente usando os laços de repetição. Vamos explorar o for, while, do while, for...of e for...in, entendendo quando e como usar cada um com exemplos práticos e reais.
Caso queira acompanhar a trilha completa, confira os posts anteriores:
- 📌 Variáveis e Tipos de Dados em JavaScript
- 📌 Operadores Aritméticos em JavaScript
- 📌 O que é o DOM em JavaScript
- 📌 Condicionais em JavaScript — if, else e switch
🤔 O que são Laços de Repetição?
Imagine que você precisa exibir os números de 1 até 100 no console.
Você poderia escrever assim:
console.log(1);
console.log(2);
console.log(3);
// ... até o 100
console.log(100);
Isso seria 100 linhas de código para uma tarefa simples. Agora imagine fazer isso com 1.000 itens, ou 10.000.
Com laços de repetição, você resolve isso em 3 linhas:
for (let i = 1; i <= 100; i++) {
console.log(i);
}
💬 Laço de repetição = uma instrução que o código executa várias vezes até que uma condição seja atendida.
Laços são usados em praticamente todo programa real — percorrer listas de produtos, exibir posts de um blog, calcular totais, processar dados. Dominar isso é essencial para qualquer desenvolvedor.
⚙️ Conceito Fundamental — Sem isso você não avança
Antes de ver os laços, entenda estas três partes que todo laço tem:
1. INICIALIZAÇÃO → onde começa
2. CONDIÇÃO → até quando repete
3. INCREMENTO → como avança a cada volta
🧠 Se a condição nunca se tornar falsa, o laço roda para sempre — isso se chama loop infinito e trava o programa. Sempre garanta que o laço vai parar!
📌 1. O for — O Mais Usado e Versátil
O for é o laço mais comum em JavaScript. Use quando você sabe quantas vezes quer repetir.
📜 Estrutura básica:
for (inicialização; condição; incremento) {
// código que será repetido
}
💡 Exemplo básico — Contando de 1 a 5:
for (let i = 1; i <= 5; i++) {
console.log("Número: " + i);
}
🔎 Resultado:
Número: 1 Número: 2 Número: 3 Número: 4 Número: 5
🧠 Entendendo passo a passo:
1ª volta → i = 1 → 1 <= 5 ✅ → executa → i++ → i = 2
2ª volta → i = 2 → 2 <= 5 ✅ → executa → i++ → i = 3
3ª volta → i = 3 → 3 <= 5 ✅ → executa → i++ → i = 4
4ª volta → i = 4 → 4 <= 5 ✅ → executa → i++ → i = 5
5ª volta → i = 5 → 5 <= 5 ✅ → executa → i++ → i = 6
6ª volta → i = 6 → 6 <= 5 ❌ → PARA
💡 Contando de forma decrescente:
for (let i = 10; i >= 1; i--) {
console.log("Contagem regressiva: " + i);
}
console.log("🚀 Lançamento!");
🔎 Resultado: Conta de 10 até 1 e exibe "🚀 Lançamento!"
💡 Pulando de 2 em 2 — números pares:
for (let i = 0; i <= 20; i += 2) {
console.log(i); // 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20
}
💡 Exemplo real — Tabuada:
let numero = 7;
for (let i = 1; i <= 10; i++) {
console.log(numero + " x " + i + " = " + (numero * i));
}
🔎 Resultado:
basic7 x 1 = 7 7 x 2 = 14 7 x 3 = 21 ... 7 x 10 = 70
📌 2. Percorrendo Arrays com for
Um dos usos mais importantes do for é percorrer arrays — listas de itens.
💡 Exemplo — Lista de alunos:
let alunos = ["Ana", "Bruno", "Carlos", "Daniela", "Eduardo"];
for (let i = 0; i < alunos.length; i++) {
console.log("Aluno " + (i + 1) + ": " + alunos[i]);
}
🔎 Resultado:
Aluno 1: Ana Aluno 2: Bruno Aluno 3: Carlos Aluno 4: Daniela Aluno 5: Eduardo
💡 Dica:
alunos.lengthretorna o tamanho do array (5 neste caso). Usari < alunos.lengthgarante que o laço percorre todos os itens sem estourar o índice.
💡 Somando todos os valores de um array:
let notas = [8.5, 7.0, 9.5, 6.0, 8.0];
let soma = 0;
for (let i = 0; i < notas.length; i++) {
soma += notas[i];
}
let media = soma / notas.length;
console.log("Soma das notas: " + soma);
console.log("Média: " + media.toFixed(2));
🔎 Resultado:
Soma das notas: 39 Média: 7.80
📌 3. O for...of — A Forma Moderna de Percorrer Arrays
O for...of foi introduzido no ES6 e é uma forma mais limpa e legível de percorrer arrays e outros iteráveis.
📜 Estrutura básica:
for (let item of array) {
// código com cada item
}
💡 Comparação:
let frutas = ["🍎 Maçã", "🍌 Banana", "🍇 Uva", "🍊 Laranja"];
// Forma tradicional
for (let i = 0; i < frutas.length; i++) {
console.log(frutas[i]);
}
// Forma moderna com for...of ✅
for (let fruta of frutas) {
console.log(fruta);
}
💡 Use
for...ofquando só precisar dos valores e não do índice.
Usefortradicional quando precisar do índice (posição) de cada item.
💡 Exemplo real — Exibindo produtos:
let produtos = ["Notebook", "Mouse", "Teclado", "Monitor", "Headset"];
for (let produto of produtos) {
console.log("🛒 Produto disponível: " + produto);
}
📌 4. O while — Quando Você Não Sabe Quantas Vezes Vai Repetir
O while executa um bloco de código enquanto a condição for verdadeira. Use quando o número de repetições não é conhecido antecipadamente.
📜 Estrutura básica:
while (condição) {
// código que será repetido
// ⚠️ lembre de atualizar a variável para evitar loop infinito!
}
💡 Exemplo básico:
let contador = 1;
while (contador <= 5) {
console.log("Contagem: " + contador);
contador++; // ⚠️ essencial — sem isso, loop infinito!
}
🔎 Resultado:
Contagem: 1 Contagem: 2 Contagem: 3 Contagem: 4 Contagem: 5
🧠 Diferença entre for e while:
✅ for → use quando SABE o número de repetições
✅ while → use quando NÃO SABE o número de repetições
e depende de uma condição externa
💡 Exemplo real — Simulando saque bancário:
let saldo = 1000;
let valorSaque = 150;
let saques = 0;
while (saldo >= valorSaque) {
saldo -= valorSaque;
saques++;
console.log("Saque #" + saques + " realizado. Saldo restante: R$" + saldo);
}
console.log("Saldo insuficiente para novos saques.");
console.log("Total de saques realizados: " + saques);
🔎 Resultado:
apacheSaque #1 realizado. Saldo restante: R$850 Saque #2 realizado. Saldo restante: R$700 Saque #3 realizado. Saldo restante: R$550 Saque #4 realizado. Saldo restante: R$400 Saque #5 realizado. Saldo restante: R$250 Saque #6 realizado. Saldo restante: R$100 Saldo insuficiente para novos saques. Total de saques realizados: 6
💡 Veja que não sabíamos de antemão quantos saques seriam possíveis — o
whilefoi perfeito para isso!
📌 5. O do...while — Execute Pelo Menos Uma Vez
O do...while é parecido com o while, mas com uma diferença crucial:
🧠 O bloco é executado PRIMEIRO e a condição é verificada DEPOIS.
Isso garante que o código rode pelo menos uma vez, mesmo que a condição já seja falsa.
📜 Estrutura básica:
do {
// código executado pelo menos uma vez
} while (condição);
💡 Comparação — while vs do...while:
// while — não executa se a condição for false desde o início
let x = 10;
while (x < 5) {
console.log("while: " + x); // ❌ Não executa nenhuma vez
x++;
}
// do...while — executa UMA VEZ mesmo com condição false
let y = 10;
do {
console.log("do...while: " + y); // ✅ Executa uma vez: "do...while: 10"
y++;
} while (y < 5);
💡 Exemplo real — Menu de opções:
let opcao;
do {
opcao = prompt(
"📋 MENU\n" +
"1 - Ver saldo\n" +
"2 - Fazer depósito\n" +
"3 - Fazer saque\n" +
"0 - Sair\n\n" +
"Digite sua opção:"
);
switch (opcao) {
case "1":
alert("💰 Seu saldo é R$1.250,00");
break;
case "2":
alert("✅ Depósito realizado com sucesso!");
break;
case "3":
alert("✅ Saque realizado com sucesso!");
break;
case "0":
alert("👋 Até logo!");
break;
default:
alert("⚠️ Opção inválida. Tente novamente.");
}
} while (opcao !== "0");
💡 O
do...whilefoi perfeito aqui porque o menu precisa aparecer pelo menos uma vez antes de verificar se o usuário quer sair.
📌 6. O for...in — Percorrendo Objetos
O for...in é usado para percorrer as propriedades de um objeto.
📜 Estrutura básica:
for (let chave in objeto) {
// acessa cada propriedade do objeto
}
💡 Exemplo:
let aluno = {
nome: "Carlos",
idade: 22,
curso: "Desenvolvimento Web",
nota: 9.5
};
for (let propriedade in aluno) {
console.log(propriedade + ": " + aluno[propriedade]);
}
🔎 Resultado:
nome: Carlos idade: 22 curso: Desenvolvimento Web nota: 9.5
🛑 break e continue — Controlando o Fluxo do Laço
🔴 break — Interrompe o laço imediatamente
for (let i = 1; i <= 10; i++) {
if (i === 6) {
console.log("Parando no " + i);
break; // sai do laço quando i === 6
}
console.log(i);
}
🔎 Resultado: Exibe 1, 2, 3, 4, 5 e para.
🟡 continue — Pula a iteração atual e vai para a próxima
for (let i = 1; i <= 10; i++) {
if (i % 2 === 0) {
continue; // pula os números pares
}
console.log(i); // exibe só os ímpares
}
🔎 Resultado: 1, 3, 5, 7, 9
💡 Exemplo prático — Encontrando um produto em estoque:
let produtos = [
{ nome: "Notebook", estoque: 5 },
{ nome: "Mouse", estoque: 0 },
{ nome: "Teclado", estoque: 0 },
{ nome: "Monitor", estoque: 3 },
{ nome: "Headset", estoque: 0 }
];
console.log("🛒 Produtos com estoque disponível:");
for (let produto of produtos) {
if (produto.estoque === 0) {
continue; // pula produtos sem estoque
}
console.log("✅ " + produto.nome + " — " + produto.estoque + " unidades");
}
🔎 Resultado:
🛒 Produtos com estoque disponível: ✅ Notebook — 5 unidades ✅ Monitor — 3 unidades
🔄 Laços Aninhados — Loop dentro de Loop
Você pode colocar um laço dentro de outro. Isso é muito usado para trabalhar com tabelas, matrizes e combinações.
💡 Exemplo — Tabuada completa:
for (let i = 1; i <= 5; i++) {
console.log("--- Tabuada do " + i + " ---");
for (let j = 1; j <= 10; j++) {
console.log(i + " x " + j + " = " + (i * j));
}
}
⚠️ Atenção: O laço externo roda 5 vezes e, para cada volta, o laço interno roda 10 vezes. Total: 50 execuções.
💎 Projeto Completo — Lista de Tarefas com Loops
<div>
<button class="btn-concluir" onclick="concluirTarefa(${i})">
${tarefa.concluida ? "↩️ Desfazer" : "✅ Concluir"}
</button>
<button class="btn-remover" onclick="removerTarefa(${i})">🗑️ Remover</button>
</div>
`;
lista.appendChild(li);
}
contador.textContent =
"📋 " + tarefas.length + " tarefa(s) — " + totalConcluidas + " concluída(s)";
}
// Tecla Enter para adicionar tarefa
document.getElementById("inputTarefa").addEventListener("keypress", function(e) {
if (e.key === "Enter") {
adicionarTarefa();
}
});
</script>
</body>
</html>
html 5
- ✅ Adicionar tarefas com clique ou Enter
- ✅ Marcar como concluída / desfazer
- ✅ Remover tarefas
- ✅ Contador atualizado em tempo real
- ✅ Laço
forpercorrendo e renderizando o array
🆚 Comparativo Final — Qual laço usar?
┌─────────────┬─────────────────────────────────────────────┐
│ LAÇO │ QUANDO USAR │
├─────────────┼─────────────────────────────────────────────┤
│ for │ Sei exatamente quantas vezes repetir │
│ for...of │ Quero percorrer arrays de forma limpa │
│ for...in │ Quero percorrer propriedades de objetos │
│ while │ Não sei quantas vezes, depende de condição │
│ do...while │ Preciso executar pelo menos uma vez │
└─────────────┴─────────────────────────────────────────────┘
🚨 Boas Práticas com Laços
1. ✅ Sempre garanta que o laço vai parar (evite loop infinito)
2. ✅ Prefira for...of para arrays quando não precisar do índice
3. ✅ Use nomes de variáveis descritivos (produto, aluno) em vez de só "i"
4. ✅ Evite laços aninhados profundos — ficam difíceis de ler
5. ✅ Use break para sair cedo quando encontrar o que procura
6. ✅ Use continue para pular itens indesejados sem sair do laço
🔑 Pontos-Chave do Post
💡 Laços são fundamentais — todo sistema real usa repetição para processar listas, dados e eventos
💡 O for é o mais versátil, o for...of é o mais legível para arrays modernos
💡 Loop infinito é o erro mais comum — sempre verifique se sua condição vai se tornar falsa
✍️ Exercício Prático
Crie um arquivo loops.html com os seguintes desafios:
1. Use for para exibir todos os números ímpares de 1 a 50
2. Use while para simular um contador regressivo de foguete:
→ Conta de 10 até 0
→ Ao chegar em 0: "🚀 Lançamento!"
3. Use for...of para percorrer um array de 5 nomes
→ Exiba "Olá, [nome]! Bem-vindo(a)." para cada um
4. Use break para encontrar o primeiro número divisível
por 7 no intervalo de 1 a 100
5. (Desafio extra)
→ Crie um array com 8 produtos e seus preços
→ Use for para:
- Somar o total
- Encontrar o mais caro
- Encontrar o mais barato
- Calcular a média de preços
→ Exiba tudo no console
📚 Continue aprendendo JavaScript:
- 📌 Funções em JavaScript — Guia Completo para Iniciantes
- 📌 Arrays em JavaScript — Como criar e manipular listas
- 📌 Objetos em JavaScript — Guia Completo
Comentários
Postar um comentário