While em JavaScript: i++ ou i = i + 1?

POV: Você esqueceu o incremento e o navegador travou 😱💻

Esse é um dos primeiros passos pra você escrever loops seguros, sem travar o navegador sem querer.

"O while é um bloco também relativamente simples. Você declara o i e atribui o valor zero. E aqui você diz: enquanto i for menor que 5. Se i for menor que 5, console.log. Aqui tem um detalhe: você precisa incrementar esse valor. Esquecer isso é a receita para o loop infinito."

🔄 O que é o loop while em JavaScript?

O loop while é uma estrutura de repetição que 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 .

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

➕ O incremento: i = i + 1 vs i++

O incremento é o que faz o loop avançar em direção ao fim. Sem ele, a condição nunca muda e o loop roda para sempre .

let i = 0;
while (i < 5) {
    console.log("i é menor que 5: " + i);
    i = i + 1; // Incremento "por extenso"
}
// Saída: i é menor que 5: 0, 1, 2, 3, 4
        

let i = 0;
while (i < 5) {
    console.log("i é menor que 5: " + i);
    i++; // Incremento com operador ++
}
// Saída: i é menor que 5: 0, 1, 2, 3, 4
        

⚠️ O loop infinito: o pesadelo do programador

Esquecer o incremento é o erro mais comum que leva a um loop infinito . Quando isso acontece, a condição nunca se torna falsa e o loop roda para sempre, travando o navegador .

let i = 0;
while (i < 5) {
    console.log(i);
    // ❌ Esqueci de incrementar i!
}
// ⚠️ Loop infinito! O navegador vai travar!
        

🎯 A condição do while: verdadeira ou falsa

O while depende de uma condição que seja verdadeira para continuar executando . Quando a condição se torna falsa, o loop para .

let i = 0;
while (i < 5) { // verdadeiro para i = 0,1,2,3,4
    console.log(i);
    i++;
}
// quando i = 5, a condição i < 5 se torna falsa
        

A condição pode ser qualquer expressão que resulte em true ou false . Isso inclui:

• Comparações: i < 10, nome === "João"
• Valores booleanos: true, false
• Combinações: i < 10 && i > 0
• Funções: while (validarDados())

📚 Exemplos práticos com while

1. Contagem regressiva

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

2. Soma de números

let i = 1;
let soma = 0;
while (i <= 5) {
    soma += i;
    i++;
}
console.log(soma); // 15 (1+2+3+4+5)
        

⏱️ Capítulos do vídeo

• 00:00 — While em JavaScript: introdução à estrutura do bloco
• 00:03 — Declarando a variável de controle no while
• 00:07 — Definindo a condição de repetição do while
• 00:13 — Exibindo o valor da variável no console durante o while
• 00:25 — Incremento no while: por que ele evita loop infinito
• 00:32 — Primeira forma de incremento: i = i + 1
• 00:48 — Segunda forma: o operador de incremento ++
• 00:57 — Condição verdadeira: o que faz o while continuar
• 01:09 — Encerramento e convite para se inscrever

🎯 Conclusão

O loop while é uma das estruturas mais fundamentais da programação. Entender como ele funciona, especialmente a importância do incremento, é essencial para qualquer programador que não quer ver seu navegador travar.

Neste artigo, você aprendeu:

• ✅ Como estruturar um loop while em JavaScript
• ✅ Como declarar e inicializar a variável de controle
• ✅ Como definir a condição de repetição do while
• ✅ Por que o incremento é essencial para evitar loop infinito
• ✅ Como incrementar usando i = i + 1
• ✅ Como incrementar usando o operador ++
• ✅ Por que o while depende de uma condição verdadeira
• ✅ Como testar e depurar um while no console

🤔 O que você achou?

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

❓ FAQ: Perguntas Frequentes sobre o Loop While 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