Voltar
Estruturas de DadosJavaScriptArtigo · 27 de mar. de 2024 · 10 min

jonathanjuliani

Implementando Array com NodeJS e Javascript

Arrays em JavaScript/Node.js: métodos essenciais, imutabilidade e quando preferir array em vez de outras estruturas. Guia com código.

Ilustração do post sobre arrays com Node.js e JavaScript

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:

  • Como criar e acessar arrays em Node.js/JavaScript
  • Os métodos essenciais: push, pop, shift, unshift, map, filter, reduce, forEach
  • Como trabalhar com arrays de objetos
  • O conceito de imutabilidade e por que métodos como map são preferíveis a mutação direta
  • Quando usar arrays vs outras estruturas de dados

Pré-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).


implementando-arrays-em-nodejs-javascript

Arrays em JavaScript: criar, acessar e não cair na mutação surpresa

O básico: índice começa em zero

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.

Criando e Acessando Arrays

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.

código
const frutas = ['Maçã', 'Banana', 'Laranja']
const frutasQueJonGosta = [] // iniciado vazio
 
console.log(frutas[0])
// Saída: Maçã

Um exemplo com objetos:

código
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 dia

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

código
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.

código
const arr = [1, 2, 3]
const poppedElement = arr.pop()
// arr agora é [1, 2] e poppedElement é 3

shift: Remove o primeiro elemento de um array e retorna o elemento removido.

"Tá Jon, shift é igual pop só 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.

código
const arr = [1, 2, 3]
const shiftedElement = arr.shift()
// arr agora é [2, 3] e shiftedElement é 1

unshift: Adiciona um ou mais elementos ao início de um array e retorna o novo comprimento do array.

código
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.

código
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.

código
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 :)

código
const numbers = [1, 2, 3]
numbers.forEach((num) => console.log(num))
// Saída: 1 2 3

E 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 na prática: API, pilha na série e imutabilidade

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.

Edge cases: map não clona objeto aninhado

map, filter e { ...arr } criam um array novo, mas os elementos continuam sendo as mesmas referências se forem objetos:

código
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 map pra 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.


TL;DR — Métodos de array mais usados

MétodoO que fazMuta o array?
push(x)Adiciona x no fimSim
pop()Remove e retorna o último elementoSim
shift()Remove e retorna o primeiro elementoSim
unshift(x)Adiciona x no inícioSim
map(fn)Retorna novo array com fn aplicada a cada itemNão
filter(fn)Retorna novo array com itens que passam na fnNão
reduce(fn, init)Reduz o array a um único valorNão
forEach(fn)Executa fn para cada item, não retorna nadaNão
find(fn)Retorna o primeiro item que passa na fnNão
includes(x)Retorna true se x existe no arrayNão

Próximos passos

Arrays são a base para outras estruturas da série. Continue para:


Antes de fechar

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.

Inscreva-se no Ledger da Engenharia

Receba notas de arquitetura e performance na sua caixa de entrada. Mesma lista do convite—inscreva-se aqui quando quiser.

Sem spam. Sem APIs de terceiros. Apenas eu enviando updates.

O Ledger da Engenharia

Transmissoes quinzenais sobre arquitetura, performance e engenharia aplicada. Inscreva-se a partir de qualquer artigo—sem spam.