Descubra como manipular arrays em JavaScript com este guia completo. Aprenda a usar métodos como push, filter, map e muito mais para transformar dados de forma eficiente.
Tempo de Leitura: 7 minutos
Uma das estruturas de dados mais utilizadas nas linguagens de programação, as matrizes e vetores, também chamados de arrays no JavaScript, permitem a organização e manipulação dos dados das mais variadas formas. Essa linguagem, que continua entre as mais promissoras e em alta para 2025, segundo nossa análise sobre linguagens de programação para o futuro, oferece inúmeras ferramentas para desenvolvedores manipularem dados de forma eficiente.
Neste guia definitivo, você entenderá como é possível trabalhar com dados em arrays no JavaScript, transformar os valores armazenados, buscar por elementos, além de explorar outros recursos disponíveis especificamente para essa estrutura de dados.
O que é um array em JavaScript?
Segunda a documentação do JavaScript, disponibilizado pela MDN, “O objeto Array, assim como matrizes em outras linguagens de programação, permite armazenar uma coleção de vários itens sob um único nome de variável e tem membros para executar operações comuns de matriz”.
É válido ressaltar que no JavaScript o array não é um tipo de dado primitivo, e sim um objeto que possui algumas características:
- São redimensionáveis, ou seja, a quantidade de itens, linhas e colunas podem variar;
- Seus elementos são acessados por índices numéricos inteiros, iniciados em zero;
- Podem conter elementos de diferentes tipos.
Uma das formas de iniciarmos um array, e a mais utilizada delas, é por meio de colchetes, seja vazio ou já com valores, das seguintes maneiras, respectivamente:
const primeiroArray = []; // array vazio
const segundoArray = ["1", "2"]; // array com valores
Assim, temos o array criado e podemos começar a inserir elementos e modificá-los, como veremos a seguir.
Manipulação de elementos no Array
Os arrays em JavaScript oferecem uma ampla gama de métodos para adicionar, remover e reorganizar elementos. Esses métodos são indispensáveis para lidar com listas dinâmicas, seja para gerenciar itens em um carrinho de compras ou manipular dados recebidos de APIs. Vamos explorar as principais opções disponíveis.
Push: Como adicionar elementos no final do array
O método push é utilizado para inserir valores em um array já previamente criado. O elemento inserido será adicionado no final do array, e o método retorna a quantidade de elementos existentes após a inserção.
const produtos = ["celular"];
produtos.push("TV", "rádio");
const quantidade = produtos.push("computador");
console.log(produtos); // ["celular", "TV", “rádio”, "computador"]
console.log(quantidade); // 4
Nesse exemplo, iniciamos o array com um elemento, e inserimos mais dois valores, modificando o comprimento do array.
Unshift: Inserir elemento no início do array
O método unshift funciona de maneira similar ao método push, mas ao invés de inserir elementos no final do array, adiciona valores em seu início, como no exemplo abaixo.
const produtos = ["celular"];
produtos.unshift("TV", "rádio");
const quantidade = produtos.unshift("computador");
console.log(produtos); // [“computador”, “TV”, “rádio”, "celular"]
console.log(quantidade); // 4
O método também retorna a quantidade de elementos presentes no array após a inserção dos valores.
Pop: Remover elemento do final do array
O método pop é utilizado para remover o elemento final de um array e retorna o valor removido, que pode ser utilizado, se necessário.
const produtos = ["celular", "TV", "rádio", "computador"];
const produtoRemovido = produtos.pop();
console.log(produtos); // ["celular", "TV", "rádio"]
console.log(produtoRemovido); // "computador"
Shift: Remover elemento do início do array
O método shift, parecido com o método pop, também remove um elemento do array, mas do seu início:
const produtos = ["celular", "TV", "rádio", "computador"];
const produtoRemovido = produtos.shift();
console.log(produtos); // ["TV", "rádio", "computador"]
console.log(produtoRemovido); // "celular"
Com ele, também é possível recuperar o valor do elemento removido para uma possível utilização, quando necessário.
Transformação e combinação com arrays
Uma das grandes vantagens dos arrays em JavaScript é a capacidade de transformar os dados contidos neles de forma simples e eficiente. Seja para modificar elementos individuais ou combinar múltiplos arrays, os métodos desta seção oferecem flexibilidade e poder na manipulação de dados.
Concat: Unir elementos de arrays
O método concat é utilizado para unir valores de dois arrays diferentes em um novo array, de forma que a nova matriz contenha os elementos dos dois arrays unificados, como no exemplo abaixo:
const produtos1 = ["celular", "TV"];
const produtos2 = ["rádio", "computador"];
const produtos3 = produtos1.concat(produtos2)
console.log(produtos3); // ["celular", "TV", "rádio", "computador"]
É válido ressaltar que esse método não modifica os arrays iniciais, mas cria um novo array com valores iguais.
Map: Transformação de elementos do array
O método map é utilizado quando existe a necessidade de transformar cada um dos itens de um array. Ao ser executado, passará por cada um dos elementos e criará um novo array com os itens transformados conforme a necessidade.
const produtos = ["celular", "TV", "rádio", "computador"];
const produtosMaiusculos = produtos.map((produto) => produto.toUpperCase());
console.log(produtosMaiusculos);
// ["CELULAR", "TV", "RÁDIO", "COMPUTADOR"]
No exemplo acima, transformamos cada uma das palavras do array para letras maiúsculas, ao executar uma função que realiza o toUpperCase para todos os itens.
Join: Unir elementos do array
O método join é utilizado para unir elementos do array e retornar uma string com os valores unidos.
const produtos = ["celular", "TV", "rádio", "computador"];
console.log(produtos.join("-"));
// "celular-TV-rádio-computador"
No exemplo assim, unimos os produtos em uma única string, utilizando o sinal “-” como separador.
Reverse: Inverter a ordem dos elementos do array
O método reverse é utilizado para poder inverter os valores de um array, fazendo com que o array original seja modificado e os itens sejam realocados em novos índices.
const produtos = ["celular", "TV", "rádio", "computador"];
produtos.reverse();
console.log(produtos);
// ["computador", "rádio", "TV", "celular"]
No exemplo acima, foi realizada a inversão do array de produtos e o “computador” se tornou o primeiro elemento e o “celular” foi movido para o final, assim como também foram modificadas as posições dos demais valores.
Busca e filtros em JavaScript
Legenda: Os arrays são excelentes estruturas de dados para se armazenar elementos. | Imagem: Freepik
Encontrar informações específicas em um array é uma tarefa comum no desenvolvimento com arrays em JavaScript. Nesta seção, vamos explorar métodos que ajudam a localizar, filtrar e identificar elementos com base em critérios definidos, facilitando o processamento e análise dos dados.
Includes: Verificar existência e elemento no array
O método includes é utilizado quando há a necessidade de verificar se o array inclui um determinado valor.
const produtos = ["celular", "TV", "rádio", "computador"];
console.log(produtos.includes("celular")); // true
console.log(produtos.includes("relógio")); // false
Caso o array inclua o valor esperado, o método retorna o valor booleano true. Já se o valor não existir no array, o método retorna o valor booleano false, como acima.
Verificar a existência de elementos em arrays ajuda a evitar erros inesperados em aplicações JavaScript. Quer aprender mais sobre os tipos de erros que podem ocorrer na linguagem e como evitá-los? Confira as discussões no fórum sobre tipos de erros no JavaScript.
Filter: Filtrar elementos do array
O método filter é utilizado, como o próprio nome já diz, para filtrar os elementos de um array, com base em um critério estabelecido.
Por exemplo, vamos imaginar uma lista de produtos e a condição definida é filtrar os produtos que comecem com a letra “c”.
const produtos = ["celular", "TV", "rádio", "computador"];
const produtosFiltrados = produtos.filter(produto => produto.startsWith("c"));
console.log(produtosFiltrados); // ["celular", "TV", "rádio", "computador"];
Assim, o filter percorrerá todos os elementos do array e, aqueles que se enquadrarem no critério estabelecido serão adicionados em um novo array, sem que o array a ser filtrado seja modificado.
Filtrar e buscar dados em arrays é essencial em muitos contextos, como na validação de resultados em testes automatizados. Quer aprender como aplicar testes automatizados no seu código JavaScript? Confira nosso guia completo sobre testes de software automatizados com JavaScript.
Find: Encontrar primeira ocorrência no array
O método find é utilizado quando existe a necessidade de encontrar a primeira ocorrência de um valor em um array que atenda um critério.
const produtos = ["celular", "TV", "rádio", "computador"];
const produtoFiltrado = produtos.find(produto => produto.startsWith("c"));
console.log(produtoFiltrado); // "celular"
No exemplo acima, buscamos na lista de produtos o primeiro elemento que inicia com a letra “c”, e o valor encontrado é retornado e armazenado em uma variável para ser utilizado.
FindIndex: Encontrar índice da primeira ocorrência no array
O método findIndex é muito parecido com o método find, mas, nesse caso, é retornado o índice do valor do primeiro elemento encontrado no array que satisfaz uma condição, e não o valor do elemento em si.
const produtos = ["celular", "TV", "rádio", "computador"];
const indexProdutoFiltrado = produtos.findIndex(produto => produto.startsWith("c"));
console.log(indexProdutoFiltrado); // 0
Nesse exemplo, ao buscarmos pelo índice do primeiro elemento que inicia com a letra “c”, descobrimos que o valor está na primeira posição do array, que se inicia em zero.
FindLast: Encontrar última ocorrência no array
O método findLast, assim como o método find, também retorna o valor de um elemento do array que satisfaça um critério, mas nesse caso o do último elemento.
const produtos = ["celular", "TV", "rádio", "computador"];
const produtoFiltrado = produtos.findLast(produto => produto.startsWith("c"));
console.log(produtoFiltrado); // "computador"
Aqui, conseguimos descobrir o último elemento do array que se inicia com a letra “c”, que no caso é o “computador”.
FindLastIndex: Encontrar índice da última ocorrência no array
O método findLastIndex, assim como o método findLast, também encontra a última ocorrência de um elemento no array que atenda a um critério, mas no caso, ao invés de retornar o valor do elemento, retorna o seu índice.
const produtos = ["celular", "TV", "rádio", "computador"];
const indexProdutoFiltrado = produtos.findLastIndex(produto => produto.startsWith("c"));
console.log(indexProdutoFiltrado); // 3
Assim, ao filtramos pelo índice do último elemento que que inicia com a letra “c”, descobrimos que ele está na posição 3 do array de produtos.
Iteração no array
Iterar sobre os elementos de um array é fundamental para muitas operações no dia a dia de um desenvolvedor. Com os métodos iterativos oferecidos pelos arrays em JavaScript, é possível percorrer cada item e aplicar lógica personalizada de maneira simples e eficiente.
ForEach: Iteração para cada elemento do array
O método forEach funciona como um laço de repetição, que passa por cada um dos elementos presentes em um array. Ele recebe uma função que será executada utilizando os valores do array.
const produtos = ["celular", "TV", "rádio", "computador"];
produtos.forEach((produto) => console.log(produto));
// "celular"
// "TV"
// "rádio"
// “computador”
Assim, conseguimos acessar e utilizar cada um dos elementos do array para o que for necessário, sem alterar o array original.
Com a ampla gama de métodos disponíveis para manipulação de arrays, a produtividade do desenvolvedor pode ser significativamente aumentada. Para explorar mais ferramentas que otimizam o trabalho com JavaScript, leia nosso artigo sobre ferramentas de produtividade para JavaScript.
Conclusão
A quantidade de métodos de arrays não para por aqui, já que existem diversas outras possibilidades nativas para se manipular os valores e outros recursos do JavaScript que permitem a utilização de arrays, disponíveis na documentação.
Aqui, entendemos como verificar, inserir e remover elementos de array, verificar se um valor está presente no array, descobrir qual a posição de um item no array e até mesmo modificar cada um dos valores de um array.
Assim, compreendemos que os arrays são excelentes estruturas de dados para se armazenar elementos, visto que permite a manipulação dos seus dados das mais variadas formas e dá ao desenvolvedor de software um grande rol de possibilidades, com os seus mais variados métodos.
Quer trocar dúvidas e experiências sobre arrays em JavaScript? Participe do nosso fórum e conecte-se com outros desenvolvedores para aprender ainda mais
