Laços em JavaScript: for, while, for...of, for...in e forEach: Do Básico ao Avançado Já leu

Introdução aos Laços em JavaScript

Laços são estruturas fundamentais que permitem executar código repetidamente enquanto uma condição for verdadeira ou iterando sobre coleções de dados. Em JavaScript, você tem cinco formas principais de implementar loops: for, while, for...of, for...in e forEach. Cada uma possui características específicas e casos de uso ideais. Dominar essas estruturas é essencial para escrever código eficiente e legível.

Nesta aula, você aprenderá quando e como usar cada tipo de loop, começando pelo mais tradicional até as abordagens modernas. Vamos focar em aplicações práticas e evitar armadilhas comuns que iniciantes enfrentam.

O Loop for Clássico e while

for — Controle Total

O loop for é a forma mais tradicional e oferece máximo controle. Você define inicialização, condição e incremento em uma única linha. Use quando souber exatamente quantas iterações necessita ou quando precisar de incrementos personalizados.

// Imprimir números de 0 a 4
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// Iterar um array inversamente
const frutas = ['maçã', 'banana', 'laranja'];
for (let i = frutas.length - 1; i >= 0; i--) {
  console.log(frutas[i]); // laranja, banana, maçã
}

// Incrementos personalizados
for (let i = 0; i < 10; i += 2) {
  console.log(i); // 0, 2, 4, 6, 8
}

while — Condição Variável

Use while quando a condição de parada depender de fatores externos ou quando o número de iterações é indeterminado. O loop executa enquanto a condição for true.

// Simular entrada do usuário
let entrada = '';
while (entrada !== 'sair') {
  entrada = prompt('Digite "sair" para parar:');
  console.log('Você digitou:', entrada);
}

// Buscar em array até encontrar
const numeros = [10, 20, 30, 40, 50];
let indice = 0;
while (numeros[indice] !== 30) {
  indice++;
}
console.log('Encontrado no índice:', indice); // 2

Cuidado: loops while infinitos travam a aplicação. Sempre garanta que a condição será falsa em algum momento.

Métodos Modernos: for...of e for...in

for...of — Iterar Valores

Introduzido no ES6, for...of itera sobre os valores de uma coleção iterável (arrays, strings, Sets, Maps). É mais limpo que for clássico quando você não precisa do índice.

// Array
const cores = ['red', 'green', 'blue'];
for (const cor of cores) {
  console.log(cor); // red, green, blue
}

// String
for (const letra of 'JavaScript') {
  console.log(letra); // J, a, v, a, S, c, r, i, p, t
}

// Set
const ids = new Set([1, 2, 3, 2, 1]);
for (const id of ids) {
  console.log(id); // 1, 2, 3
}

// Destructuring com for...of
const pessoas = [
  { nome: 'Ana', idade: 25 },
  { nome: 'Bruno', idade: 30 }
];
for (const { nome, idade } of pessoas) {
  console.log(`${nome} tem ${idade} anos`);
}

for...in — Iterar Chaves

O for...in itera sobre as chaves (propriedades) de um objeto, incluindo as herdadas. Evite usar em arrays — é mais lento e pode retornar propriedades inesperadas.

// Objeto
const usuario = { nome: 'Carlos', email: 'carlos@mail.com', ativo: true };
for (const chave in usuario) {
  console.log(`${chave}: ${usuario[chave]}`);
}

// Por que evitar em arrays:
const numeros = [10, 20, 30];
numeros.propriedadeExtra = 'valor';
for (const indice in numeros) {
  console.log(indice); // 0, 1, 2, propriedadeExtra (indesejado!)
}

forEach — Sintaxe Moderna e Funcional

O método forEach é um método de array que executa uma função para cada elemento. Não retorna nada e não pode ser interrompido com break. Use para efeitos colaterais (como logs ou atualizações DOM) ou quando a ordem de execução não é crítica.

// forEach básico
const tarefas = ['estudar', 'codificar', 'revisar'];
tarefas.forEach((tarefa, indice) => {
  console.log(`${indice + 1}. ${tarefa}`);
});

// Com acesso ao array original
const valores = [5, 10, 15];
valores.forEach((valor, indice, array) => {
  console.log(`Array: ${array}, Índice: ${indice}, Valor: ${valor}`);
});

// Atualizar DOM
const botoes = document.querySelectorAll('button');
botoes.forEach(botao => {
  botao.addEventListener('click', () => console.log('Clicado!'));
});

// Processamento de objetos em array
const produtos = [
  { id: 1, nome: 'Notebook', preco: 3000 },
  { id: 2, nome: 'Mouse', preco: 50 }
];
let totalPreco = 0;
produtos.forEach(produto => {
  totalPreco += produto.preco;
});
console.log('Total:', totalPreco); // 3050

Comparação rápida:

Conclusão

Dominar laços em JavaScript significa escolher a ferramenta certa para cada situação. Use for clássico quando precisar de máximo controle sobre iterações, while para condições dinâmicas, for...of para iterar valores de arrays modernamente, for...in exclusivamente para objetos, e forEach para operações elegantes e funcionais. A prática constante em projetos reais consolidará esse conhecimento fundamental.

Referências

• MDN Web Docs - Loops and Iteration
• MDN Web Docs - for...of
• MDN Web Docs - Array.prototype.forEach()
• JavaScript.info - Loops
• Eloquent JavaScript - Loops