Arrays em JavaScript: criar, acessar e percorrer

O que é um array em JavaScript

Um array em JavaScript guarda uma sequência ordenada de valores. Esses valores podem ser de qualquer tipo — números, strings, objetos e até outros arrays — e nem precisam ser todos do mesmo tipo. Para criar um array, basta usar colchetes:

Essa sintaxe literal é como você vai criar arrays em JavaScript em 99% dos casos. Existe também o new Array(...), mas ele tem uma pegadinha: new Array(3) cria um array com length 3 e nenhum elemento de verdade dentro, e não [3]. Fica no [] mesmo.

O índice começa no zero

Para acessar elementos do array, você usa a posição — começando do 0:

Dois detalhes importantes aqui. Primeiro: acessar um índice fora do array não dispara erro nenhum — simplesmente retorna undefined. Essa é uma fonte clássica daqueles bugs do tipo "por que isso tá vindo undefined?". Segundo: você pode atribuir um valor a qualquer índice, inclusive um depois do final do array, que o JavaScript vai estender o array sem reclamar:

As posições 3 e 4 viram "slots vazios" (buracos no array esparso). O length salta para 6. Você raramente vai querer isso — é um efeito colateral da flexibilidade dos arrays em JavaScript, não um recurso em que vale a pena se apoiar.

length é dinâmico

O array.length é sempre uma unidade a mais que o maior índice. Ele se atualiza sozinho conforme você adiciona ou remove elementos:

Vale guardar esse truque: atribuir um valor a length corta o array. Fazer nums.length = 0 é uma forma rápida de esvaziar o array no próprio lugar.

push, pop, shift e unshift em JavaScript

Quatro métodos para adicionar e remover itens nas pontas do array:

• push(x) adiciona no final e retorna o novo tamanho do array.
• pop() remove do final e retorna o elemento removido.
• unshift(x) adiciona no começo.
• shift() remove do começo.

push e pop são rápidos. Já shift e unshift precisam reindexar todos os outros elementos, então ficam mais lentos em arrays grandes — tranquilo para tamanhos do dia a dia, mas vale saber se você estiver lidando com milhões de itens.

slice vs splice em JavaScript

Esses dois métodos têm nomes parecidos e comportamentos completamente diferentes. Entenda a diferença de uma vez e você vai economizar muita dor de cabeça.

O slice(start, end) retorna uma cópia de um pedaço do array, sem mexer no original. O end não entra no resultado:

splice(start, deleteCount, ...items) altera o array original. Dá pra usar para remover, inserir ou as duas coisas ao mesmo tempo, e o retorno é o que foi removido:

Regra prática: se a palavra te lembra fatiar uma cópia de um pão, é slice. Se te lembra emendar um filme (cortar e inserir), é splice.

Buscando elementos: indexOf, includes e find

Três formas de procurar algo em um array, cada uma pra uma situação:

• indexOf(x) devolve a posição do item, ou -1 se ele não estiver no array. Útil quando você precisa do índice.
• includes(x) devolve um booleano. Fica mais limpo quando você só quer saber "esse valor está aí dentro?". Além disso, trata NaN corretamente, coisa que o indexOf não faz.
• find(predicate) executa uma função para cada elemento e retorna o primeiro que bater com a condição. Esse é o método certo para array de objetos em javascript, já que indexOf e includes só fazem comparação estrita de igualdade.

Como percorrer um array em javascript

Existem algumas formas legais, e cada uma se encaixa melhor em uma situação:

for...of costa ser a escolha padrão — fica legível, funciona com qualquer iterável e já te entrega o valor direto. forEach é ok quando você também precisa do índice e não vai interromper o loop no meio (não dá pra usar break dentro de forEach). O for clássico com índice é mais verboso, mas te dá controle total — use quando precisar pular elementos, percorrer o array de trás pra frente, ou os dois.

Um loop pra evitar: for...in. Ele itera chaves e ainda inclui propriedades herdadas. Isso é coisa de objeto, não de array.

Copiando e combinando arrays

Arrays são valores por referência. Atribuir um a outro não copia nada — você só cria dois nomes pro mesmo array:

Para copiar um array de verdade, use o spread operator ou o slice():

Os dois geram uma cópia rasa — o array de cima é novo, mas se os elementos forem objetos, esses objetos continuam sendo compartilhados. O spread também é a forma mais limpa de juntar arrays:

Arrays de objetos em JavaScript

Na prática, a maioria dos arrays em JavaScript guarda objetos. Os mesmos métodos continuam funcionando, só que agora as comparações ficam bem mais interessantes:

filter devolve um novo array com os elementos que passam por um teste (predicado). Já map devolve um novo array em que cada elemento foi transformado. Encadear os dois é o feijão com arroz de quem trabalha com array de objetos em JavaScript — e a próxima página aprofunda justamente essa família de métodos de array.

Arrays e objetos: quando usar cada um

Um modelo mental rápido: use array quando a ordem importa e você está lidando com uma lista de coisas do mesmo tipo. Use objeto (ou um Map) quando você quer acessar valores por uma chave. "Primeiro, segundo, terceiro" é cenário de array. "Buscar o usuário com id 42" é cenário de objeto ou Map.

Dá pra combinar os dois — arrays de objetos aparecem o tempo todo —, mas não use array como se fosse um dicionário indexado por chave, nem use objeto como se fosse uma lista ordenada. Cada um faz bem o seu papel.

A seguir: desestruturação

Extrair valores de um array pelo índice (e propriedades de um objeto pelo nome) é algo tão comum que o JavaScript tem uma sintaxe dedicada pra isso. Chama-se desestruturação, e é o assunto da próxima página.