Os laços de repetição (loops) permitem executar o mesmo bloco de código várias vezes sem precisar repeti-lo manualmente. Eles são fundamentais para somar valores, percorrer listas, buscar elementos e processar dados.
JavaScript oferece opções para diferentes cenários: o clássico for com contador, while para repetições condicionais, for...of para percorrer valores de coleções, for...in para chaves de objetos, além de comandos de controle de fluxo como break e continue.
As estruturas clássicas com contador ou baseadas em uma condição verdadeira.
for clássicoExecuta um bloco de código repetidas vezes com um contador que define o início, a condição de parada e o incremento a cada volta.
for (inicializacao; condicao; incremento) {
// código
}for (let i = 1; i <= 3; i++) {
console.log(`Volta ${i}`);
}Volta 1 Volta 2 Volta 3
whileExecuta o bloco enquanto uma condição lógica for verdadeira. A condição é avaliada antes de cada volta.
while (condicao) {
// código executado enquanto a condição for verdadeira
}let vidas = 3;
while (vidas > 0) {
console.log(`Restam ${vidas} vidas`);
vidas--;
}Restam 3 vidas Restam 2 vidas Restam 1 vidas
do...whileSemelhante ao while, mas avalia a condição depois de executar o bloco. Isso garante que o código rode pelo menos uma vez.
do {
// executado pelo menos uma vez
} while (condicao);let numero = 10;
do {
console.log(`Executou pelo menos uma vez: ${numero}`);
} while (numero < 5);Executou pelo menos uma vez: 10
Maneiras modernas e legíveis de percorrer listas, textos e objetos.
for...ofA forma mais limpa e moderna de percorrer os valores de qualquer iterável (como arrays, strings, Maps e Sets).
for (const item of colecao) {
// usa o item diretamente
}const frutas = ['uva', 'pera', 'figo'];
for (const fruta of frutas) {
console.log(fruta);
}uva pera figo
for...inPercorre os nomes de todas as propriedades enumeráveis (as chaves) de um objeto.
for (const chave in objeto) {
// chave é o nome da propriedade
}const usuario = { nome: 'Marina', cargo: 'Dev' };
for (const chave in usuario) {
console.log(`${chave}: ${usuario[chave]}`);
}nome: Marina cargo: Dev
forEach()Método funcional de array que executa uma função de callback para cada elemento da lista.
lista.forEach((item, indice, array) => {
// código
})undefined.const cores = ['azul', 'verde'];
cores.forEach((cor, i) => {
console.log(`${i + 1}: ${cor}`);
});1: azul 2: verde
Comandos para interromper laços ou pular iterações sob condições específicas.
Comando breakInterrompe e sai imediatamente do laço mais interno em que ele se encontra, pulando qualquer volta restante.
break;for (let i = 1; i <= 10; i++) {
if (i === 4) break;
console.log(i);
}1 2 3
Comando continuePula o restante do código da volta atual e avança diretamente para a próxima iteração do laço.
continue;for (let i = 1; i <= 5; i++) {
if (i === 3) continue;
console.log(i);
}1 2 4 5
Laços aninhadosUm laço colocado dentro do corpo de outro laço. Essencial para matrizes bidimensionais, tabelas e combinações de dados.
for (...) {
for (...) {
// código interno
}
}const matriz = [[1, 2], [3, 4]];
for (let l = 0; l < matriz.length; l++) {
for (let c = 0; c < matriz[l].length; c++) {
console.log(`[${l},${c}] = ${matriz[l][c]}`);
}
}[0,0] = 1 [0,1] = 2 [1,0] = 3 [1,1] = 4
Quer testar? Copie um exemplo e rode no Rascunho.