Recentemente encontrei uma pergunta de entrevista que pedia diferentes maneiras de iterar em um objeto JavaScript Array. O prompt inicialmente parecia simples, pois esperava-se que eu fornecesse alguns exemplos de trechos de código. No entanto, esta questão me intrigou, então decidi me aprofundar um pouco mais em cada método, explorando não apenas como usá-los, mas também quando e por que você pode escolher uma abordagem em vez de outra.

Neste artigo, mostrarei vários métodos de iteração sobre arrays em JavaScript, destacando suas diferenças, vantagens e casos de uso.

para loop
Vantagens:

• Flexibilidade: O loop for oferece flexibilidade, permitindo o uso de break para sair do loop ou continuar para pular para a próxima iteração. Você também pode especificar os índices diretamente, proporcionando controle preciso sobre o comportamento do loop.
• Ordem não sequencial: você tem controle sobre a ordem da iteração ajustando as condições do loop, como iterar para trás ou pular certos elementos.

Antes do loop for...of ser introduzido, o loop for tradicional era o método padrão para iteração de array. No entanto, pode estar sujeito a erros, como iniciar o índice em 1 em vez de 0 ou usar erroneamente arr.length em vez de arr.length - 1. Como sugere o MDN, "geralmente é melhor usar para... de se você puder."

Quando usar:
Quando você precisar de controle total sobre a iteração, como pular iterações ou iterar ao contrário.
Quando você precisar do índice e do valor durante a iteração.

para...de
Vantagens:

• Simplicidade e recomendação: O loop for...of é uma maneira direta e recomendada de iterar em um array, pois ele lida automaticamente com os índices para você. Você ainda pode usar break para sair do loop ou continuar pulando para a próxima iteração, com base nos valores e não nos índices.

Quando usar:
Quando você só precisa trabalhar com valores e não precisa de acesso aos índices.

Array.prototype.map()
Vantagens:

• Sem mutação: o array original permanece inalterado.
• Retorna um novo array: Após aplicar a função especificada a cada elemento, map() retorna um novo array com os resultados. Isso o torna ideal para programação funcional.

Quando usar:
Quando você deseja aplicar uma função a cada elemento de um array e precisa do resultado como um novo array.

Array.prototype.forEach()
Vantagens:

• Sem valor de retorno: forEach() permite que você execute uma função em cada elemento sem retornar um novo array. É frequentemente usado para executar efeitos colaterais, como registro, atualização de variáveis ​​ou manipulação do DOM.

Quando usar:
Quando você deseja aplicar uma função a cada elemento de um array, mas não precisa retornar um novo array.

Array.prototype.entries()
Vantagens:

• Acesso a índices e valores: entradas() retorna um iterador que fornece o índice e o valor de cada elemento. Isso pode ser mais simples e legível do que usar um loop for tradicional. Se um slot de array estiver vazio, ele retornará indefinido para o valor.

Quando usar:
Quando você precisar acessar os índices e valores dos elementos do array.

Array.prototype.keys()
Vantagens:

• Acesso aos índices: keys() retorna um iterador para os índices do array. Isso é útil quando você precisa apenas dos índices e não dos valores. Em matrizes esparsas, [...arr.keys()] também incluirá índices para slots vazios (onde o valor é indefinido).

Quando usar:
Quando você precisa de um iterador que forneça apenas os índices dos elementos do array.

Array.prototype.values()
Vantagens:

• Acesso a valores: valores() retorna um iterador para os valores do array. Isso é semelhante a usar for...of com matrizes, mas fornece um iterador em vez de um loop.

Quando usar:
Quando você precisa de um iterador que forneça apenas os valores dos elementos do array.

O que são iteradores de array:
Array.prototype.entries(), Array.prototype.keys() e Array.prototype.values() retornam novos objetos iteradores de array. Esses iteradores permitem percorrer uma coleção semelhante a um array, um elemento por vez. Eles vêm com um método next() que fornece o próximo valor na sequência, que pode ser chamado conforme necessário, ajudando a economizar memória.

Aqui está um exemplo usando entradas():

const arr = ['a', 'b', 'c'];
const iterator = arr.entries();

console.log(iterator.next()); // { value: [0, 'a'], done: false }
console.log(iterator.next()); // { value: [1, 'b'], done: false }
console.log(iterator.next()); // { value: [2, 'c'], done: false }
console.log(iterator.next()); // { value: undefined, done: true }

Para ser sincero, eu não estava totalmente ciente de alguns detalhes e usos desses métodos, portanto, abordar essa questão da entrevista e aprofundar meu entendimento foi muito importante. Esteja você trabalhando com loops básicos ou técnicas de programação funcional mais avançadas, conhecer esses métodos pode aumentar significativamente a eficiência e a legibilidade do seu código.