Como adicionar um elemento a um array em JavaScript: 5 maneiras com exemplos

Treinador Online de Python para Iniciantes

Aprenda Python facilmente sem sobrecarga teórica. Resolva tarefas práticas com verificação automática e escreva código diretamente no navegador.

Start Course

Como adicionar um elemento a um array em JavaScript? Análise completa com exemplos

\n\n

Você está escrevendo código em JavaScript e de repente surge a pergunta: "Como adicionar um novo elemento ao final do array? E no início? E talvez no meio?". Se você já pesquisou "How to append something to an array?" — você não está sozinho. Esta pergunta no Stack Overflow acumulou milhares de visualizações, e hoje vamos resolvê-la de uma vez por todas.

\n\n

Arrays são a base do trabalho com dados em JS. Saber como adicionar elementos de forma rápida e correta economizará horas de depuração e tornará seu código mais limpo. Neste tutorial, mostrarei 5 maneiras de adicionar um elemento a um array, desde o clássico push() até o moderno operador spread. Vamos lá!

\n\n

1. Método push(): adicionando ao final do array

\n\n

A maneira mais popular. push() adiciona um ou mais elementos ao final do array e retorna o novo comprimento.

\n\n

const fruits = ['maçã', 'banana'];\nconst newLength = fruits.push('laranja');\n\nconsole.log(fruits);    // ['maçã', 'banana', 'laranja']\nconsole.log(newLength); // 3\n

\n\n

Você pode adicionar vários elementos de uma vez:

\n\n

fruits.push('pera', 'uva');\nconsole.log(fruits);\n// ['maçã', 'banana', 'laranja', 'pera', 'uva']\n

\n\n

Quando usar: quando você precisa adicionar dados ao final de uma lista — por exemplo, um novo produto no carrinho, uma mensagem no chat, uma entrada no log. O método é rápido (O(1)) e modifica o array original.

\n\n

2. Método unshift(): adicionando ao início do array

\n\n

Se precisar inserir um elemento no início, use unshift(). Ele desloca todos os elementos existentes para a direita.

\n\n

const numbers = [2, 3, 4];\nnumbers.unshift(1);\n\nconsole.log(numbers); // [1, 2, 3, 4]\n

\n\n

Funciona também com vários elementos:

\n\n

numbers.unshift(-1, 0);\nconsole.log(numbers); // [-1, 0, 1, 2, 3, 4]\n

\n\n

Importante: unshift() é mais lento que push() para arrays grandes, porque precisa deslocar todos os elementos. Se o array contiver 100.000 elementos — é melhor considerar outra estrutura de dados (por exemplo, fila com deque).

\n\n

3. Método splice(): inserindo em qualquer posição

\n\n

O canivete suíço. splice() pode remover, substituir e, claro, adicionar elementos em qualquer posição do array.

\n\n

Sintaxe: array.splice(start, deleteCount, item1, item2, ...)

\n\n

start — índice a partir do qual começamos
deleteCount — quantos elementos remover (defina 0 se for apenas adicionar)
item1, item2, ... — elementos para inserir

\n\n

Exemplo: inserir "cereja" na segunda posição (índice 1):

\n\n

const colors = ['vermelho', 'azul', 'verde'];\ncolors.splice(1, 0, 'cereja');\n\nconsole.log(colors);\n// ['vermelho', 'cereja', 'azul', 'verde']\n

\n\n

Você pode inserir vários elementos de uma vez:

\n\n

const letters = ['a', 'd'];\nletters.splice(1, 0, 'b', 'c');\n\nconsole.log(letters); // ['a', 'b', 'c', 'd']\n

\n\n

Quando usar: quando você precisa inserir um elemento exatamente no meio do array — por exemplo, adicionar um novo item de menu entre os existentes. Lembre-se: splice() modifica o array.

\n\n

4. Método concat(): criando um novo array

\n\n

Ao contrário dos métodos anteriores, concat() não altera o array original, mas retorna um novo, combinando dois ou mais arrays (ou elementos).

\n\n

const arr1 = [1, 2, 3];\nconst arr2 = [4, 5];\nconst result = arr1.concat(arr2);\n\nconsole.log(result); // [1, 2, 3, 4, 5]\nconsole.log(arr1);   // [1, 2, 3] — não foi alterado\n

\n\n

Você pode adicionar não apenas arrays, mas também valores individuais:

\n\n