Push an Object to an Array in Javascript with Examples

Array is a essential data structure in a programming language. It is used to store a collection of items in a single variable. In Javascript, we use an array to store strings, numbers, and even objects. And while working with arrays often it is necessary to push an object or objects in an array.

There are various ways to push an object in an array for example using push() method, concat() method, spread operator(...), and slice() method. With splice method we can push an object at a specific index in an array.

So in this article, we will go through each method with some examples.

Using push() method

We can use the push() method to push an object in an array in Javascript. This is the most simple way to add an object to the end of an array.

Here's an example to add an object to an array using push() :

const myArray = [];

const myObject = {
  name: "John",
  age: 30,
  city: "New York"
};

myArray.push(myObject);
console.log(myArray)

Output:

[ { name: 'John', age: 30, city: 'New York' } ]

In the above example, we have created an empty array i.e myArray . And then we created an object myObject with three property name, age, and city. Finally, we have pushed the myObject to the myArray using the push() method.

Using spread operator (...)

We can also use the spread operator (...) to push an object to an array. The spread operator is a new feature in ES6 that is used to spread elements of an array or an object.

We can use it with an array to add elements from one array to another. Here, we will use the spread operator to add an object to an array.

Example:

const myArray = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 }
];

const myObject = {
  name: "Peter",
  age: 40,
};

const newArray = [...myArray, myObject];

console.log(newArray)

Output:

[
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 },
  { name: 'Peter', age: 40 }
]

Here, in this example, we have created an array myArray with two objects. And then we have created an object myObject with two properties name and age. Next using the spread operator we have created a new array newArray by adding all the items of myArray and the myObject to it.

Note: The spread operator creates a new array and does not modify the original array.

Using concat() method

The concat() method is used to merge two or more arrays into a new array. We can also use concat() method to add new elements like an object to an array too. So, using this method we can easily push an object to an array in Javascript.

Here, is an example of adding an object to an array using the concat() method.

const myArray = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 }
];

const myObject = {
  name: "Peter",
  age: 40,
};

const newArray = myArray.concat(myObject);

console.log(newArray)

Output:

[
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 },
  { name: 'Peter', age: 40 }
]

Here, in this example, we have an array myArray with two objects. Next, we have created an object with two properties that we want to add to the myArray. And then we used the concat() method to create a new array newArray that contains all the elements of myArray and the myObject.

The concat() method creates a new array instead of modifying the original array. You can check that out by console logging both myArray and newArray.

console.log(newArray)
// output: [ { name: 'John', age: 30 }, { name: 'Jane', age: 25 },{ name: 'Peter', age: 40 } ]

console.log(myArray)
//output: [ { name: 'John', age: 30 }, { name: 'Jane', age: 25 } ]

Using splice() method to add an object at a specific index in an array.

Using the splice() method we can add/push an object at a specific index in an array in Javascript.

The splice() is used to add or remove items from an array. This method overwrites the original array.

Here is an example to push an object at the second position i.e index 1 of the given array.

const myArray = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 }
];

const myObject = {
  name: "Peter",
  age: 40,
};

myArray.splice(1,0,myObject)

console.log(myArray)

Output:

[
  { name: 'John', age: 30 },
  { name: 'Peter', age: 40 },
  { name: 'Jane', age: 25 }
]

In the above example, we have first created an array myArray with two objects. Next, we have created an object myObject that we want to push into the second position in the array.

And then using the splice() method we have added the myObject at the second index (index 1) in the myArray .

The splice() method takes in three parameters:

1. First parameter specifies the index where we want to add the item in the array.
2. Second parameter specifies the number of elements we want to remove (since in our example we are not removing any, we have set it to 0).
3. Third parameter specifies the element to add to the array.

Conclusion:

In this article, we have discussed different ways to push an object in an array in Javascript. We have covered the push method, spread operator, concat, and, splice() method with examples.

FAQs (Frequently Asked Questions)

How do I add an object to the beginning of an array in JavaScript?

To add an object to the beginning of an array, you have to use the unshift() method.

How do I remove an object from an array in JavaScript?

To remove an object from an array you have to use the splice() or the filter() method.

Can I push multiple objects to an array at once in JavaScript?

Yes, you can push multiple objects to an array at once. Here's an example:

const myArray = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 }
];

const myObj1 = {
  name: "Peter",
  age: 40,
};

const myObj2 = {
  name: "Mary",
  age: 35,
};

myArray.push(myObj1, myObj2);
console.log(myArray)

Output:

[
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 },
  { name: 'Peter', age: 40 },
  { name: 'Mary', age: 35 }
]