Manipular array em JavaScript mudou de figura em 2026. Por exemplo, o ES2024 trouxe métodos imutáveis nativos (toSorted, toReversed, Object.groupBy) que substituem receitas verbosas com reduce. Por isso, este guia cobre o essencial — criação, map, filter, reduce — e mostra o que mudou pra quem trabalha com React, Node e código moderno.
Em outras palavras, dominar array em JavaScript hoje não é decorar 30 métodos — é saber quando mutar e quando criar cópia. Em seguida, mostramos os fundamentos com exemplos práticos e cobrimos os novos métodos do ES2024 que ninguém em PT-BR ainda explicou direito.
![Cena 3D voxel cinematica em navy escuro com sparse particulas warm orange: dev voxel de costas em mesa de madeira em foreground, badge JavaScript JS amarelo glowing suspenso centralizado, 5 paineis de codigo semi-transparentes glowing em arco mostrando users.toSorted(), Object.groupBy, array.map, array.filter, array brackets [ ] notation, conectados por streams warm orange ao JS centro — visualizacao narrativa para artigo techknow array em JavaScript ES2024](https://api.techknow.com.br/wp-content/uploads/2026/06/array-javascript-featured.webp)
toSorted, Object.groupBy e Array.fromAsync.O que é um array em JavaScript
Em primeiro lugar, um array em JavaScript é uma estrutura de dados que armazena uma lista ordenada de valores. Por exemplo, você pode guardar números, strings, objetos, funções — qualquer coisa, inclusive misturando tipos:
// Array simples
const numeros = [1, 2, 3, 4, 5];
const frutas = ['maçã', 'banana', 'uva'];
const misto = [1, 'texto', true, null, { id: 1 }];
// Array de objetos (caso muito comum)
const usuarios = [
{ id: 1, nome: 'Maria', idade: 28 },
{ id: 2, nome: 'João', idade: 34 },
{ id: 3, nome: 'Ana', idade: 22 }
];
Por outro lado, diferente de outras linguagens, arrays em JavaScript têm tamanho dinâmico — crescem e diminuem conforme você adiciona ou remove elementos. Além disso, todo array tem uma propriedade .length que retorna a quantidade de itens. Em outras palavras, são extremamente flexíveis, o que explica por que viraram a estrutura mais usada no dia a dia.
Criando, lendo e percorrendo arrays
Em segundo lugar, existem três formas principais de criar um array. Por exemplo:
// 1. Array literal — a forma mais comum
const a = [1, 2, 3];
// 2. Construtor Array — útil pra criar array com tamanho fixo
const b = new Array(5); // [empty × 5]
const c = Array.of(1, 2, 3); // [1, 2, 3] — recomendado em vez de new Array
// 3. Array.from — converter iteráveis ou criar com função
const d = Array.from('abc'); // ['a', 'b', 'c']
const e = Array.from({ length: 3 }, (_, i) => i); // [0, 1, 2]Acessando elementos por índice
Em seguida, arrays em JavaScript usam índice baseado em zero — o primeiro elemento está na posição 0. Em outras palavras:
const cores = ['vermelho', 'verde', 'azul'];
cores[0]; // 'vermelho'
cores[2]; // 'azul'
cores[10]; // undefined — JS não dá erro de fora do array
cores.at(-1); // 'azul' — at() aceita índice negativo (mais moderno)Percorrendo arrays com for of e forEach
Por outro lado, existem várias formas de iterar. Em primeiro lugar, for...of é a forma moderna e recomendada:
const numeros = [10, 20, 30];
// for...of — moderno, recomendado
for (const n of numeros) {
console.log(n); // 10, 20, 30
}
// forEach — callback por elemento (não pode usar break ou return)
numeros.forEach((n, indice) => {
console.log(`Índice ${indice}: ${n}`);
});
// for clássico — útil quando precisa de índice e/ou break
for (let i = 0; i < numeros.length; i++) {
if (numeros[i] > 15) break;
console.log(numeros[i]);
}Adicionando e removendo elementos
Em terceiro lugar, esses 4 métodos são o ABC de manipular array em JavaScript. Por exemplo:
const lista = ['a', 'b', 'c'];
// Adicionar no final
lista.push('d'); // ['a', 'b', 'c', 'd']
lista.push('e', 'f'); // ['a', 'b', 'c', 'd', 'e', 'f'] — múltiplos
// Remover do final
const ultimo = lista.pop(); // ultimo = 'f', lista = [..., 'e']
// Adicionar no começo
lista.unshift('zero'); // ['zero', 'a', 'b', ...]
// Remover do começo
const primeiro = lista.shift(); // primeiro = 'zero', lista = ['a', 'b', ...]
// splice — adicionar/remover em qualquer posição (MUTA)
const arr = [1, 2, 3, 4, 5];
arr.splice(2, 1); // remove 1 item no índice 2: [1, 2, 4, 5]
arr.splice(2, 0, 'novo'); // insere 'novo' no índice 2: [1, 2, 'novo', 4, 5]
// slice — copiar uma fatia (NÃO MUTA, retorna novo array)
const original = [1, 2, 3, 4, 5];
const copia = original.slice(1, 4); // [2, 3, 4]
Em outras palavras, splice e slice têm nomes parecidos mas funções diferentes — splice modifica o array original, slice retorna uma cópia. Por isso, na dúvida, slice é mais seguro.
Publicidade
Map, filter e reduce: o trio essencial
Em quarto lugar, esses três métodos viraram a fundação do JavaScript moderno. Por exemplo, todo código React/Vue/Svelte usa map pra renderizar listas e filter pra remover itens. Em outras palavras, dominar esse trio acelera 80% das tarefas diárias.
map — transformar cada elemento
const numeros = [1, 2, 3, 4];
// Dobrar cada número
const dobrados = numeros.map(n => n * 2);
// [2, 4, 6, 8]
// Extrair propriedade de objetos (caso muito comum em React)
const usuarios = [
{ id: 1, nome: 'Maria' },
{ id: 2, nome: 'João' }
];
const nomes = usuarios.map(u => u.nome);
// ['Maria', 'João']filter — selecionar elementos que passam num teste
const numeros = [1, 2, 3, 4, 5, 6];
// Apenas números pares
const pares = numeros.filter(n => n % 2 === 0);
// [2, 4, 6]
// Filtrar usuários maiores de idade
const usuarios = [
{ nome: 'Ana', idade: 17 },
{ nome: 'Bia', idade: 25 },
{ nome: 'Carlos', idade: 30 }
];
const adultos = usuarios.filter(u => u.idade >= 18);
// [{ nome: 'Bia', idade: 25 }, { nome: 'Carlos', idade: 30 }]reduce — agregar em um valor único
const numeros = [1, 2, 3, 4, 5];
// Somar todos
const total = numeros.reduce((acc, n) => acc + n, 0);
// 15
// Contar ocorrências (caso clássico)
const palavras = ['a', 'b', 'a', 'c', 'b', 'a'];
const contagem = palavras.reduce((acc, palavra) => {
acc[palavra] = (acc[palavra] || 0) + 1;
return acc;
}, {});
// { a: 3, b: 2, c: 1 }
Por outro lado, esses métodos brilham ainda mais quando combinados com tipagem em TypeScript — o editor te avisa em tempo real se você está tentando fazer .map em algo que não é array, ou se o callback retorna tipo errado.
Mutating vs não-mutating: por que isso importa em 2026
Em quinto lugar, este é o conceito mais importante deste guia. Por exemplo, alguns métodos de array modificam o array original (mutam), outros retornam um novo array (não mutam). Em outras palavras, a diferença parece sutil mas tem consequências enormes em código real:
| Métodos que MUTAM | Métodos que NÃO mutam |
|---|---|
push, pop, shift, unshift |
map, filter, reduce |
splice, sort, reverse, fill |
slice, concat, flat, flatMap |
| (modificam o original) | toSorted, toReversed, toSpliced, with (ES2024) |
Por que React odeia mutação direta
Em primeiro lugar, frameworks reativos como React, Vue, Svelte e Solid detectam mudança comparando referências. Por exemplo, se você fizer state.push(item) em React, o array continua com a mesma referência — React não vê mudança e não re-renderiza. Por isso, sempre crie uma cópia em vez de mutar:
// ❌ Quebra React — muta o array original
function adicionarItem(itens, novo) {
itens.push(novo); // referência não muda, React não re-renderiza
return itens;
}
// ✅ Funciona com React — retorna novo array
function adicionarItem(itens, novo) {
return [...itens, novo]; // nova referência, React detecta
}
// ✅ Alternativa com concat
function adicionarItem(itens, novo) {
return itens.concat(novo);
}Em outras palavras, imutabilidade não é dogma acadêmico — é requisito prático em qualquer stack moderna. Por isso, conhecer princípios SOLID aplicados ao React ajuda a estruturar componentes que naturalmente preservam imutabilidade.
Os novos métodos do ES2024: toSorted, toReversed, toSpliced e with
Em sexto lugar, o ES2024 (lançado em 2024 e amplamente suportado em 2026) introduziu versões imutáveis dos métodos clássicos que mutavam. Por outro lado, ninguém em PT-BR explicou direito ainda — aqui vai:
toSorted vs sort
const numeros = [3, 1, 4, 1, 5, 9, 2];
// ❌ sort() muta o original
const sortado = numeros.sort(); // [1, 1, 2, 3, 4, 5, 9]
// numeros agora é [1, 1, 2, 3, 4, 5, 9] — original mudou!
// ✅ toSorted() retorna novo array
const original = [3, 1, 4, 1, 5, 9, 2];
const novoSortado = original.toSorted(); // [1, 1, 2, 3, 4, 5, 9]
// original continua [3, 1, 4, 1, 5, 9, 2] — preservadotoReversed e toSpliced
const lista = ['a', 'b', 'c', 'd'];
// toReversed — versão imutável de reverse()
const invertida = lista.toReversed(); // ['d', 'c', 'b', 'a']
// lista continua ['a', 'b', 'c', 'd']
// toSpliced — versão imutável de splice()
const semSegundo = lista.toSpliced(1, 1); // ['a', 'c', 'd']
// lista continua ['a', 'b', 'c', 'd']with — trocando um índice sem mutar
const original = ['a', 'b', 'c', 'd'];
// ❌ Forma antiga (mutava)
// original[2] = 'X';
// ✅ ES2024 — with() retorna novo array com o índice trocado
const novo = original.with(2, 'X'); // ['a', 'b', 'X', 'd']
// original continua intacto
Em outras palavras, esses 4 métodos eliminaram a necessidade de fazer [...arr].sort() ou structuredClone(arr).reverse() só pra evitar mutação. Por isso, em código React/Redux/Zustand, eles viraram a forma idiomática.
Agrupando dados sem reduce: Object.groupBy e Map.groupBy
Em sétimo lugar, esse é um dos métodos mais aguardados do ES2024. Por exemplo, agrupar elementos por uma propriedade era receita verbosa com reduce. Agora é uma linha:
const usuarios = [
{ nome: 'Maria', cidade: 'SP' },
{ nome: 'João', cidade: 'RJ' },
{ nome: 'Ana', cidade: 'SP' },
{ nome: 'Carlos', cidade: 'MG' }
];
// ❌ Forma antiga com reduce
const antes = usuarios.reduce((acc, u) => {
if (!acc[u.cidade]) acc[u.cidade] = [];
acc[u.cidade].push(u);
return acc;
}, {});
// ✅ ES2024 — Object.groupBy
const depois = Object.groupBy(usuarios, u => u.cidade);
/* Resultado:
{
SP: [{ nome: 'Maria', cidade: 'SP' }, { nome: 'Ana', cidade: 'SP' }],
RJ: [{ nome: 'João', cidade: 'RJ' }],
MG: [{ nome: 'Carlos', cidade: 'MG' }]
}
*/
// Variante com Map (preserva ordem de inserção das chaves)
const grupoMap = Map.groupBy(usuarios, u => u.cidade);
Por outro lado, Map.groupBy é melhor quando a chave precisa ser um objeto ou quando você quer preservar ordem de inserção. Dessa forma, o ES2024 cobriu lacunas reais da linguagem.
Array.fromAsync e fluxos assíncronos
Em oitavo lugar, esse método é específico mas resolve dor real. Por exemplo, antes você precisava combinar Promise.all com map pra converter um async iterable em array — agora é nativo:
// Stream assíncrono (ex: leitura de arquivo, fetch paginado)
async function* numerosAsync() {
yield 1;
yield 2;
yield 3;
}
// ❌ Forma antiga
async function antes() {
const result = [];
for await (const n of numerosAsync()) {
result.push(n);
}
return result;
}
// ✅ ES2024 — Array.fromAsync
const depois = await Array.fromAsync(numerosAsync());
// [1, 2, 3]
Em outras palavras, Array.fromAsync é útil em engenharia de agentes com fluxos assíncronos ou em qualquer cenário onde você precisa materializar um stream em array.
Boas práticas e armadilhas comuns
Em nono lugar, alguns cuidados específicos de JavaScript que pegam quase todo iniciante:
1. Array.isArray em vez de typeof. Por exemplo, typeof [] === 'object' (não ‘array’). Por isso, sempre use Array.isArray(valor) pra verificar.
2. sort() ordena como strings por padrão. Em outras palavras, [10, 2, 1].sort() retorna [1, 10, 2] — não [1, 2, 10]. Por isso, sempre passe comparador pra números: arr.sort((a, b) => a - b).
3. Sparse arrays (com “buracos”). Por exemplo, new Array(3) cria [empty × 3] — três buracos, não três undefined. Em compensação, map, filter, forEach pulam buracos; for...of os entrega como undefined. Para arquitetura sólida que evita esses gotchas, vale conhecer Clean Architecture na prática.
4. Performance: for ainda é o mais rápido. Por outro lado, em benchmarks modernos, for clássico é ~2x mais rápido que forEach, que é ~1.5x mais rápido que map em arrays grandes (10M+). Em compensação, em apps web normais (lista de 100-1000 itens), use o método mais legível — map/filter ganham.
5. Cuidado com referências em arrays de objetos. Em primeiro lugar, copiar com spread ([...arr]) ou slice() faz cópia rasa. Em segundo lugar, se o array contém objetos, alterar o objeto na cópia altera no original. Por isso, use structuredClone(arr) pra cópia profunda quando necessário.
Para aprofundar em JavaScript moderno, estes 2 livros são leitura canônica — toda equipe sênior em React e Node usa essas referências:
Conclusão
Em suma, manipular array em JavaScript em 2026 deixou de ser apenas map, filter e reduce. Por exemplo, o ES2024 trouxe métodos imutáveis (toSorted, toReversed, with) que substituem padrões verbosos com spread. Em outras palavras, código moderno fica mais curto e mais legível.
Por outro lado, lembre dos fundamentos. Em primeiro lugar, entenda quando um método muta e quando retorna cópia — esse é o conceito que separa código que funciona em React de código que quebra silenciosamente. Em segundo lugar, prefira métodos não-mutating sempre que possível. Em terceiro lugar, conheça Object.groupBy e Array.fromAsync — substituem receitas antigas por uma linha de código.
Para o próximo nível, vale combinar arrays JavaScript com tipagem TypeScript pra iniciantes e estudar princípios SOLID no React pra entender por que imutabilidade é tão crítica em componentes funcionais. Em seguida, leia a documentação oficial MDN sobre Array e a proposta TC39 change-array-by-copy que originou os métodos ES2024.
Publicidade
