for e while · JavaScript do zero

O `for` clássico

for (let i = 0; i < 5; i++) {
  console.log(i); // → 0, 1, 2, 3, 4
}

Três partes, separadas por ponto e vírgula:

let i = 0: onde começa
i < 5: enquanto isto for verdade, continua
i++: o que acontece ao fim de cada volta

`for...of`: quase sempre o melhor

const alunos = ["Ana", "João", "Maria"];

for (const aluno of alunos) {
  console.log(aluno);
}

Sem índice, sem condição, sem incremento. Some junto o erro mais comum do for clássico: usar <= no lugar de < e estourar o fim da lista.

Quando o índice for necessário:

for (const [indice, aluno] of alunos.entries()) {
  console.log(`${indice + 1}. ${aluno}`);
}
// → 1. Ana
// → 2. João
// → 3. Maria

`while`

let saldoEmCentavos = 10000;
let parcelas = 0;

while (saldoEmCentavos > 0) {
  saldoEmCentavos -= 2500;
  parcelas++;
}

console.log(`Quitado em ${parcelas} parcelas`); // → 4

for quando você sabe quantas voltas. while quando a quantidade depende de algo que só se descobre rodando.

Há também o do...while, que roda pelo menos uma vez antes de testar:

let tentativas = 0;

do {
  tentativas++;
} while (tentativas < 3);

O laço infinito

// NÃO RODE ISTO
let i = 0;
while (i < 10) {
  console.log(i);
  // esqueceu o i++ - a condição nunca fica falsa
}

A aba trava. Você precisa fechá-la à força.

`break` e `continue`

const precos = [1250, 2500, -100, 800, 3000];

for (const preco of precos) {
  if (preco < 0) continue; // pula esta volta
  if (preco > 2800) break; // sai do laço

  console.log(preco); // → 1250, 2500, 800
}

continue pula para a volta seguinte
break encerra o laço

Laços aninhados

const turnos = ["manhã", "tarde"];
const dias = ["sábado", "domingo"];

for (const dia of dias) {
  for (const turno of turnos) {
    console.log(`${dia} de ${turno}`);
  }
}
// → sábado de manhã
// → sábado de tarde
// → domingo de manhã
// → domingo de tarde

O de dentro roda inteiro a cada volta do de fora. Com duas listas de mil itens, isso é um milhão de voltas: pense no tamanho antes de aninhar.

Um exemplo inteiro

const CARRINHO = [
  { produto: "Farinha", quilos: 3, precoPorKgEmCentavos: 1250 },
  { produto: "Açaí", quilos: 2, precoPorKgEmCentavos: 2500 },
  { produto: "Tucumã", quilos: 1.5, precoPorKgEmCentavos: 800 },
];

let totalEmCentavos = 0;

for (const item of CARRINHO) {
  const subtotal = Math.round(item.precoPorKgEmCentavos * item.quilos);
  totalEmCentavos += subtotal;

  console.log(`${item.produto}: ${item.quilos} kg - R$ ${(subtotal / 100).toFixed(2)}`);
}

console.log(`Total: R$ ${(totalEmCentavos / 100).toFixed(2)}`);
// → Farinha: 3 kg - R$ 37.50
// → Açaí: 2 kg - R$ 50.00
// → Tucumã: 1.5 kg - R$ 12.00
// → Total: R$ 99.50

A tabuada, que é o exercício clássico

const numero = 7;

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

Exercícios

Escreva um for que conte de 1 a 20.
Escreva um que conte de 20 a 1, de trás para frente.
Percorra uma lista de nomes com for...of e mostre cada um numerado.
Some os preços de uma lista de compras.
Use continue para pular valores negativos e break para parar acima de um limite.
Escreva a tabuada do 7. Depois, com laço aninhado, a de 1 a 10.
Com while: quantas parcelas de R$ 25 quitam uma dívida de R$ 100?

Referências

Laços - MDN - for, while e as variações
for...of - MDN - percorrendo o que é iterável
JavaScript Loops - W3Schools - exemplos com editor

O for clássico

for...of: quase sempre o melhor

while