Como adicionar um objeto em um array em JavaScript

Neste artigo você vai aprender a como adicionar um objeto em um array na linguagem JavaScript, utilizando uma simples função

Como adicionar um objeto em um array capa

Fala programador(a), beleza? Bora aprender mais sobre arrays e objetos!

Basicamente todo tipo de dado pode ser adicionado a um array utilizando a função push

Push é um método de arrays, ou seja, invocamos diretamente neste dado

Como argumento passamos o que queremos incluir no array, que pode ser até mais que um item

Veja um exemplo prático:

const obj = {name: "Matheus"}

const myArray = []

myArray.push(obj)

console.log(myArray) 

/* [{
  name: "Matheus"
}] */
Formação Vibe Coding
Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

  • 474 aulas
  • 20 projetos
  • 39h 27min

Observe que temos um array e um objeto iniciados nas primeiras linhas de código

Depois utilizamos a função push no array, e adicionamos como parâmetro nossa variável que contém um objeto

E assim temos um array com um objeto inserido!

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

No artigo de hoje vimos como adicionar um objeto em um array

O método push pode adicionar qualquer dado em uma lista, inclusive objetos

Então basta aplicar o objeto como parâmetro de push, e executar o método em um array

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

Como adicionar um item no início do array com unshift:

O push sempre joga o novo item pro final da lista

Mas e quando você quer o objeto lá no começo? Aí entra o unshift

Ele funciona igualzinho ao push, tu invoca direto no array e passa o que quer incluir como argumento

Veja na prática:

const obj = {name: "Matheus"}

const myArray = [{name: "João"}]

myArray.unshift(obj)

console.log(myArray)

/ [{name: "Matheus"}, {name: "João"}] /

Repare que o objeto novo foi parar na primeira posição, empurrando o resto pra frente

Como adicionar um item em uma posição específica com splice:

Às vezes você não quer nem o começo nem o fim, quer no meio, numa posição exata

Pra isso o método certo é o splice

Ele recebe três coisas: o índice onde vai inserir, quantos itens remover (zero se você só quer adicionar) e o item novo

Bora ver:

const myArray = [{name: "João"}, {name: "Ana"}]

const obj = {name: "Matheus"}

myArray.splice(1, 0, obj)

console.log(myArray)

/ [{name: "João"}, {name: "Matheus"}, {name: "Ana"}] /

O 1 é a posição, o 0 diz pra não remover nada, e o obj é o que entra bem ali no meio

Adicionando um item com o operador spread:

Tem também um jeito mais moderno, sem mexer no array original

O operador spread (aqueles três pontinhos) copia o array antigo e já monta um novo com o item extra

E o que significa não mexer no original? Que o array de antes fica intacto, você gera outro

Olha só:

const myArray = [{name: "João"}]

const obj = {name: "Matheus"}

console.log(novoArray)

/ [{name: "João"}, {name: "Matheus"}] /

Massa pra quem trabalha com dados imutáveis, tipo em React

Perguntas frequentes sobre adicionar itens em arrays no JavaScript:

Qual a diferença entre push e unshift?

O push adiciona no final do array e o unshift adiciona no começo

Os dois recebem o item como argumento e alteram o array original

Como adicionar mais de um item de uma vez?

�both push e unshift aceitam vários argumentos separados por vírgula

Exemplo: myArray.push(obj1, obj2, obj3) joga os três no final de uma vez

push ou spread, qual usar?

Depende: se você pode alterar o array original, o push é mais direto

Se precisa manter o original intacto e gerar um novo, o spread é o caminho

Leia também

Subscribe
Notify of
guest

0 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments

Formações

Formação SAAS com IA

Formação SAAS com IA

Tire usas ideias do papel criando softwares com IA, integre pagamentos e lance seu projeto!

  • 291 aulas
  • 18 projetos
  • 24h 17min

Blog | Mais populares