Domine loops em Javascript: como iterar sobre qualquer array e array-like

Aqui estão as principais opções:

for...of
for...in
forEach
map
filter
find
every
some
reduce

Ah e também precisa de mais uma coisa: saber quando usar cada um deles 😅.

uma corda enrolada formando um loop sobre um fundo azul

Fiz um post no meu blog mostrando:

Como iterar em qualquer array e array-like
Outros tipos de lista além de array
for...of
for..in
foreach
E outras dicas mais

Vou deixar o link aqui na fonte. Adoraria ler teu comentário sobre o conteúdo :)

Um abraço.

kht mês passado

Só um detalhe, o artigo trata map, filter e similares como equivalentes ao loop, mas não é bem assim.

map percorre o array, é verdade, mas ele executa uma ação com cada elemento e retorna outro array com os resultados. Então se vc não precisa desse outro array (por exemplo, vc só imprimiu o resultado e depois não vai mais precisar dele), não tem porque usar map.

filter também retorna outro array, mas contendo somente os elementos que satisfazem o critério. De novo, se vc não precisa desse array, não tem porque usar, e um loop simples é mais adequado.

Já every, some e find nem sempre percorrem todo o array. Eles param quando detectam que não precisa mais. Por exemplo, find interrompe o loop assim que encontra o elemento que satisfaz o critério. Ou seja, o código abaixo:

var array = [1,2,3,4,5,6];

// procura por um número par
array.find(function (x) {
  console.log('verificando', x);
  return x % 2 == 0;
});

Imprime:

verificando 1
verificando 2

Pois assim que encontrou um elemento que satisfaz o critério, ele para de procurar. Os mesmo vale para os demais: every verifica se todos os elementos satisfazem o critério, então se um não satisfaz, ele nem verifica os demais. E some é o contrário: verifica se algum elemento satisfaz o critério, então se encontrar um que satisfaz já é o suficiente e ele nem verifica o resto.

E reduce só faz sentido se vc quer um resultado agregado de todos os elementos. Ainda sim, todos esses métodos que recebem uma função de callback acabam tendo um custo extra, pois é feita uma chamada de função para cada elemento. Claro que para arrays pequenos tanto faz, mas se for processar grandes volumes de dados, tem que levar isso em conta.

Vale contar também que tem outras diferenças, como ser mais complicado usar break em um forEach. E ao contrário do que afirma o artigo, for in não é só para objetos, também serve para arrays. E vc pode tornar um objeto iterável, tornando possível o uso de for of.

E vale lembrar que existem diferenças importantes entre for in, for of e um for "tradicional":

Ou seja, tem vezes em que tanto faz usar um ou outro, mas tem vezes que faz diferença. E dependendo do que vc precisa, recomenda-se escolher o método mais adequado. Não dá pra simplesmente tratar todos como se fossem a mesma coisa.

deMenezes mês passado

Sim, acho que ficou faltando a explicação completa sobre a diferença de usar map, filter... e fazer um loop. Deixei isso melhor explicado nos outros posts onde falei sobre esses métodos de array. E esses outros posts estão linkados no corpo desse. Sobre os pontos que tu levantou sobre for...in, for...of e tornar um objeto iterável, eu não discordo. Porém são coisas que nunca usei no trabalho e não vejo aplicação para aquilo, sempre consigo resolver de outra forma que acredito ser mais simples, como um Object.entries por exemplo. Muito do blog é minha visão sobre como trabalhar com a linguagem e as coisas que aprendo, e foco em não falar sobre coisas que a pessoa não vá usar. Por exemplo, existe uma forma de converter array-like pra array usando `Array.prototype.slice.call(arguments)`. Hoje em dia não precisa mais usar isso, tem formas melhores, como as que mostrei, então essa explicação eu removi enquanto revisava o post para deixar ele mais curto e direto. Obrigado pelo teu comentário, vou tentar ficar mais ligado nesses detalhes :)

Programmer404 mês passado

Seria legal dar ao menos uma breve explicação sobre o conteúdo que está presente no seu blog. Provavelmente este post terá muitos dowvotes por causa disto.

Outro ponto que eu acho interessante é separar bem o que é interar sob uma lista e criar um loop e não da espaço para confundir isso... Eu já vi gente convertendo algo para uma lista apenas para interar com o forEach, onde um simples while ou for era o ideal (e mais optimizado) para o problema. Esta pessoa provavelmente não sabia a diferença entre controle de fluxo e interar sob uma lista porquê alguém ensinou errado.

Estarei lendo o artigo!

deMenezes mês passado

> Eu já vi gente convertendo algo para uma lista apenas para interar com o forEach, onde um simples while ou for era o ideal É por isso que no post tem um capítulo mostrando onde pode usar o `forEach` e como a pessoa pode descobrir todos os métodos que existem dentro de cada estrutura, usando o prototype. > (e mais optimizado) para o problema Isso foge um pouco do assunto do post, mas dando meus 10 centavos... sempre que ouço falar sobre qual a forma mais performática de iterar em Javacript, o assunto acaba caindo em "a performance não muda tanto assim de um jeito pra outro, então o ideal é usar o que deixa o código mais limpo". Nesse caso, eu não usaria for em ver de forEach por causa de performance. Acho que é mais gosto pessoal mesmo. Obrigado pelo teu comentário, vou tentar ficar mais ligado nesses detalhes :)