Iteração sobre array em JavaScript: 5 erros fatais e como evitá-los

Como percorrer array em JavaScript: Principais erros e como evitá-los

Você já escreveu um código que deveria simplesmente percorrer uma lista de tarefas ou itens no carrinho, mas em vez disso retornou undefined, um loop infinito ou, pior ainda, corrompeu dados silenciosamente? Dor familiar. A pergunta "How to loop through the items of an array in JavaScript?" é uma das mais populares no Stack Overflow. Parece que poderia ser mais simples? Mas o diabo, como sempre, está nos detalhes.

Hoje não vamos apenas analisar como percorrer um array em JavaScript. Vamos olhar por baixo do capô das armadilhas mais comuns em que iniciantes (e não só) caem. Você descobrirá por que for...in pode te prejudicar, como forEach difere de map e como evitar um loop infinito em for.

Pronto? Vamos corrigir bugs e escrever código bonito.

Erro nº1: Usar for...in para arrays

Esta é, talvez, a armadilha mais traiçoeira para iniciantes. O desenvolvedor vê a palavra for e a palavra in e pensa: "Ah, isso é para percorrer tudo!". Tecnicamente, é verdade. Mas para arrays, isso é um desastre.

O loop for...in foi projetado para percorrer propriedades de objeto, não elementos de array. Sim, um array em JS também é um objeto, mas seus índices são apenas chaves de string ("0", "1", "2").

Aqui está o problema:

\n
• A ordem não é garantida. Embora os navegadores geralmente mantenham a ordem, não se pode confiar nisso.
\n
• Ele percorre toda a herança de protótipo. Se você ou alguma biblioteca adicionou um método a Array.prototype (por exemplo, Array.prototype.myCustomMethod = function() {}), for...in também o incluirá.
\n

Exemplo de código (como NÃO fazer):

const arr = [10, 20, 30];\nArray.prototype.customMethod = () => {};\n\nfor (let index in arr) {\n  console.log(arr[index]); // Exibirá: 10, 20, 30, ƒ () => {}\n}\n

Viu? No final, apareceu nossa função personalizada. O código quebrou.

Como fazer corretamente:

Use for...of (para valores) ou o clássico for (para índices). for...of percorre apenas os valores e ignora o protótipo.

// Correto e seguro\nfor (let value of arr) {\n  console.log(value); // 10, 20, 30\n}\n

Erro nº2: Esquecer o callback em forEach

arr.forEach(callback) é uma forma elegante de percorrer um array em JavaScript. Mas muitos o confundem com map ou filter. O principal erro é pensar que forEach retorna algo. Ele retorna undefined.

O segundo erro comum é esquecer o segundo e terceiro argumentos do callback (índice e o próprio array). Às vezes, isso é crítico.

Exemplo de erro:

const numbers = [1, 2, 3];\nconst doubled = numbers.forEach(num => num * 2);\nconsole.log(doubled); // undefined! Erro.\n

Como fazer corretamente:

Se você precisa criar um novo array baseado no antigo, use map(). Se precisa apenas executar uma ação (por exemplo, exibir no console ou enviar dados), use forEach().

// Para criar um novo array\nconst doubled = numbers.map(num => num * 2); // [2, 4, 6]\n\n// Para efeitos colaterais\nnumbers.forEach((num, index) => {\n  console.log(`Elemento ${index}: ${num}`);\n});\n

Erro nº3: Loop infinito em for

Clássico do gênero. Você escreve for (let i = 0; i < arr.length; i++), mas esquece o incremento i++ ou, pior ainda, modifica o array dentro do loop.

Suponha que você esteja filtrando o array em tempo real, removendo elementos com splice(). Se você não corr