<h2>Introdução aos Laços em JavaScript</h2>
<p>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: <code>for</code>, <code>while</code>, <code>for...of</code>, <code>for...in</code> e <code>forEach</code>. Cada uma possui características específicas e casos de uso ideais. Dominar essas estruturas é essencial para escrever código eficiente e legível.</p>
<p>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.</p>
<h2>O Loop for Clássico e while</h2>
<h3>for — Controle Total</h3>
<p>O loop <code>for</code> é 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.</p>
<pre><code class="language-javascript">// 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
}</code></pre>
<h3>while — Condição Variável</h3>
<p>Use <code>while</code> 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 <code>true</code>.</p>
<pre><code class="language-javascript">// 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</code></pre>
<p>Cuidado: loops <code>while</code> infinitos travam a aplicação. Sempre garanta que a condição será falsa em algum momento.</p>
<h2>Métodos Modernos: for...of e for...in</h2>
<h3>for...of — Iterar Valores</h3>
<p>Introduzido no ES6, <code>for...of</code> itera sobre os <strong>valores</strong> de uma coleção iterável (arrays, strings, Sets, Maps). É mais limpo que <code>for</code> clássico quando você não precisa do índice.</p>
<pre><code class="language-javascript">// 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);
}</code></pre>
<h3>for...in — Iterar Chaves</h3>
<p>O <code>for...in</code> itera sobre as <strong>chaves</strong> (propriedades) de um objeto, incluindo as herdadas. Evite usar em arrays — é mais lento e pode retornar propriedades inesperadas.</p>
<pre><code class="language-javascript">// 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!)
}</code></pre>
<h2>forEach — Sintaxe Moderna e Funcional</h2>
<p>O método <code>forEach</code> é um método de array que executa uma função para cada elemento. Não retorna nada e não pode ser interrompido com <code>break</code>. Use para efeitos colaterais (como logs ou atualizações DOM) ou quando a ordem de execução não é crítica.</p>
<pre><code class="language-javascript">// 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</code></pre>
<p><strong>Comparação rápida:</strong></p>
<div class="table-wrap"><table><thead><tr><th>Loop</th><th>Melhor para</th><th>Pode usar break?</th><th>Retorna valor?</th></tr></thead><tbody><tr><td><code>for</code></td><td>Índices, controle fino</td><td>Sim</td><td>Não</td></tr><tr><td><code>while</code></td><td>Condições variáveis</td><td>Sim</td><td>Não</td></tr><tr><td><code>for...of</code></td><td>Arrays, iteráveis modernos</td><td>Sim</td><td>Não</td></tr><tr><td><code>for...in</code></td><td>Objetos, chaves</td><td>Sim</td><td>Não</td></tr><tr><td><code>forEach</code></td><td>Operações simples, callbacks</td><td>Não</td><td>Não</td></tr></tbody></table></div>
<h2>Conclusão</h2>
<p>Dominar laços em JavaScript significa escolher a ferramenta certa para cada situação. Use <code>for</code> clássico quando precisar de máximo controle sobre iterações, <code>while</code> para condições dinâmicas, <code>for...of</code> para iterar valores de arrays modernamente, <code>for...in</code> exclusivamente para objetos, e <code>forEach</code> para operações elegantes e funcionais. A prática constante em projetos reais consolidará esse conhecimento fundamental.</p>
<h2>Referências</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration" target="_blank" rel="noopener noreferrer">MDN Web Docs - Loops and Iteration</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of" target="_blank" rel="noopener noreferrer">MDN Web Docs - for...of</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" target="_blank" rel="noopener noreferrer">MDN Web Docs - Array.prototype.forEach()</a></li>
<li><a href="https://javascript.info/while-for" target="_blank" rel="noopener noreferrer">JavaScript.info - Loops</a></li>
<li><a href="https://eloquentjavascript.net/02_program_structure.html" target="_blank" rel="noopener noreferrer">Eloquent JavaScript - Loops</a></li>
</ul>