Loops em JavaScript: Domine For, While e Do-While

Introdução

Neste laboratório, você aprenderá a usar loops em JavaScript. Loops são um conceito fundamental na programação que permitem executar um bloco de código repetidamente. Isso é útil para tarefas como iterar sobre listas de dados ou realizar uma ação um número específico de vezes.

Você explorará os três tipos principais de loops em JavaScript:

Loop for: Repete um bloco de código um número conhecido de vezes.
Loop while: Repete um bloco de código enquanto uma condição especificada for verdadeira.
Loop do-while: Semelhante a um loop while, mas executa o bloco de código pelo menos uma vez antes de verificar a condição.

Você também aprenderá a usar a instrução break para sair de um loop antecipadamente.

Todo o seu trabalho será feito no WebIDE. Você escreverá código JavaScript no arquivo script.js, que já está vinculado em index.html. Você pode ver a saída do seu código alternando para a aba Web 8080 no ambiente do laboratório.

Criar loop for com inicializador e condição

Nesta etapa, você criará seu primeiro loop for. O loop for é ideal quando você sabe de antemão quantas vezes deseja repetir uma ação.

A sintaxe básica de um loop for é: for (inicializador; condição; expressão-final) { // código a ser executado }

Inicializador: let i = 0 é um exemplo. Ele é executado uma vez no início para declarar e inicializar uma variável contadora.
Condição: i < 5 é um exemplo. Esta expressão é verificada antes de cada iteração do loop. Se for verdadeira, o loop continua; se for falsa, o loop para.

Vamos criar um loop simples que gera uma lista de itens. Abra o arquivo script.js no explorador de arquivos à esquerda e adicione o seguinte código.

const output = document.getElementById("output");
let htmlContent = "<ul>";

// Este loop for tem um inicializador (let i = 0) e uma condição (i < 3)
for (let i = 0; i < 3; i++) {
  htmlContent += `<li>Item ${i}</li>`;
}

htmlContent += "</ul>";
output.innerHTML = htmlContent;

Neste código:

let i = 0 inicializa o contador do loop i com 0.
i < 3 é a condição que mantém o loop em execução enquanto i for menor que 3.
i++ é a expressão final que incrementa o contador após cada iteração (focaremos nisso na próxima etapa).

Após adicionar o código, salve o arquivo. Em seguida, clique na aba Web 8080 para ver a saída. Você deverá ver uma lista não ordenada com três itens.

Página web mostrando uma lista gerada por um loop for

Usar incremento no loop for para contar

Nesta etapa, você se concentrará na terceira parte do loop for: a expressão final, que é tipicamente usada para incrementar o contador.

A expressão-final (por exemplo, i++) é executada no final de cada iteração do loop. Ela atualiza o contador do loop, aproximando-o do ponto em que a condição se torna falsa. i++ é uma abreviação comum para i = i + 1.

Vamos modificar o loop para contar de 1 a 5. Substitua o código existente em script.js pelo seguinte:

const output = document.getElementById("output");
let htmlContent = "<h2>Contando de 1 a 5:</h2>";

// A expressão final i++ incrementa o contador após cada loop
for (let i = 1; i <= 5; i++) {
  htmlContent += `Contagem: ${i}<br>`;
}

output.innerHTML = htmlContent;

Observe as mudanças:

O inicializador agora é let i = 1, então começamos a contar a partir de 1.
A condição é i <= 5, então o loop é executado enquanto i for menor ou igual a 5.
A expressão i++ garante que o contador aumente a cada iteração.

Salve o arquivo e atualize a aba Web 8080. Você verá a saída mudar para uma lista de contagens de 1 a 5.

Screenshot mostrando a saída do código contando de 1 a 5

Implementar loop while para repetição

Nesta etapa, você aprenderá sobre o loop while. Um loop while continua a executar um bloco de código enquanto uma condição especificada for verdadeira.

A sintaxe é mais simples que a de um loop for: while (condição) { // código a ser executado }

Com um loop while, você deve lidar com a inicialização da variável contadora antes do loop e com o seu incremento dentro do loop. Esquecer de incrementar o contador resultará em um loop infinito, que pode travar seu navegador.

Vamos reescrever o exemplo de contagem anterior usando um loop while. Substitua o código em script.js por este:

const output = document.getElementById("output");
let htmlContent = "<h2>Contando com um loop while:</h2>";

let i = 1; // 1. Inicializador
while (i <= 5) {
  // 2. Condição
  htmlContent += `Contagem: ${i}<br>`;
  i++; // 3. Incremento
}

output.innerHTML = htmlContent;

Este código atinge o mesmo resultado que o loop for na etapa anterior, mas a estrutura é diferente. O inicializador, a condição e o incremento são agora instruções separadas.

Salve o arquivo e verifique a aba Web 8080. A saída deve ser idêntica à da etapa anterior, demonstrando uma maneira diferente de alcançar a mesma repetição.

Adicionar loop do-while para pelo menos uma execução

Nesta etapa, você explorará o loop do-while. Este loop é uma variante do loop while com uma diferença fundamental: o loop do-while sempre executará seu bloco de código pelo menos uma vez, antes de verificar a condição.

A sintaxe é: do { // código a ser executado } while (condição);

Isso é útil quando você precisa realizar uma ação primeiro e depois decidir se deve repeti-la. Vamos ver isso em ação com um exemplo onde a condição é inicialmente falsa.

Substitua o código em script.js pelo seguinte:

const output = document.getElementById("output");
let htmlContent = "<h2>Testando um loop do-while:</h2>";

let i = 10; // Começa com um valor que torna a condição while falsa

// Este loop será executado uma vez, mesmo que i não seja menor que 5
do {
  htmlContent += `O valor de i é: ${i}<br>`;
  i++;
} while (i < 5);

output.innerHTML = htmlContent;

Neste exemplo, a condição i < 5 é falsa desde o início porque i é 10. No entanto, como é um loop do-while, o código dentro do bloco do é executado uma vez antes que a condição seja verificada.

Salve o arquivo e olhe a aba Web 8080. Você verá a mensagem "O valor de i é: 10", provando que o loop foi executado exatamente uma vez.

Sair do loop com a instrução break

Nesta etapa, você aprenderá como sair de um loop prematuramente usando a instrução break. A instrução break encerra imediatamente o loop atual e transfere o controle para a instrução seguinte ao loop.

Isso é útil quando você está procurando por algo em um loop e deseja parar assim que o encontrar, sem completar as iterações restantes.

Vamos usar um loop for que tem a intenção de rodar 10 vezes, mas que parará mais cedo quando uma determinada condição for atendida. Substitua o código em script.js por este:

const output = document.getElementById("output");
let htmlContent = "<h2>Usando a instrução break:</h2>";

for (let i = 1; i <= 10; i++) {
  if (i === 6) {
    htmlContent += "Encontrei 6! Saindo do loop.<br>";
    break; // Sai do loop imediatamente
  }
  htmlContent += `O número atual é ${i}<br>`;
}

htmlContent += "Loop finalizado.";
output.innerHTML = htmlContent;

Neste código, o loop for está configurado para contar de 1 a 10. No entanto, a instrução if verifica se i é igual a 6. Quando for, a instrução break é executada e o loop é encerrado. O código não imprimirá os números de 7 a 10.

Salve o arquivo e visualize a aba Web 8080. Você verá a contagem parar em 5, seguida pela mensagem "Saindo do loop".

Resumo

Parabéns por completar este laboratório sobre loops em JavaScript! Você aprendeu a controlar o fluxo dos seus programas repetindo blocos de código.

Neste laboratório, você cobriu:

O loop for, que é perfeito quando você sabe o número de iterações com antecedência, usando um inicializador, uma condição e uma expressão final.
O loop while, que repete enquanto uma condição for verdadeira e requer o gerenciamento manual do contador.
O loop do-while, que garante pelo menos uma execução do bloco de código antes de verificar a condição.
A instrução break, que fornece uma maneira de sair de qualquer loop prematuramente com base em uma condição.

Dominar loops é um passo crítico para se tornar um desenvolvedor JavaScript proficiente. Sinta-se à vontade para experimentar ainda mais com o código deste laboratório para solidificar seu entendimento.