JavaScript for loop: iterar arrays por índice
O JavaScript for loop repete um bloco de código um número controlado de vezes usando três expressões: inicialização, condição e atualização. Use quando precisar do índice do loop, para acessar posições de array, comparar vizinhos ou contar iterações. Diferente de forEach ou for...of, a forma clássica de for em JavaScript dá controle direto sobre os valores de início, fim e passo.
Exemplo de JavaScript For Loop para iteração de array
Saída:
A saída aparecerá aqui...
Saída:
Etapa 0: compilar
Etapa 1: testar
Etapa 2: implantar
Como este exemplo funciona
let i = 0cria um contador com escopo de bloco iniciado no primeiro índice do array.i < tarefas.lengthverifica a condição antes de cada iteração: o loop para quandoialcançatarefas.length, evitando leitura fora dos limites.i++incrementa o contador após o corpo de cada iteração terminar.tarefas[i]lê o elemento na posiçãoi, associando cada valor ao seu índice.
O limite < length (e não <=) é o padrão porque índices de array vão de 0 a length - 1.
Erros comuns em for loops JavaScript
Erro de limite com <=
Errado:
const itens = ["a", "b", "c"];
for (let i = 0; i <= itens.length; i++) {
console.log(itens[i]);
}
Certo:
const itens = ["a", "b", "c"];
for (let i = 0; i < itens.length; i++) {
console.log(itens[i]);
}
<= executa uma iteração extra, então itens[itens.length] é undefined.
Usar var em callbacks assíncronos
Errado:
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 0);
}
// imprime: 3, 3, 3
Certo:
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 0);
}
// imprime: 0, 1, 2
var tem escopo de função, então os callbacks leem o i final. let cria um novo vínculo por iteração.
for Loop vs for…of
Use for quando… | Use for...of quando… |
|---|---|
| Você precisa do índice para cálculo, fatiamento ou comparação com vizinhos. | Você só precisa de cada valor, não da posição. |
Você quer pular ou avançar de mais de um em um (i += 2). | Você itera qualquer iterável (arrays, strings, maps, generators). |
Você precisa de break com condições dependentes do índice. | A leitura por valor importa mais que o acesso por índice. |
Prefira for...of por padrão; mude para o for clássico quando precisar do índice ou de avanço não sequencial.
Mais exemplos
Saída antecipada com break:
const temperaturas = [22, 18, 35, 29];
for (let i = 0; i < temperaturas.length; i++) {
if (temperaturas[i] > 30) {
console.log("Primeiro dia quente no índice", i);
break;
}
}
break interrompe o loop imediatamente. Sem ele, o loop continuaria verificando todos os elementos restantes após encontrar a primeira correspondência.
Pular iterações com continue:
for (let i = 0; i < 5; i++) {
if (i === 2) continue;
console.log(i);
}
// 0, 1, 3, 4
continue ignora o restante do corpo da iteração atual, mas ainda executa a expressão de atualização (i++) antes da próxima verificação de condição.
FAQ
Qual é a sintaxe de um for loop em JavaScript?
Uma instrução for em JavaScript tem três expressões opcionais: for (inicialização; condição; atualização). A inicialização roda uma vez antes do início do loop, a condição é avaliada antes de cada iteração e a atualização roda após cada corpo de iteração. As três são opcionais: omitir a condição cria um loop infinito que precisa ser encerrado com break.
JavaScript while vs for loop: quando usar cada um?
Use for quando inicialização, condição e atualização se relacionam ao mesmo contador; agrupar tudo em uma linha deixa os limites do loop visíveis de imediato. Use while quando a condição de saída depende de estado externo ou quando a lógica de configuração e atualização pertence ao corpo do loop, e não ao cabeçalho.
Como interromper um for loop em JavaScript antes do fim?
Coloque uma instrução break dentro do corpo do loop. Quando o motor encontra break, ele sai do loop imediatamente e continua a execução após a chave de fechamento. Combine break com uma condição para parar assim que encontrar o valor alvo, evitando iterações desnecessárias.