Page cover

7.6.2 - Estruturas de repetição

🧩 Loops dentro de Loops? Entendendo as Estruturas Aninhadas

🧩 Loops dentro de Loops? Entendendo as Estruturas Aninhadas

Sim! Você pode ter um loop dentro de outro loop — isso se chama estrutura de repetição aninhada. Mas ⚠️ atenção: apesar de parecer simples, isso pode afetar bastante o desempenho do seu código.

Vamos entender tudo isso de forma leve? 😎


🧊 O que são loops aninhados?

É quando colocamos um loop dentro de outro. É muito útil para trabalhar com listas dentro de listas (como tabelas ou matrizes).

👀 Exemplo: mostrar uma tabela de multiplicação

for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    console.log(`${i} x ${j} = ${i * j}`);
  }
}

🧠 Dica: pense em "camadas" — o primeiro loop controla a linha, o segundo controla a coluna!


⏱️ Complexidade de Algoritmos e Loops Aninhados

Quando falamos de eficiência do código, usamos algo chamado complexidade de tempo — ou seja, quanto tempo leva para o código rodar à medida que os dados crescem.

💡 Cada loop que percorre n elementos tem complexidade O(n). Se você aninha dois loops, isso vira O(n²) — ou seja, bem mais lento com grandes volumes de dados.

📉 Exemplo simples:

let numeros = [1, 2, 3, 4, 5];

for (let i of numeros) {
  for (let j of numeros) {
    console.log(i, j);
  }
}

Se numeros tiver 5 elementos, o total de execuções será 25 vezes. Se tiver 100 elementos? 10.000 vezes! 😵


👎 Quando os loops aninhados são problema?

  • Ao comparar muitos dados entre si (ex: verificar se há números repetidos em um array)

  • Em algoritmos de ordenação ou busca não otimizados

  • Em páginas web, pode deixar a interface lenta ou travada

⚠️ Por isso, evite usar loops aninhados quando possível — ou use com consciência!


🧠 Métodos que fazem "loop" por você

JavaScript tem alguns métodos que iteram por trás dos panos. São mais curtos, mais elegantes e geralmente mais eficientes!

🔁 forEach

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

frutas.forEach(function(fruta) {
  console.log("Fruta: " + fruta);
});

🔍 filter — filtra elementos

let numeros = [1, 2, 3, 4, 5];
let pares = numeros.filter(n => n % 2 === 0);

console.log(pares); // [2, 4]

🔄 map — transforma elementos

let nomes = ["ana", "joão"];
let nomesMaiusculos = nomes.map(nome => nome.toUpperCase());

console.log(nomesMaiusculos); // ["ANA", "JOÃO"]

💯 reduce — acumula valores

let notas = [7, 8, 9];
let total = notas.reduce((soma, nota) => soma + nota, 0);

console.log("Total: " + total); // 24

Esses métodos funcionam com arrays e evitam muitos fors desnecessários!


🎒 O que são objetos e classes iteráveis?

🧺 Um iterável é algo que você pode percorrer com for...of, como:

  • arrays

  • strings

  • maps

  • sets

let texto = "Olá";
for (let letra of texto) {
  console.log(letra);
}

👨‍🏫 Você também pode criar seus próprios objetos iteráveis (nível avançado, mas poderoso!)

let objeto = {
  valores: [1, 2, 3],
  *[Symbol.iterator]() {
    for (let valor of this.valores) {
      yield valor;
    }
  }
};

for (let v of objeto) {
  console.log(v); // 1, 2, 3
}

👀Este código define um objeto (que não é iterável por padrão) iterável.


🧠 Boas práticas com loops aninhados

✅ Só use se realmente for necessário ✅ Considere usar métodos como map, filter, find ✅ Tente dividir o problema em partes menores ✅ Dê nomes claros às variáveis internas ✅ Use comentários para explicar loops mais complexos


🧨 Desafios com loops aninhados

🧩 Desafio 1: Dado um array de arrays (matriz), imprima todos os valores

let matriz = [
  [1, 2],
  [3, 4],
  [5, 6]
];

// saída esperada:
// 1
// 2
// 3
// 4
// 5
// 6

🧩 Desafio 2: Encontre todas as combinações possíveis entre dois arrays:

let adjetivos = ["grande", "rápido"];
let animais = ["gato", "pássaro"];

// saída esperada:
// grande gato
// grande pássaro
// rápido gato
// rápido pássaro

📌 Conclusão

Loops aninhados são poderosos 🧠, mas devem ser usados com cuidado! Aprender sobre eficiência, boas práticas, métodos nativos e iteráveis vai deixar você muito mais preparado para resolver problemas do mundo real.

🚀 Saber usar bem as estruturas de repetição te coloca em um novo nível na programação! Continue praticando, explorando e desafiando a si mesmo! 💪

Last updated