Laços: for e while

Somar à mão os números inteiros de 1 a 100 leva um tempo. Um laço for de três linhas faz isso na hora e mostra 5050.

Fazendo a mesma coisa muitas vezes

Mostrar os números de 1 a 5 com cinco linhas de console.log tudo bem. Mostrar de 1 a 1000 desse jeito, não. Um laço executa o mesmo bloco de código de novo e de novo, mudando um pouco a cada vez, até que uma condição mande parar. É nos laços que os computadores mostram para que servem: nunca se cansam e nunca perdem a conta.

O laço for

for (let i = 1; i <= 5; i++) {
  console.log(i);
}
// mostra 1, 2, 3, 4, 5 em linhas separadas

Os parênteses depois de for guardam três partes separadas por ponto e vírgula. A primeira, let i = 1, roda uma vez antes de o laço começar e cria uma variável contadora. A segunda, i <= 5, é a condição, conferida antes de cada volta; quando ela fica false, o laço termina. A terceira, i++, roda depois de cada volta e faz o contador avançar. Uma passada pelo bloco se chama iteração. Acompanhe: i é 1, a condição é true, 1 aparece, i vira 2, e assim por diante até i virar 6, a condição dar false e o programa continuar depois da chave de fechamento.

O contador costuma se chamar i, uma tradição da matemática, mas qualquer nome serve. Você também pode contar em outros passos: for (let i = 10; i >= 0; i -= 2) conta para trás 10, 8, 6, 4, 2, 0.

Acumulando um total

O padrão de laço mais comum é o acumulador. Crie uma variável antes do laço, atualize-a dentro e use-a depois. Aqui está a soma da abertura:

let sum = 0;
for (let i = 1; i <= 100; i++) {
  sum += i;
}
console.log(sum);   // mostra 5050

Repare onde cada linha fica. Se let sum = 0 estivesse dentro do laço, sum voltaria a zero a cada iteração. Se o console.log estivesse dentro, ele mostraria 100 totais parciais em vez de uma resposta. O antes e o depois do laço são tão importantes quanto o próprio laço.

O laço while

Um laço while tem só uma condição. Ele continua executando o bloco enquanto a condição for true. Use-o quando você não sabe de antemão quantas voltas vai precisar, como ao dobrar um número até ele passar de 1000.

let n = 1;
let steps = 0;
while (n <= 1000) {
  n *= 2;
  steps++;
}
console.log(n, steps);   // mostra 1024 10

Alguma coisa dentro de um laço while precisa, em algum momento, deixar a condição false. Se você esquecer a linha que muda n, a condição fica true para sempre. Isso é um laço infinito, e a página trava. Se acontecer numa caixa de prática, recarregue a página e corrija o código. No laço for, a atualização fica escrita no cabeçalho, o que torna esse erro mais raro.

break e continue

Duas palavras-chave mudam o fluxo dentro de um laço. break sai do laço na hora. continue pula o resto da iteração atual e vai para a próxima. Por exemplo, um laço de 1 a 10 com if (i % 3 === 0) continue; no começo mostra todos os números menos 3, 6 e 9.

Exemplo resolvido. Quantos números de 1 a 50 são múltiplos de 7? Comece com let count = 0, faça i ir de 1 a 50 e escreva dentro if (i % 7 === 0) count++;. Depois do laço, count vale 7: são 7, 14, 21, 28, 35, 42 e 49.