JavaScript: Loops em JavaScript

Última atualização: 2026-10-13

Loops permitem que seu programa repita um bloco de código. Escrever "Olá" 100 vezes à mão é bobagem — com um loop, você escreve uma vez. Esse é o poder dos loops.

Declarações relacionadas：for...of return while for

1. Loop for

O loop for é a escolha mais comum quando você sabe quantas vezes iterar:

<!DOCTYPE html>
<html lang="pt-br">
<head><meta charset="UTF-8"><title>Loop for</title></head>
<body>
<div id="output"></div>
<script>
for (let i = 0; i < 5; i++) {
  document.getElementById('output').textContent += i + ' ';
}
</script>
</body>
</html>

As três partes:

1. let i = 0 — inicialização, executa uma vez
2. i < 5 — condição, verificada antes de cada iteração; continua apenas se verdadeira
3. i++ — atualização, executa após cada iteração

<!DOCTYPE html>
<html lang="pt-br">
<body>
  <h2>Gerando uma Lista com Loops</h2>
  <ul id="list"></ul>
  <script>
    let fruits = ['Maçã', 'Banana', 'Laranja', 'Uva', 'Melancia'];
    let html = '';
    for (let i = 0; i < fruits.length; i++) {
      html += `<li>#${i + 1}: ${fruits[i]}</li>`;
    }
    document.getElementById('list').innerHTML = html;
  </script>
</body>
</html>

2. Loop while

while verifica a condição primeiro, depois executa — ideal quando você não sabe quantas iterações precisará:

<script>
let count = 0;
while (count < 3) {
  count++;
}
</script>

Casos de uso comuns: ler dados até acabar, esperar uma condição se tornar verdadeira.

3. Loop do...while

do...while executa uma vez antes de verificar a condição — ele executa pelo menos uma vez:

<script>
let input;
do {
  input = prompt('Digite um número positivo:');
} while (Number(input) <= 0);
</script>

A diferença do while em uma frase: while pode nunca executar, mas do...while sempre executa pelo menos uma vez.

▶ Exemplo: Comparando os Três Loops

4. Loop for...of

for...of é projetado para iterar sobre objetos iteráveis (arrays, strings, etc.) com a sintaxe mais limpa:

<!DOCTYPE html>
<html lang="pt-br">
<head><meta charset="UTF-8"><title>for...of</title></head>
<body>
<div id="output"></div>
<script>
let colors = ['Vermelho', 'Verde', 'Azul'];
let html = '';
for (let color of colors) {
  html += color + ' ';
}
document.getElementById('output').textContent = html;
</script>
</body>
</html>

Diferente do for, for...of dá o valor, não o índice. Se precisar do índice, use um loop for tradicional.

5. break e continue

• break — sai do loop inteiro imediatamente
• continue — pula a iteração atual e move para a próxima

<!DOCTYPE html>
<html lang="pt-br">
<head><meta charset="UTF-8"><title>break e continue</title></head>
<body>
<div id="output"></div>
<script>
// break: parar quando o alvo é encontrado
let breakResult = '';
for (let i = 0; i < 10; i++) {
  if (i === 5) break;
  breakResult += i + ' ';
}

// continue: pular números pares
let continueResult = '';
for (let i = 0; i < 6; i++) {
  if (i % 2 === 0) continue;
  continueResult += i + ' ';
}

document.getElementById('output').innerHTML =
  '<strong>Resultado do break:</strong>' + breakResult + '<br>' +
  '<strong>Resultado do continue:</strong>' + continueResult;
</script>
</body>
</html>

▶ Exemplo: break e continue em Ação

6. Loops Aninhados

Loops podem ser aninhados dentro de outros loops — mais comumente usados para trabalhar com dados 2D (tabelas, grades):

<!DOCTYPE html>
<html lang="pt-br">
<head><meta charset="UTF-8"><title>Loops Aninhados</title></head>
<body>
<div id="output"></div>
<script>
let html = '';
for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    html += `(${i}, ${j}) `;
  }
  html += '<br>';
}
document.getElementById('output').innerHTML = html;
</script>
</body>
</html>

Loops aninhados multiplicam o custo — 10 externo × 10 interno = 100 iterações. Muitos níveis podem desacelerar severamente; se houver uma alternativa, evite aninhamento profundo.

▶ Exemplo: Tabuada

7. A Armadilha do Loop Infinito

Se a condição de um loop for sempre verdadeira, seu programa travará — isso é um loop infinito:

<script>
// ⚠️ Nunca faça isso!
// while (true) {
//   console.log('Eu nunca paro!');
// }

// Erro comum: esquecer de atualizar a condição
let i = 0;
// while (i < 5) {
//   console.log(i);
//   Esqueceu i++, então i é sempre 0 e o loop nunca termina
// }
</script>

Declarações relacionadas：for...of return while for

❓ Perguntas Frequentes

📖 Resumo

• for é o mais comum para contagens de iteração conhecidas; while para direcionado por condição; do...while executa pelo menos uma vez
• for...of é a maneira mais limpa de iterar arrays — dá valores, não índices
• break sai do loop inteiro; continue pula para a próxima iteração
• Loops aninhados multiplicam a contagem de iterações — evite ir fundo demais
• Sempre garanta que as condições do loop eventualmente se tornarão false para evitar loops infinitos

📝 Exercícios

1. Use um loop for para imprimir todos os múltiplos de 3 entre 1 e 100
2. Use loops aninhados para renderizar um padrão de tabuleiro de xadrez 8×8 (alternando quadrados pretos e brancos) na página
3. Escreva um programa que recebe um número inteiro positivo como entrada e exibe seu fatorial (ex: entrada 5 → 5×4×3×2×1 = 120)

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós