For em JavaScript: sintaxe, exemplos, break e continue

O clássico laço for em JavaScript

Quando você já sabe quantas vezes quer repetir uma ação, o for é a ferramenta certa. Ele concentra as três partes de um laço contado — início, condição de parada e passo — em uma única linha de cabeçalho.

Cinco iterações, cinco linhas no console. Vamos destrinchar o cabeçalho:

• let i = 0 roda uma única vez, antes do loop começar. É aqui que você inicializa o contador.
• i < 5 é avaliado antes de cada iteração. Se der true, o corpo executa. Se der false, o loop termina.
• i++ roda depois de cada iteração, logo antes da condição ser checada de novo.

As três partes são separadas por ponto e vírgula, não por vírgula. Todas são opcionais, mas omiti-las é raro — nesses casos, o mais comum é partir para um while.

Como as peças se encaixam

Vale a pena traçar um loop na mão para fixar a ordem de execução:

Passo a passo:

1. let i = 1 — o contador é criado e recebe 1.
2. Verifica i <= 3 — verdadeiro, então executa o corpo. Exibe 1.
3. Executa i++ — agora i vale 2.
4. Verifica i <= 3 — verdadeiro. Exibe 2.
5. Executa i++ — agora i vale 3.
6. Verifica i <= 3 — verdadeiro. Exibe 3.
7. Executa i++ — agora i vale 4.
8. Verifica i <= 3 — falso. Sai do laço.

A etapa de atualização roda depois do corpo, não antes. É justamente aí que muita gente se confunde.

Percorrer array em JavaScript usando índice

A tarefa mais comum de um for em JavaScript é justamente percorrer um array. O contador funciona também como índice:

Alguns pontos que vale a pena observar:

• Arrays em JavaScript começam no índice zero. O primeiro elemento fica no índice 0 e o último em length - 1.
• A condição é i < fruits.length, e não i <= fruits.length. Se você usar <=, o laço vai uma posição além do array e imprime undefined.
• O i foi declarado com let, então seu escopo é só o do laço. Fora dele, i simplesmente não existe.

Se você só precisa dos valores e não se importa com o índice, o for...of é mais enxuto e direto — e tem uma doc dedicada só para ele.

break: saindo do loop antes da hora

O break encerra o laço na hora. Útil quando você já achou o que procurava e não faz sentido continuar percorrendo o resto:

Quando o break é executado, o controle pula direto para depois da chave de fechamento do loop. O passo de atualização não roda, a condição não é reavaliada — o loop simplesmente acabou.

continue: pulando a iteração atual

O continue pula o restante da iteração atual e vai direto para o passo de atualização. O loop continua rodando normalmente; ele só não termina a passada atual.

Os números pares caem no continue e pulam o console.log. Só os ímpares aparecem no output. O continue é bem útil quando você quer descartar certas iterações sem precisar aninhar o resto do corpo dentro de um if.

Incrementos diferentes de +1

O passo de atualização é só uma expressão. Não precisa ser i++. Dá pra ir de dois em dois:

Count down:

Percorra um array de trás pra frente — útil quando você precisa remover itens durante a iteração:

Seja qual for a sua escolha, a regra é sempre a mesma: a condição e a atualização precisam trabalhar juntas para que, em algum momento, a condição se torne false. Se isso não acontecer, o laço roda pra sempre. for (let i = 0; i < 10; i--) é um loop infinito clássico — o i está indo na direção errada.

For aninhado em JavaScript

Dá pra colocar um for dentro de outro. O laço interno executa por completo a cada iteração do laço externo.

Nove linhas no output — três iterações externas, cada uma com três internas. Dê nomes que façam sentido para cada contador (row/col, i/j) em vez de reaproveitar a mesma variável.

Um detalhe importante: break e continue só atuam no laço mais interno. Sair de um loop interno com break não interrompe o externo. Se você precisa disso, use uma flag e cheque ela no loop de fora, ou então extraia o trabalho aninhado para uma função e use return para sair.

Armadilhas comuns

Algumas coisas que costumam pegar quem está começando:

Erros de off-by-one. i <= arr.length roda uma vez a mais do que deveria; i < arr.length - 1 para uma posição antes do fim. A forma padrão é i < arr.length.

Esquecer de atualizar o contador. Se você esquecer o i++ (ou equivalente), o contador nunca muda e o loop roda para sempre:

for (let i = 0; i < 10; ) {
    console.log(i); // nunca termina
}

Usar var no contador. Como var tem escopo de função, o contador "vaza" para fora do loop e pode causar surpresas desagradáveis em closures. Fique com let.

Alterar o array enquanto itera nele. Remover itens durante a iteração bagunça os índices e você acaba pulando elementos. Se precisar remover, percorra o array de trás para frente (for decrescente) ou monte um novo array com filter.

Quando usar outra alternativa

O for clássico está sempre à disposição, mas o JavaScript oferece atalhos mais curtos para os casos mais comuns:

• Para percorrer os valores de um array: for (const item of array) fica mais limpo.
• Para transformar um array: array.map(fn) devolve um novo array.
• Para filtrar: array.filter(fn).
• Para somar ou reduzir: array.reduce(fn, start).
• Para apenas executar algo em cada elemento: array.forEach(fn).

Recorra ao for clássico quando você realmente precisa do índice, precisa pular ou interromper o loop no meio (com break e continue), ou quer passos diferentes — tipo contar de trás para frente ou de dois em dois.

A seguir: laços while

O laço for brilha quando você já sabe o intervalo de antemão. Quando não sabe — ou seja, quando quer continuar executando até que alguma condição mude — while e do...while se encaixam melhor. É esse o tema da próxima página.