EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語
404 Not Found

404 Not Found

nginx

Loops em JavaScript

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.

Loop for

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

HTML 
<!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
💡 Variáveis de loop convencionalmente são nomeadas i. Para loops aninhados, use i para o externo, j para o interno e k para o próximo nível — uma convenção universal de programadores.

Exemplo: Gerando uma Lista com Loops

HTML 
<!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>
▶ Experimente

Loop while

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

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

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

Loop do...while

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

HTML 
<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

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<body>
  <h2>Comparando Três Tipos de Loop</h2>
  <div id="output"></div>
  <script>
    let html = '<strong>Loop for exibe 1-5:</strong><br>';
    for (let i = 1; i <= 5; i++) {
      html += i + ' ';
    }

    html += '<br><br><strong>Loop while contagem regressiva:</strong><br>';
    let count = 5;
    while (count > 0) {
      html += count + '... ';
      count--;
    }
    html += 'Decolagem!';

    html += '<br><br><strong>do...while executa pelo menos uma vez:</strong><br>';
    let x = 100;
    do {
      html += 'Executado! x = ' + x + '<br>';
      x++;
    } while (x < 100);
    // A condição é false desde o início, mas o bloco do executa uma vez mesmo assim

    document.getElementById('output').innerHTML = html;
  </script>
</body>
</html>
▶ Experimente

Loop for...of

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

HTML 
<!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.

💡 Ao iterar strings com for...of, você obtém um caractere por vez — até emojis permanecem intactos, o que é muito mais confiável que acesso baseado em índice.

break e continue

HTML 
<!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

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<body>
  <h2>break e continue</h2>
  <div id="output"></div>
  <script>
    let html = '<strong>break — parar no primeiro número par:</strong><br>';
    let nums = [1, 3, 7, 4, 9, 2];
    for (let n of nums) {
      if (n % 2 === 0) {
        html += `Encontrou número par ${n}, parando!`;
        break;
      }
      html += `${n} é ímpar, continuando...<br>`;
    }

    html += '<br><br><strong>continue — exibir apenas números ímpares:</strong><br>';
    for (let i = 1; i <= 10; i++) {
      if (i % 2 === 0) continue;
      html += i + ' ';
    }

    html += '<br><br><strong>Exemplo prático — busca:</strong><br>';
    let students = [
      { name: 'Alice', score: 95 },
      { name: 'Bob', score: 72 },
      { name: 'Charlie', score: 88 }
    ];
    let found = false;
    for (let s of students) {
      if (s.score >= 90) {
        html += `Encontrou aluno destaque: ${s.name} (${s.score} pts)`;
        found = true;
        break;
      }
    }
    if (!found) {
      html += 'Nenhum aluno tirou 90 ou acima';
    }

    document.getElementById('output').innerHTML = html;
  </script>
</body>
</html>
▶ Experimente

Loops Aninhados

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

HTML 
<!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

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<body>
  <h2>Tabuada</h2>
  <table id="table" border="1" cellpadding="6" style="border-collapse:collapse"></table>
  <script>
    let html = '';
    for (let i = 1; i <= 9; i++) {
      html += '<tr>';
      for (let j = 1; j <= i; j++) {
        html += `<td style="text-align:center">${j}×${i}=${i * j}</td>`;
      }
      html += '</tr>';
    }
    document.getElementById('table').innerHTML = html;
  </script>
</body>
</html>
▶ Experimente

A Armadilha do Loop Infinito

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

HTML 
<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>
⚠️ Ao escrever loops, sempre verifique se a condição eventualmente se tornará false. Caso contrário, o navegador travará e você terá que forçar o fechamento da aba.

📖 Resumo

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

❓ Perguntas Frequentes

P：Qual a diferença entre for...of e for...in? R：for...of itera valores e funciona com arrays e iteráveis; for...in itera chaves (índices) e é destinado a objetos. Use for...of para arrays — for...in pode capturar propriedades da cadeia de protótipos e causar problemas inesperados.

P：Qual loop tem melhor performance? R：Loops for tradicionais são mais rápidos; for...of é um pouco mais lento, mas mais legível. Na maioria dos casos, a diferença de performance é insignificante — priorize a legibilidade.

P：break em um loop aninhado sai de todos os loops ou apenas do interno? R：Apenas do loop mais interno. Para sair de um loop externo, use um rótulo: outer: for(...) { for(...) { break outer; } }. Mas rótulos prejudicam a legibilidade — considere refatorar em uma função e usar return em vez disso.

📝 Atividades

  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)
100%