Como adicionar novos elementos ao início do array em JavaScript

Neste artigo você vai aprender a adicionar novos elementos ao início do array em JavaScript, utilizando uma função nativa da linguagem

Fala programador(a), beleza? Bora aprender mais sobre arrays e também JavaScript!

Com o método de arrays push, podemos adicionar um elemento ao fim do array

E então temos um equivalente, porém para adição no início do array

O nome deste método é unshift

Veja um exemplo prático de sua utilização:

var arr = [10, 20, 30];

arr.unshift(1);

console.log(arr); // [1, 10, 20, 30]; 

No código acima criamos uma variável arr e adicionamos um array nela

Depois utilizamos o método unshift, para adicionar o elemento 1 na primeira posição

Note que este é o único argumento que devemos passar para a função unshift, o elemento que vai ser adicionado

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 116 aulas
• 4 projetos
• 9h 23min

Conhecer formação

E então imprimimos o array completo, já com o novo elemento adicionado

Assim aprendemos a adicionar um elemento na primeira posição de um array!

É de extrema importância conhecer os métodos de array de qualquer linguagem que você programe, eles vão poupar muito tempo ao manusear listas de valores, o tipo de dados mais conhecido como: array

Conclusão

Neste artigo você aprendeu a como adicionar novos elementos ao início do array, utilizando JavaScript

Nós escolhemos o método unshift para resolver o problema, que possui exatamente a funcionalidade que precisamos

Ele adiciona um elemento antes de todos os outros de um determinado array, ou seja, na primeira posição

É importante lembrar que apenas precisamos passar um argumento para o método, que é o elemento que precisamos adicionar no array

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

E se eu quiser adicionar vários elementos de uma vez?

O unshift não te obriga a passar só um argumento, viu?

Tu pode mandar quantos elementos quiser, separados por vírgula

arr.unshift(1, 2, 3)

Repare numa coisa importante: os elementos entram na MESMA ordem em que você escreveu

Não é um por um empurrando o anterior, é o bloco inteiro indo pro começo de uma vez 🙂

É o mesmo comportamento do push, só que do lado contrário do array

O que o unshift retorna?

Aqui mora uma pegadinha clássica, e eu já me ferrei com ela

O unshift NÃO devolve o array novo, ele devolve o novo tamanho do array

const resultado = arr.unshift(1)

console.log(resultado) // 4

Ou seja: se você escrever const novoArr = arr.unshift(1) esperando um array, vai receber um número e o código quebra na linha seguinte

Tome cuidado com isso!

O array atualizado tá na própria variável original, não no retorno

Atenção: o unshift altera o array original

Essa é a parte que envelheceu no jeito de escrever JavaScript e quase ninguém avisa

O unshift é um método MUTÁVEL, ele mexe no array que já existe em vez de criar um novo

No dia a dia isso é ótimo, é rápido e direto

Porém, se você tá trabalhando com estado em React, Vue e afins, mutar o array original costuma ser justamente o que você NÃO quer, porque a interface pode simplesmente não perceber que algo mudou

A versão que não mexe no original usa o spread

Repare que aqui o arr continua intacto, e o resultado vem no retorno, não na variável antiga

Dá pra chegar no mesmo lugar com concat também

Qual usar? Se você só quer atualizar uma lista solta no seu script, unshift resolve

Se o array é estado de componente, vai de spread e durma tranquilo =)

E o var do exemplo, ainda vale?

O exemplo lá de cima usa var, e funciona perfeitamente

Mas hoje o padrão é declarar com const (ou let, quando você precisa reatribuir)

Aí vem a dúvida que todo mundo tem: se o array é const, eu consigo adicionar item nele?

Consigo sim!

arr.unshift(1)

O const trava a REATRIBUIÇÃO da variável, não o conteúdo do array

É um detalhe pequeno que confunde muita gente no começo 😀

E se eu quiser adicionar no meio do array?

Já que você chegou até aqui, vale fechar o combo

Pra colocar um elemento numa posição específica, o método é o splice

arr.splice(1, 0, 15)

Traduzindo os argumentos: o primeiro é a posição onde vai entrar, o segundo é quantos itens você quer REMOVER a partir dali (zero, no nosso caso) e do terceiro em diante vão os elementos a inserir

Então o resumo do trio fica assim:

push pro fim, unshift pro começo, splice pra qualquer posição no meio

Com esses três você resolve praticamente qualquer inserção em array no JavaScript 🙂