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
forEach
let frutas = ["🍎", "🍌", "🍇"];
frutas.forEach(function(fruta) {
console.log("Fruta: " + fruta);
});
🔍 filter
— filtra elementos
filter
— filtra elementoslet numeros = [1, 2, 3, 4, 5];
let pares = numeros.filter(n => n % 2 === 0);
console.log(pares); // [2, 4]
🔄 map
— transforma elementos
map
— transforma elementoslet nomes = ["ana", "joão"];
let nomesMaiusculos = nomes.map(nome => nome.toUpperCase());
console.log(nomesMaiusculos); // ["ANA", "JOÃO"]
💯 reduce
— acumula valores
reduce
— acumula valoreslet 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 for
s 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