Arrays em JavaScript/Node.js: métodos essenciais, imutabilidade e quando preferir array em vez de outras estruturas. Guia com código.
Jonathan Juliani
Engenheiro de Software Sr - Full Stack · WithClutch Inc. | Juliani Tecnologia
push, map e filter você usa no automático — mas quando o array cresce ou vira gargalo de performance, a diferença entre mutar e retornar um array novo, ou entre array e outra estrutura, aparece de verdade. Bora revisar arrays em Node.js/JavaScript com o que importa na prática antes de linked list, pilha e fila na série.
O que você vai aprender:
push, pop, shift, unshift, map, filter, reduce, forEachmap são preferíveis a mutação diretaPré-requisitos: familiaridade com JavaScript básico — variáveis, funções e o que é um objeto. Nenhuma experiência prévia com estruturas de dados necessária. Se você ainda não leu o panorama da série, comece pelo resumo das estruturas mais usadas (episódio 1).
Um array é uma coleção ordenada ou não de elementos, que podem ser de qualquer tipo, desde números e strings até objetos e até mesmo outros arrays. Em Node.JS, JavaScript, e outras linguagens a flexibilidade dos arrays é incomparável, você vai usar, muitas vezes.
A criação de um array em Node/JavaScript é muito simples, podendo ser iniciado vazio ou já com elementos. Acessar e modificar seus elementos é igualmente direto, utilizando índices que começam em zero.
const frutas = ['Maçã', 'Banana', 'Laranja']
const frutasQueJonGosta = [] // iniciado vazio
console.log(frutas[0])
// Saída: MaçãUm exemplo com objetos:
const fulano = {
nome: 'fulano',
idade: 99,
}
const beltrano = {
nome: 'beltrano',
idade: 98,
}
const pessoas = [fulano, beltrano]
console.log(pessoas[0])
// Saída: { "nome": "fulano", "idade": 99 }push, pop, map e filter: métodos de array no dia a diaO universo Node.js/JavaScript oferece uma biblioteca enorme de métodos pra array. Bora focar nos que mais aparecem em código de produção:
push: Adiciona um ou mais elementos ao final de um array e retorna o novo comprimento do array.
const arr = [1, 2, 3]
arr.push(4)
// arr agora é [1, 2, 3, 4]pop: Remove o último elemento de um array e retorna o elemento removido.
const arr = [1, 2, 3]
const poppedElement = arr.pop()
// arr agora é [1, 2] e poppedElement é 3shift: Remove o primeiro elemento de um array e retorna o elemento removido.
"Tá Jon,
shifté igualpopsó que no começo, né?"
Quase — só que no começo o Node precisa mover todos os índices uma casa. Em array grande isso é O(n), não O(1). pop no fim é barato; shift no início, nem sempre.
const arr = [1, 2, 3]
const shiftedElement = arr.shift()
// arr agora é [2, 3] e shiftedElement é 1unshift: Adiciona um ou mais elementos ao início de um array e retorna o novo comprimento do array.
const arr = [2, 3]
arr.unshift(1)
// arr agora é [1, 2, 3]map: Executa uma função de callback em cada elemento do array e retorna um novo array com os resultados.
Aqui já vai uma dica, se você não precisa de um novo array com os resultados, então não precisa usar o map, use o forEach.
const numbers = [1, 2, 3]
const doubled = numbers.map((num) => num * 2)
// doubled agora é [2, 4, 6]filter: Retorna um novo array com todos os elementos que passaram no teste implementado pela função de callback.
const numbers = [1, 2, 3, 4, 5]
const evenNumbers = numbers.filter((num) => num % 2 === 0)
// evenNumbers agora é [2, 4]forEach: Executa uma função de callback em cada elemento do array, não te retorna nada, só faz o que você ta pedindo :)
const numbers = [1, 2, 3]
numbers.forEach((num) => console.log(num))
// Saída: 1 2 3E o
reduce,includes,find,findIndex,concat,slice,splice…?
São muitos. A ideia aqui era ter um resumo dos que mais aparecem no dia a dia — os outros existem e também são bastante usados, mas deixar todos em um único post tornaria o artigo enorme.
Arrays entram em quase todo fluxo de dados: filtrar resposta de API, montar payload, ordenar lista na tela. Pilhas e filas da série (episódios 3 e 4) costumam ser implementadas em cima de array — então dominar push/pop e shift/unshift aqui paga juros depois.
Prefira const no array que não vai ser reatribuído, e métodos que retornam array novo (map, filter) quando outro trecho do código ainda depende do original.
"Jon, imutável é só não usar
push?"
Não exatamente. Imutável aqui é não alterar o array que outra parte do código ainda referencia. map devolve outro array; push muda o mesmo. Os dois são válidos — a pegadinha é saber qual você está fazendo.
map não clona objeto aninhadomap, filter e { ...arr } criam um array novo, mas os elementos continuam sendo as mesmas referências se forem objetos:
const usuarios = [{ nome: 'Ana', ativo: true }]
const copia = usuarios.map((u) => ({ ...u }))
copia[0].ativo = false
console.log(usuarios[0].ativo) // false — o objeto interno era o mesmo"Tá Jon, usei
mappra não mutar. Por que o original mudou?"
Porque você copiou o array, não necessariamente cada objeto por dentro. Pra cópia profunda de estruturas aninhadas, precisa de structuredClone, biblioteca ou lógica explícita — não é culpa do map, é cópia rasa.
Outro gotcha: sort() muta o array original. Se precisar preservar a ordem inicial, faça const ordenado = [...nums].sort((a, b) => a - b).
Quando não usar array: inserções e remoções constantes no meio de uma lista enorme — linked list tende a ser melhor escolha (próximo episódio). Array brilha em acesso por índice e iteração sequencial.
| Método | O que faz | Muta o array? |
|---|---|---|
push(x) | Adiciona x no fim | Sim |
pop() | Remove e retorna o último elemento | Sim |
shift() | Remove e retorna o primeiro elemento | Sim |
unshift(x) | Adiciona x no início | Sim |
map(fn) | Retorna novo array com fn aplicada a cada item | Não |
filter(fn) | Retorna novo array com itens que passam na fn | Não |
reduce(fn, init) | Reduz o array a um único valor | Não |
forEach(fn) | Executa fn para cada item, não retorna nada |
Arrays são a base para outras estruturas da série. Continue para:
Qual método de array você mais usa no trabalho — map, reduce, ou ainda muta com push/splice? Se viu alguma cagada no texto ou tem um gotcha que eu não citei, deixa nos comentários que a gente ajusta junto.
Receba notas de arquitetura e performance na sua caixa de entrada. Mesma lista do convite—inscreva-se aqui quando quiser.
| Não |
find(fn) | Retorna o primeiro item que passa na fn | Não |
includes(x) | Retorna true se x existe no array | Não |
