O laço for é uma das estruturas de repetição mais utilizadas em JavaScript. Ele permite executar um bloco de código um número determinado de vezes, com controle explícito sobre a inicialização, condição de continuação e incremento/decremento de uma variável de controle. Diferente do while, que depende de uma condição externa, o for concentra toda a lógica do loop em uma única linha, tornando o código mais legível e conciso.

Nesta aula, vamos detalhar cada parte do for, desde sua sintaxe básica até técnicas avançadas como laços aninhados e uso de break e continue. Ao final, você será capaz de utilizar essa estrutura para percorrer arrays, gerar sequências numéricas e controlar fluxos complexos.

Estrutura

A sintaxe do laço for é composta por três expressões opcionais dentro de parênteses, separadas por ponto e vírgula:

for (inicializacao; condicao; incremento) {
  // código a ser executado
}

Inicialização: executada uma única vez antes do início do loop. Geralmente usada para declarar e atribuir um valor inicial a uma variável contadora (ex: let i = 0).
Condição: avaliada antes de cada iteração. Se for verdadeira, o bloco é executado; se falsa, o loop termina.
Incremento: executado ao final de cada iteração, antes da próxima verificação da condição. Normalmente usado para atualizar o contador (ex: i++).

Exemplo básico que imprime números de 0 a 4:

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

Qualquer uma das três expressões pode ser omitida, mas os ponto e vírgula são obrigatórios. Por exemplo, um loop infinito pode ser escrito como for (;;). No entanto, é raro omitir a condição sem usar break para evitar loops infinitos.

Contadores

O contador é a variável que controla o número de iterações. Embora seja comum usar i (índice), você pode usar qualquer nome e até mesmo variáveis já existentes. O contador pode ser incrementado ou decrementado de acordo com a necessidade.

Exemplo de contagem regressiva:

for (let contador = 10; contador >= 0; contador--) {
  console.log(contador);
}
// Saída: 10, 9, ..., 0

Também é possível usar incrementos diferentes de 1, como 2, 3, ou até mesmo valores não inteiros:

for (let i = 0; i <= 10; i += 2) {
  console.log(i);
}
// Saída: 0, 2, 4, 6, 8, 10

O contador não precisa ser usado apenas dentro do bloco; ele pode ser utilizado para acessar elementos de um array:

const frutas = ['maçã', 'banana', 'laranja'];
for (let i = 0; i < frutas.length; i++) {
  console.log(frutas[i]);
}

break e continue

As instruções break e continue permitem alterar o fluxo normal do loop.

break: encerra imediatamente o loop, independentemente da condição. É útil quando se encontra o que procura e não há necessidade de continuar.

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}
// Saída: 0, 1, 2, 3, 4

continue: interrompe a iteração atual e passa para a próxima, ignorando o código restante no bloco. É útil para pular valores específicos.

for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue;
  }
  console.log(i);
}
// Saída: 0, 1, 3, 4

Ambos podem ser usados em qualquer tipo de loop (while, do-while, for). Cuidado: o uso excessivo pode tornar o código menos legível.

Laços aninhados

Laços aninhados são loops dentro de outros loops. São frequentemente usados para percorrer matrizes (arrays bidimensionais) ou gerar combinações.

Exemplo: imprimir uma tabuada 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}`);
  }
}
// Saída: 1x1=1, 1x2=2, ..., 3x3=9

Para cada valor de i, o loop interno executa completamente. Isso pode resultar em muitas iterações: no exemplo acima, são 3 * 3 = 9 iterações. Para matrizes maiores, o número de iterações cresce exponencialmente, então é importante considerar a eficiência.

Outro exemplo comum é percorrer uma matriz bidimensional:

const matriz = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

for (let i = 0; i < matriz.length; i++) {
  for (let j = 0; j < matriz[i].length; j++) {
    console.log(matriz[i][j]);
  }
}
// Saída: 1, 2, 3, 4, 5, 6, 7, 8, 9

Laços aninhados também podem usar break e continue, mas eles afetam apenas o loop mais interno. Para sair do loop externo, é necessário usar rótulos (labels) ou outras técnicas.

Boas práticas

  • Evite modificar o contador dentro do bloco do loop, a menos que seja absolutamente necessário; isso pode tornar o fluxo imprevisível.
  • Prefira let para declarar o contador, pois var tem escopo de função e pode causar confusão.
  • Use nomes descritivos para os contadores em loops aninhados, como linha e coluna, em vez de i e j.
  • Considere usar for...of ou forEach para iterar sobre arrays, a menos que você precise do índice ou controle fino sobre o loop.

Referências

Exercícios

  1. Escreva um laço for que imprima os números pares de 0 a 20 (inclusive).

    ✓ Resposta:
    for (let i = 0; i <= 20; i += 2) {
  console.log(i);
}

  2. Dado um array const numeros = [10, 20, 30, 40, 50], use um laço for para calcular e exibir a soma de todos os elementos.

    ✓ Resposta:
    const numeros = [10, 20, 30, 40, 50];
let soma = 0;
for (let i = 0; i < numeros.length; i++) {
  soma += numeros[i];
}
console.log(soma); // 150

  3. Use um laço for com break para encontrar o primeiro número maior que 50 no array const valores = [12, 45, 67, 23, 89] e exiba-o. Se não houver, exiba uma mensagem.

    ✓ Resposta:
    const valores = [12, 45, 67, 23, 89];
let encontrado = false;
for (let i = 0; i < valores.length; i++) {
  if (valores[i] > 50) {
    console.log(valores[i]);
    encontrado = true;
    break;
  }
}
if (!encontrado) {
  console.log('Nenhum valor maior que 50 encontrado.');
}
// Saída: 67

  4. Utilizando laços aninhados, imprima um triângulo de asteriscos com 5 linhas, onde cada linha tem o número de asteriscos igual ao número da linha (ex: linha 1: *, linha 2: **, ...).

    ✓ Resposta:
    for (let i = 1; i <= 5; i++) {
  let linha = '';
  for (let j = 1; j <= i; j++) {
    linha += '*';
  }
  console.log(linha);
}

  5. Escreva um laço for que percorra os números de 1 a 10 e use continue para pular a impressão dos múltiplos de 3. Imprima apenas os demais.

    ✓ Resposta:
    for (let i = 1; i <= 10; i++) {
  if (i % 3 === 0) {
    continue;
  }
  console.log(i);
}
// Saída: 1, 2, 4, 5, 7, 8, 10