Como percorrer um array em JavaScript: forEach, for...of e outros métodos

Por que "percorrer um array" é o básico que você precisa saber de cor

Imagine: você tem uma lista de alunos, um carrinho de compras ou um conjunto de números. Você precisa fazer algo com cada elemento: exibir um nome, calcular a soma, filtrar apenas os adultos. Em JavaScript, existem várias maneiras de fazer isso, e a mais popular delas é o loop forEach.

A pergunta "Loop (for each) over an array in JavaScript" no Stack Overflow acumulou milhares de visualizações. Isso significa que até mesmo desenvolvedores experientes às vezes se confundem com os detalhes. Vamos organizar tudo: desde o clássico for até o moderno for...of e o poderoso forEach. Você aprenderá quando usar cada método e deixará de ter medo de arrays.

Método nº1: O loop clássico for — o avô de todas as iterações

A maneira mais antiga e compreensível. Você mesmo controla o contador e a condição de saída. Ideal quando você precisa interromper o loop antecipadamente ou pular vários elementos.

const fruits = ['maçã', 'banana', 'laranja'];
for (let i = 0; i < fruits.length; i++) {
    console.log(`Fruta nº${i + 1}: ${fruits[i]}`);
}

Vantagens: controle total, você pode usar break e continue.
\nDesvantagens: verboso, fácil de errar nos índices.

Quando usar o for clássico

\n
• Você precisa interromper a iteração antecipadamente (por exemplo, ao procurar um elemento).
\n
• Você precisa de acesso ao índice (não apenas ao valor).
\n
• Você está trabalhando com arrays multidimensionais.
\n

Método nº2: forEach — o rei das iterações em JavaScript

Este método é a resposta para a pergunta "Loop (for each) over an array in JavaScript" em 90% dos casos. Ele é chamado diretamente no array e aceita uma função de retorno de chamada (callback) que é executada para cada elemento.

const fruits = ['maçã', 'banana', 'laranja'];
fruits.forEach(function(fruit, index) {
    console.log(`Fruta nº${index + 1}: ${fruit}`);
});

// O mesmo com arrow function (estilo moderno):
fruits.forEach((fruit, index) => {
    console.log(`Fruta nº${index + 1}: ${fruit}`);
});

Importante: forEach não retorna um novo array (ao contrário de map). Ele apenas executa uma ação para cada elemento. E sim, break e continue não funcionam aqui — se você precisar interromper o loop, use for...of ou o clássico for.

Parâmetros da função callback do forEach

\n
• Primeiro parâmetro — o elemento atual do array (obrigatório).
\n
• Segundo parâmetro — o índice do elemento (opcional).
\n
• Terceiro parâmetro — o próprio array (raramente necessário).
\n

[10, 20, 30].forEach((value, index, array) => {
    console.log(`Elemento ${value} na posição ${index} no array [${array}]`);
});

Método nº3: for...of — moderno e elegante

Surgiu no ES6 (2015) e imediatamente conquistou os desenvolvedores. Ele funciona não apenas com arrays, mas também com qualquer objeto iterável (strings, Set, Map).

const fruits = ['maçã', 'banana', 'laranja'];
for (const fruit of fruits) {
    console.log(`Fruta: ${fruit}`);
}

Principal vantagem: você pode usar break e continue. Além disso, o código parece limpo e legível.

Como obter o índice no for...of

Se você precisar do índice, use o método entries():

for (const [index, fruit] of fruits.entries()) {
    console.log(`Fruta nº${index + 1}: ${fruit}`);
}

Método nº4: map — quando você precisa criar um novo array

Se você não quer apenas percorrer, mas transformar cada elemento e obter um novo array do mesmo comprimento, use m