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

Ao trabalhar com JavaScript, é importante saber iterar sobre array e array-like. Neste artigo, você aprenderá a dominar loops e iterações.

Shortcut: para iterar sobre qualquer lista em Javascript, use o for...of. Pode usar ainda o forEach em Nodelist, array e DOMTokenList.

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 😅.

Pode parecer muita coisa, mas com a prática, você entende. E sempre pode voltar aqui para ver como usá-los.

Eu já escrevi um post para explicar cada um dos últimos 7 itens da lista:

• Como usar o forEach em Javascript: exemplos detalhados contados em uma história
• Transforme arrays em ouro: aprenda a manipular dados com o map() em Javascript
• Domine o método Filter e simplifique sua lógica com arrays em Javascript
• O método find e a busca ao modo CTRL + F em JavaScript
• Every e some: os métodos de array em Javascript que respondem "sim" ou "não"
• Quem tem medo do reduce? Entenda esse método agora ou seu dinheiro de volta

Ao final deste artigo, você será capaz de iterar sobre qualquer tipo de lista em JavaScript.

E para começar, uma pergunta:

Por que escrevi "lista" no título do post?

Primeiro porque o blog é meu 😝.

E segundo porque array não é o único de tipo de lista no Javascript.

Existem outros tipos como:

• HTMLCollection: lista de elementos HTML retornada pelos métodos document.getElementsByClassName() e document.getElementsByTagName()
• Nodelist: representa os filhos de um elemento (element.childNodes) ou o retorno do método document.querySelectorAll()
• DOMTokenlist: é a lista de classes de um elemento HTML, você obtém ela com element.classList
• NamedNodeMap: é a lista de atributos de um elemento HTML, você obtém ela com element.attributes

Essas listas são chamadas de array-like. Lembra da propaganda "é tipo Net"? Então, array-like é tipo array, mas não é array. Se você rodar Array.isArray() nelas, verá que o resultado será false.

Todas elas (inclusive arrays) têm a propriedade .length, para descobrir a quantidade de itens. Já expliquei em mais detalhes a diferença entre cada tipo de lista.

Mas aqui o foco é como iterar por elas.

Como iterar sobre qualquer lista em Javascript

O todo poderoso for...of

Apelidei ele carinhosamente de farofa.

Com ele, você pode iterar sobre qualquer iterável.

Veja um exemplo com array:

const bolhaDev = ['não', 'pode', 'usar', 'else'];

for (const palavra of bolhaDev) {
  console.log(palavra);
}

// não
// pode
// usar
// else

A variável palavra muda a cada iteração do loop, e passa a ser o próximo item da lista. Você pode chamá-la como quiser e como fizer mais sentido. É uma boa prática usar const antes da variável do loop para evitar que ela seja alterada ali dentro.

O mesmo vale para HTML Collection e Nodelist:

const divs = document.getElementsByTagName('div');
// ou...
const divs = document.querySelector('div');

for (const div of divs) {
  console.log(div);
}

// todas as divs do site serão jogadas no console uma a uma

Você fez seu dever de casa e leu os posts anteriores, certo? Então sabe que DOMTokenList é um tipo de lista que armazena as classes de um elemento HTML:

const main = document.querySelector('main');
const classes = main.classList;

for (const className of classes) {
  console.log(className);
}

No código acima eu peguei todas as classes da tag <main> e iterei sobre elas.

E funciona igual no NamedNodeMap, um array-like que armazena os atributos de um elemento:

const main = document.querySelector('main');

for (const attribute of main.attributes) {
  console.log(attribute);
}

E por fim, você também pode iterar sobre uma string:

const myString = 'Pisei no trem'

for (const letra of myString) {
  console.log(letra)
}

// P
// i
// s
// e
// i
// 
// n
// o
// 
// t
// r
// e
// m

Existem outros iteráveis que você pode usar com o for...of como Map, Set e arguments, mas não vou abordar eles por enquanto.

Dessa forma você consegue iterar sobre qualquer iterável em Javascript.

Existe outro comando para percorrer listas, mas você não pode usá-lo em qualquer uma.

O seletivo forEach

O forEach é seletivo, estilo aquele amigo que não come qualquer sabor de pizza.

Isso porque ele não está disponível em todos os iteráveis. Você só vai encontrá-lo em:

• Nodelist (onde mais uso ele)
• Array
• DOMTokenList

Eu uso o forEach no Nodelist principalmente para alterar elementos da DOM com o querySelectorAll. Por exemplo, adicionar uma classe em todas as divs:

const divs = document.querySelectorAll('div');

divs.forEach(function(div) {
  div.classList.add('wrapper')
});

Você já percebeu que com o for...of é possível iterar por todas as listas, e com o forEach por quase todas. Mas quando se fala de array, existem opções adicionais.

Arrays: flexibilidade total

Array é uma maravilha.

Na minha humilde opinião, do alto da minha ignorância, é o melhor tipo de lista. Isso porque você pode iterar por ela da forma que quiser, com qualquer método, e tudo funciona.

const bolhaDev = ['não', 'pode', 'usar', 'else'];

bolhaDev.forEach(palavra => console.log(palavra));
bolhaDev.map(palavra => palavra.at(0));
bolhaDev.filter(palavra => palavra.length > 3);
bolhaDev.find(palavra => palavra === 'else');
bolhaDev.every(palavra => palavra.length === 4);
bolhaDev.some(palavra => palavra.length === 3);
bolhaDev.reduce((acc, cur) => acc + cur.length, 0);

Além, é claro, do for...of.

Isso torna a array mais flexível a qualquer situação de uso. Se você conferir os links que deixei no começo do post, verá como aplicar todos esses métodos numa array.

Infelizmente, eu não posso fazer os mesmos elogios a outros tipos de iteráveis.

Array-like é só isso mesmo?

Parece que array like não serve para nada.

Porém, eles possuem outros métodos, além de forEach e .length.

Para descobrir tudo que você pode fazer com eles, basta olhar uma documentação, como a MDN. Outra opção muito divertida é olhar o protótipo do array-like no próprio Devtools.

Se você digitar o nome de uma estrutura de dados seguido de .prototype, verá todos os métodos disponíveis. Veja o exemplo abaixo com Nodelist:

Agora faça o teste com outras estruturas de dados. Funciona inclusive com Array e Object.

Mesmo com tantos métodos, ainda assim o Nodelist (e qualquer array-like) é mais limitado do que uma array.

Se você precisa fazer um map em um Nodelist, por exemplo, terá um erro como esse:

Então, antes você precisa convertê-lo para uma array.

Converter array like para array

Aqui está o grande pulo do gato.

Se você quer usar todo o poder da array, mas tem outra lista em mãos, sem problemas. É totalmente possível converter essa outra lista para array para trabalhar com mais flexibilidade.

Existem duas formas.

A primeira é com o método Array.from():

const buttonsArrayLike = document.querySelectorAll('.button');
const buttonsArray = Array.from(buttonsArrayLike);

buttonsArray.map(...);
buttonsArray.filter(...);
buttonsArray.reduce(...);

Basta colocar a array like como parâmetro dessa função e pegar o retorno já em formato de array.

E a segunda forma é com o spread operator:

const buttonsArrayLike = document.querySelectorAll('.button');
const buttonsArray = [ ...buttonsArrayLike ];

buttonsArray.map(...);
buttonsArray.filter(...);
buttonsArray.reduce(...);

Com ele você espalha os itens de uma lista. No caso acima, na linha 2, espalha dentro de um novo array, iniciado com os colchetes.

Ambas soluções possuem o mesmo resultado, basta usar cada uma no momento mais adequado.

Por fim, existe outra forma de iterar bastante conhecida.

E o for...in?

O for...in é bem parecido com o for...of, porém para objetos.

A forma de escrever é igual:

const obj = {
  else: false,
  cleanCode: true
};

for (const property in obj) {
  console.log(property);
}

// else
// cleanCode

O que aparece no console é apenas a chave do objeto.

Para acessar algum valor, é preciso usar a notação de colchetes:

const obj = {
  else: false,
  cleanCode: true
};

for (const property in obj) {
  console.log(obj[property]);
}

// false
// true

O for...in itera apenas sobre as propriedades enumeráveis de um objeto. Isso não inclui métodos herdados do construtor do objeto como o toString().

E por fim, recomendo que você não altere propriedades do objeto durante o loop. Isso pode causar uma festa danada, bagunçar o loop e gerar comportamentos inesperados.

Callback

Existem muitas formas de iterar sobre listas em Javascript. Algumas delas podem ser usadas apenas em arrays, mas com o for...of (farofa) é possível percorrer todas elas.

Nem toda lista é array, mas toda array é uma lista. Array-like faz parte da vida, está tudo bem, e você sempre pode converter para array antes de trabalhar com elas.

Também é possível iterar sobre as propriedades de um objeto, e acessar seus valores com a notação de colchetes.

Esse post fecha com chave de ouro junto com os outros onde falei sobre os métodos de array em Javascript, e a diferença entre os tipos de lista. Consegui mostrar quase tudo que você precisa para trabalhar com elas.

Tem mais coisas? Claro que tem. Mas decorar todos os comandos e possibilidades de uso da linguagem não é o ideal.