Javascript

Laços de Repetição: for, while e do...while

Nyck Folleman 4 visualizações

Imagine que você precisa exibir os números de 1 a 100. Você escreveria cem linhas de console.log? Claro que não. É exatamente para isso que existem os laços de repetição — eles permitem que um bloco de código seja executado várias vezes, de forma controlada e elegante.

Este é um dos conceitos mais fundamentais de qualquer linguagem de programação. Dominar os laços é o que começa a separar quem escreve código de quem resolve problemas com código.

O laço for

O for é o laço mais usado quando você sabe quantas vezes quer repetir algo.

for (let i = 1; i <= 5; i++) {
  console.log(`Repetição número ${i}`);
}

// Repetição número 1
// Repetição número 2
// Repetição número 3
// Repetição número 4
// Repetição número 5

O for tem três partes separadas por ponto e vírgula:

for (inicialização ; condição ; incremento) {
  // código executado a cada volta
}
  • Inicialização: let i = 1 — define o ponto de partida
  • Condição: i <= 5 — enquanto for verdadeira, o laço continua
  • Incremento: i++ — executado ao final de cada volta (equivale a i = i + 1)

Contando de forma diferente

O for é flexível. Você pode contar de qualquer jeito:

// Contando de 2 em 2
for (let i = 0; i <= 10; i += 2) {
  console.log(i); // 0, 2, 4, 6, 8, 10
}

// Contando de trás para frente
for (let i = 5; i >= 1; i--) {
  console.log(i); // 5, 4, 3, 2, 1
}

// Tabuada do 7
for (let i = 1; i <= 10; i++) {
  console.log(`7 x ${i} = ${7 * i}`);
}

Percorrendo arrays com for

Uma das aplicações mais comuns do for é percorrer listas de dados:

const frutas = ["maçã", "banana", "laranja", "uva"];

for (let i = 0; i < frutas.length; i++) {
  console.log(`Fruta ${i + 1}: ${frutas[i]}`);
}

// Fruta 1: maçã
// Fruta 2: banana
// Fruta 3: laranja
// Fruta 4: uva

frutas.length retorna o tamanho do array — neste caso, 4. Por isso a condição é i < 4 (os índices vão de 0 a 3).

for...of — a forma moderna de percorrer listas

Quando você não precisa do índice, o for...of é mais limpo e legível:

const frutas = ["maçã", "banana", "laranja", "uva"];

for (const fruta of frutas) {
  console.log(fruta);
}

// maçã
// banana
// laranja
// uva

Prefira o for...of sempre que só precisar dos valores. Guarde o for clássico para quando precisar controlar o índice.

O laço while

O while é usado quando você não sabe exatamente quantas vezes vai repetir — você repete enquanto uma condição for verdadeira.

let tentativas = 0;
const maxTentativas = 3;

while (tentativas < maxTentativas) {
  console.log(`Tentativa ${tentativas + 1} de ${maxTentativas}`);
  tentativas++;
}

// Tentativa 1 de 3
// Tentativa 2 de 3
// Tentativa 3 de 3

Cuidado com o loop infinito! Se a condição nunca se tornar false, o programa trava. Sempre garanta que algo dentro do laço vai eventualmente tornar a condição falsa.

// ⚠️ NUNCA faça isso — loop infinito:
while (true) {
  console.log("Isso nunca para...");
}

Exemplo real com while — tentativas de senha

const senhaCorreta = "js2025";
let tentativa = "";
let tentativas = 0;

// Simulando tentativas
const senhasDigitadas = ["abc", "1234", "js2025", "outra"];

while (tentativa !== senhaCorreta && tentativas < senhasDigitadas.length) {
  tentativa = senhasDigitadas[tentativas];
  tentativas++;

  if (tentativa === senhaCorreta) {
    console.log(`Acesso liberado na tentativa ${tentativas}!`);
  } else {
    console.log(`Senha incorreta: "${tentativa}"`);
  }
}

// Senha incorreta: "abc"
// Senha incorreta: "1234"
// Acesso liberado na tentativa 3!

O laço do...while

Parecido com o while, mas com uma diferença crucial: o bloco de código sempre executa pelo menos uma vez, mesmo que a condição seja falsa desde o início.

let numero = 10;

do {
  console.log(`O número é ${numero}`);
  numero++;
} while (numero < 5);

// O número é 10
// (executa uma vez mesmo com número >= 5)

Isso é útil, por exemplo, quando você precisa exibir um menu e pedir uma escolha antes de verificar se ela é válida:

let opcao;

// Simulando: usuário digitou opções até escolher uma válida
const entradas = [9, 0, 2];
let i = 0;

do {
  opcao = entradas[i];
  console.log(`Opção digitada: ${opcao}`);
  i++;
} while (opcao < 1 || opcao > 3);

// Opção digitada: 9
// Opção digitada: 0
// Opção digitada: 2  ← válida, para aqui

break e continue — controlando o laço

break interrompe o laço imediatamente:

for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    console.log("Encontrei o 5! Parando.");
    break;
  }
  console.log(i);
}

// 1
// 2
// 3
// 4
// Encontrei o 5! Parando.

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 pares
  console.log(i);
}

// 1, 3, 5, 7, 9

Laços aninhados

Um laço dentro de outro. Útil para trabalhar com matrizes ou combinações:

// Tabuada completa de 1 a 3
for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    console.log(`${i} x ${j} = ${i * j}`);
  }
}

// 1 x 1 = 1
// 1 x 2 = 2
// 1 x 3 = 3
// 2 x 1 = 2
// ...e assim por diante

Use laços aninhados com moderação — eles crescem em complexidade rapidamente.

Comparativo rápido

Laço Use quando
for Sabe o número exato de repetições
for...of Quer percorrer os valores de um array
while Repete enquanto uma condição for verdadeira
do...while Precisa executar ao menos uma vez antes de verificar

Tarefa para você

Tente resolver estes desafios no console do navegador:

Desafio 1: Exiba todos os números de 1 a 20 que sejam divisíveis por 3.

Desafio 2: Some todos os números de 1 a 100 e exiba o resultado.

// Dica para o desafio 2:
let soma = 0;
// seu laço aqui...
console.log(`A soma é: ${soma}`); // deve ser 5050

Desafio 3: Percorra o array abaixo e exiba apenas os nomes com mais de 4 letras.

const nomes = ["Ana", "Carlos", "Li", "Fernanda", "Bob", "Mariana"];

Conclusão

Neste artigo você aprendeu:

  • O laço for e suas variações
  • O for...of para percorrer arrays com elegância
  • O while para repetições baseadas em condições
  • O do...while para garantir ao menos uma execução
  • Como usar break e continue para controlar o fluxo
  • Laços aninhados e quando usá-los

No próximo artigo chegaremos em um dos tópicos mais importantes do JavaScript: as funções. É onde o código começa a se organizar de verdade.

 

📚 Fontes e Referências