Loops em JavaScript: For, While, Break e Continue

POV: Você criou um loop infinito e o navegador travou 😂💻

Começamos pelo for, o loop ideal para quando você já sabe quantas vezes a repetição precisa acontecer. Depois vemos o while, que repete um bloco enquanto uma condição continuar verdadeira, e para assim que ela se torna falsa. Também mostramos o do while, parecido com o while, mas com uma diferença importante: ele sempre executa pelo menos uma vez antes de checar a condição, o que é ótimo para situações de interação com o usuário, como validar uma resposta. Você vai entender a diferença entre break, que interrompe o loop completamente assim que uma condição é atendida, e continue, que não para a repetição — ele só pula a iteração atual e volta para o início do loop, seguindo normalmente a partir da próxima volta. Por fim, revisamos os operadores de incremento (++) e decremento (--), essenciais para controlar contadores dentro de qualquer loop e evitar que ele rode além do necessário (ou pior, indefinidamente).

"Um loop é uma estrutura de repetição. Você pode parar ou deixar ele rolar indefinidamente. A diferença entre um código que funciona e um que trava o navegador está em entender quando usar for, while, do while, break e continue."

O que são loops em JavaScript?

Loops são estruturas de repetição que permitem executar um bloco de código várias vezes . Eles são fundamentais na programação porque automatizam tarefas repetitivas e processam grandes volumes de dados de forma eficiente .

Em JavaScript, existem várias formas de criar loops, cada uma adequada para diferentes situações . A escolha correta do loop pode fazer toda a diferença entre um código eficiente e um código que trava o navegador .

🔄 O loop for: quando você sabe quantas vezes repetir

O loop for é o mais utilizado em JavaScript . Ele é ideal quando você sabe exatamente quantas vezes a repetição deve acontecer . Sua sintaxe é compacta e reúne em uma única linha a inicialização, a condição e o incremento .

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

🔁 O loop while: repetição por condição

O loop while executa um bloco de código enquanto uma condição for verdadeira . Ele é ideal quando você não sabe quantas vezes a repetição vai acontecer, mas tem uma condição que determina quando parar .

let i = 0;
while (i < 5) {
    console.log(i);
    i++; // ESSENCIAL: sem isso, loop infinito!
}
// Saída: 0, 1, 2, 3, 4
        

// ❌ Loop infinito - NUNCA FAÇA ISSO!
let i = 0;
while (i < 5) {
    console.log(i);
    // Esqueci de incrementar i!
}

🔂 O loop do while: execute pelo menos uma vez

O loop do while é semelhante ao while, mas com uma diferença crucial: ele sempre executa o bloco de código pelo menos uma vez antes de verificar a condição . Isso é útil quando você precisa garantir que o código rode ao menos uma vez .

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

// Mesmo com condição falsa, executa uma vez
let j = 10;
do {
    console.log("Executou!");
    j++;
} while (j < 5);
// Saída: "Executou!" (mesmo com condição falsa)
        

⛔ Break e Continue: controlando o fluxo do loop

O comando break

O comando break interrompe a execução do loop completamente, independentemente da condição . É útil quando você encontra o que estava procurando e não precisa continuar .

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

O comando continue

O comando continue pula a iteração atual e continua com a próxima . É útil quando você quer ignorar valores específicos sem sair do loop .

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

➕➖ Os operadores de incremento e decremento

Os operadores de incremento (++) e decremento (--) são essenciais para controlar contadores dentro de loops .

// Incremento (++)
let contador = 0;
contador++; // contador agora é 1
contador++; // contador agora é 2

// Decremento (--)
let contador2 = 5;
contador2--; // contador2 agora é 4
contador2--; // contador2 agora é 3

// Em loops
for (let i = 10; i > 0; i--) {
    console.log(i);
}
// Saída: 10, 9, 8, 7, 6, 5, 4, 3, 2, 1
        

📋 Boas práticas com loops em JavaScript

⏱️ Capítulos do vídeo

• 00:00 — Loops em JavaScript: o que são estruturas de repetição
• 00:09 — For em JavaScript: quando usar (limite conhecido)
• 00:16 — While em JavaScript: repetição por condição verdadeira
• 00:29 — Do while em JavaScript: a diferença e quando usar
• 00:47 — Break em JavaScript: como interromper um loop
• 00:54 — Continue em JavaScript: pulando uma iteração
• 01:10 — Incremento (++) e decremento (--) em JavaScript
• 01:23 — Encerramento e convite para se inscrever

🎯 Conclusão

Os loops são uma das estruturas mais fundamentais da programação. Dominar for, while, do while, break e continue é essencial para qualquer programador.

Neste artigo, você aprendeu:

• ✅ O que são loops (estruturas de repetição)
• ✅ Quando usar o loop for
• ✅ Quando usar o loop while
• ✅ A diferença entre while e do while
• ✅ Como usar o break para interromper um loop
• ✅ Como usar o continue para pular uma iteração
• ✅ Como funcionam os operadores de incremento e decremento
• ✅ Como evitar loops que rodam além do necessário

🤔 O que você achou?

💬 Quer aprender JavaScript do ZERO? Comece agora a escrever seu primeiro código e seus fundamentos!

❓ FAQ: Perguntas Frequentes sobre Loops em JavaScript

🎬 Assista ao Vídeos completo sobre Refatoração

O vídeo foi feito em Javascript mais o conceito pode ser utilizado em qualquer outra linguagem de programação..

🔗 Conecte-se Comigo