Métodos de Array em JavaScript

Introdução

Os arrays são uma das estruturas de dados mais utilizadas em JavaScript, e boa parte do seu poder vem dos seus métodos embutidos — funções que você chama em um array para adicionar, remover, buscar, transformar ou reordenar seus elementos. Este guia aborda os métodos que você usa no dia a dia, explica a importantíssima diferença entre métodos que mutam o array original e aqueles que retornam um novo array, e mostra cada um com um exemplo executável.

Se você é novo em arrays, comece pelo capítulo JavaScript Array e depois volte aqui.

Entendendo Arrays em JavaScript

Um array armazena uma lista ordenada de valores em uma única variável. Os valores podem ser de qualquer um dos tipos de dados do JavaScript — números, strings, objects, até outros arrays — e você não precisa definir o tamanho antecipadamente.

Criando um Array

A forma mais simples de criar um array é com a sintaxe literal de colchetes:

let fruits = ["Apple", "Banana", "Cherry"];

Isso cria um array chamado fruits com três elementos do tipo string.

Acessando Elementos do Array

Os elementos são acessados pelo seu índice, uma posição baseada em zero contando a partir do início do array:

A propriedade length indica quantos elementos existem, e at() aceita índices negativos, então at(-1) sempre retorna o último elemento.

Métodos que Mutam vs. Métodos que Não Mutam

Antes de ver os métodos individualmente, entenda essa distinção — ela explica a maioria dos bugs com arrays:

• Métodos que mutam alteram o array no lugar. push, pop, shift, unshift, splice, sort, reverse e fill modificam o array sobre o qual são chamados.
• Métodos que não mutam deixam o original intacto e retornam um novo array ou valor. map, filter, slice, concat, reduce, find e os mais recentes toSorted/toSpliced/toReversed pertencem a este grupo.

Quando você compartilha um array entre funções ou o armazena em estado (por exemplo, em um componente React), prefira métodos que não mutam para evitar alterar acidentalmente dados que alguém mais está usando.

Métodos Principais de Array

Adicionando e Removendo Elementos

push()

push() acrescenta um ou mais elementos ao final do array e retorna o novo comprimento.

unshift()

unshift() insere elementos no início do array.

pop()

pop() remove o último elemento e o retorna. Junto com push(), permite que um array funcione como uma pilha (último a entrar, primeiro a sair).

shift()

shift() remove o primeiro elemento e o retorna. Note que shift e unshift são mais lentos do que push/pop porque todos os elementos restantes precisam ser reindexados.

Encontrando Elementos

indexOf()

indexOf() retorna o primeiro índice de um valor, ou -1 caso o valor não seja encontrado. Usa igualdade estrita, portanto não consegue encontrar objects pelo seu conteúdo.

includes()

includes() responde a uma pergunta mais simples de sim/não: este valor está no array? É mais claro do que indexOf(x) !== -1 e, ao contrário de indexOf, consegue encontrar NaN.

find() e findIndex()

Quando você precisa localizar um elemento por uma condição em vez de um valor exato, use find() (retorna o elemento) ou findIndex() (retorna seu índice). Ambos param na primeira correspondência.

some() e every()

some() retorna true se pelo menos um elemento passa no teste; every() retorna true somente se todos eles passarem.

Iterando e Transformando

Esses métodos recebem uma função de callback e são o coração do JavaScript moderno e declarativo. Eles se combinam naturalmente com os padrões do capítulo JavaScript Loops.

forEach()

forEach() executa uma função uma vez por elemento. Sempre retorna undefined, portanto use-o para efeitos colaterais (como registro em log), não para construir um novo valor.

map()

map() cria um novo array transformando cada elemento. O novo array sempre tem o mesmo comprimento que o original.

filter()

filter() cria um novo array contendo apenas os elementos para os quais o callback retorna um valor verdadeiro.

reduce()

reduce() reduz um array a um único valor aplicando repetidamente uma função. O callback recebe um acumulador e o elemento atual; o segundo argumento de reduce é o valor inicial do acumulador.

Você pode encadear esses transformadores: map primeiro, depois filter, depois reduce, com cada etapa produzindo a entrada para a próxima.

Reordenando e Fatiando

sort()

sort() ordena no lugar. Por padrão, compara os elementos como strings, o que gera resultados surpreendentes para números — 10 fica antes de 2 porque "10" vem antes de "2" alfabeticamente. Sempre passe uma função de comparação ao ordenar números.

reverse()

reverse() inverte a ordem dos elementos no lugar.

slice()

slice(start, end) retorna uma cópia rasa de uma parte do array. O índice end não é incluído, e o original permanece intacto — tornando slice() uma forma prática de copiar um array.

splice()

splice(start, deleteCount, ...items) é o editor de uso geral no lugar: pode remover, substituir e inserir. Aqui ele insere "Grape" no índice 2 sem deletar nada (deleteCount é 0).

concat()

concat() mescla arrays em um novo array sem alterar os originais. A sintaxe de spread ([...a, ...b]) faz a mesma coisa — veja Parâmetros rest e sintaxe spread.

fill()

fill(value, start, end) substitui um intervalo de elementos por um valor estático, no lugar.

Métodos Imutáveis (de Cópia)

Introduzidos no ES2023, esses métodos fazem exatamente o que sort, splice e reverse fazem — mas retornam um novo array e deixam o original intacto. São ideais para estados que você não deve mutar.

toSorted()

toSpliced()

Conclusão

Dominar os métodos de array em JavaScript é uma das habilidades de maior impacto na linguagem: map, filter e reduce substituem a maioria dos loops manuais, e saber quais métodos mutam versus quais copiam evita toda uma categoria de bugs. Continue praticando com os exemplos executáveis acima, e explore tópicos relacionados como os fundamentos do JavaScript Array e a sintaxe spread.

Prática