Page cover

7.6.1 - Estruturas de repetição

🚀 Explorando Mais Fundo os Loops em JavaScript

🚀 Explorando Mais Fundo os Loops em JavaScript

Agora que você já conhece o básico dos loops, bora dar um mergulho mais profundo! 🌊 Vamos entender como o computador interpreta essas repetições, como evitar armadilhas, e como usá-las com arrays, condições, boas práticas e muito mais! 🎯


🧠 Como os loops funcionam no computador?

Quando você usa um loop, o JavaScript está mandando o computador fazer isto:

  1. Ler uma condição (ex: i <= 5)

  2. Se for verdadeira, executar o bloco de código

  3. Atualizar o valor (ex: i++)

  4. Voltar para o passo 1 até que a condição seja falsa

🔁 Isso se repete muito rápido! Às vezes milhares de vezes por segundo 😮


⚠️ Erros comuns (e como evitar!)

😬 Loop infinito Se você esquecer de atualizar a variável de controle, o loop nunca termina.

let i = 0;

while (i < 5) {
  console.log(i);
  // i++ está faltando!
}

🧯 Solução: sempre confira se a condição pode se tornar falsa.


😬 Condições mal formuladas

for (let i = 10; i > 0; i++) {
  // Isso nunca para! Porque i nunca chega a ser < 0
}

🧯 Solução: revise sua lógica condicional antes de rodar!


🧰 break e continue: controlando o loop como um mestre 🧙‍♂️

🔴 break — sai do loop na hora

for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i); // Para no 4
}

⏭️ continue — pula para a próxima repetição

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue;
  }
  console.log(i); // Pula o 3
}

💡 Exemplos reais e úteis com arrays

🧮 Somar todos os números de um array

let numeros = [10, 20, 30, 40];
let soma = 0;

for (let num of numeros) {
  soma += num;
}

console.log("Soma total: " + soma); // 100

🔎 Encontrar o maior número

let numeros = [3, 9, 2, 17, 4];
let maior = numeros[0];

for (let num of numeros) {
  if (num > maior) {
    maior = num;
  }
}

console.log("Maior número: " + maior); // 17

🚨 Exemplo com comportamento inesperado

let nomes = ["Ana", "João", "Lucas"];
for (let i = 0; i <= nomes.length; i++) {
  console.log(nomes[i]); // Vai imprimir undefined no final
}

🔍 O erro está no i <= nomes.length, que tenta acessar um índice que não existe.

🧯 Corrigindo:

for (let i = 0; i < nomes.length; i++) {
  console.log(nomes[i]); // Tudo certo agora!
}

✅ Boas práticas vs más práticas

👍 Boas práticas

  • Usar nomes de variáveis claros

  • Evitar repetições desnecessárias

  • Evitar loops muito aninhados (um dentro do outro) sem motivo

let frutas = ["🍎", "🍌", "🍇"];

for (let fruta of frutas) {
  console.log("Fruta: " + fruta);
}

👎 Más práticas

let i = 0;
while (true) {
  console.log("Rodando...");
}
// Cuidado! Isso trava o navegador 😵

🧠 A importância dos loops

As estruturas de repetição são uma das ferramentas mais poderosas da programação. Sem elas, tarefas como:

  • processar dados de redes sociais 📲

  • filtrar e ordenar listas 📋

  • automatizar tarefas repetitivas 🛠️

  • criar jogos 🎮

  • construir sites dinâmicos 💻

seriam muito mais difíceis (ou até impossíveis!). Aprender a usar bem os loops te deixa mais próximo de pensar como um programador profissional! 💡💼


🎯 Desafios para você tentar!

🧩 Desafio 1: Escreva um loop que imprima só os números múltiplos de 3 entre 1 e 30.

🧩 Desafio 2: Crie um array com nomes de pessoas e imprima somente os que começam com a letra "M".

🧩 Desafio 3: Some todos os números de um array que sejam maiores que 10.


🏁 Conclusão

Os loops são uma ferramenta poderosa, flexível e essencial. Com eles, você economiza tempo, organiza melhor seu código e resolve problemas mais complexos.

📌 Quanto mais você praticar, mais natural isso vai parecer. Teste, erre, corrija e continue! Cada erro é uma chance de aprender algo novo! 💪


👨‍🏫 Ficou com dúvidas? Volte e revise os exemplos. Reescreva os códigos. Troque uma condição aqui, um valor ali. Programar é como aprender a andar de bicicleta — só melhora com a prática! 🚴‍♀️💻

Last updated