JavaScript Push Object to Array (5 Simple Methods)

Do you want to know how can you use JavaScript to push an object to an array?

With JavaScript methods like push(), concat(), splice(), unshift(), and the spread operator, you can easily add objects to an array without having to create a custom function from scratch.

In JavaScript, there are several ways to add a new object to an array. In this blog post, I’ll explain the five simplest methods you can use to achieve this.

The five methods I’ve mentioned can be used in different ways. You can add a new object to an empty array or push an object into an existing array effortlessly.

Method 1: Using push() method (Recommended)

If you’re looking for a simple and beginner-friendly solution, JavaScript’s push() method is perfect because it allows you to add elements without writing long lines of code.

Apply the method to the array variable where you want to add the object, and then include the object variable within the method.

Save the console.log statement to view the output.

Example: Adding an Object to an Array

let myArray = [];

let newObject = { id: 1, name: "Yasmin" };

myArray.push(newObject);

console.log(myArray);

//output
[ { id: 1, name: "Yasmin" } ]

Also See: Javascript Show/Hide Div onClick [Guide with Code]

Method 2: Using concat() (Immutable)

If you prefer not to use Method 1, where I demonstrated how to add an object to an array using the push() method in JavaScript, you can instead use the concat() method.

The concat() the method works similarly to push(), but you need to use it differently.

Here is an example:

let myArray = [{ id: 1, name: "Yasmin" }];
let newObject = { id: 2, name: "Faruk" };

myArray = myArray.concat(newObject);

console.log(myArray);

//Output
[ { id: 1, name: "Yasmin" }, { id: 2, name: "Faruk" } ]

Creates a new array with the added object without modifying the original array by using the concat() method.

Now, apply the concat() method to the first array variable and include the new object variable you want to add.

Method 3: Using the Spread Operator … (Preferred for Immutability)

If you prefer modern JavaScript features, you can use the spread operator to add an object to an array.

Using the spread operator helps keep your code clean, simple, and easy to understand.

The best part is that you only need a few lines of code. Here’s an example of how you can use it in your code.

let myArray = [{ id: 1, name: "Yasmin" }];
let newObject = { id: 2, name: "Faruk" };

myArray = [...myArray, newObject];

console.log(myArray);

//Output
[
  { id: 1, name: "Yasmin" },
  { id: 2, name: "Faruk" }
]

Method 4: Using splice() (Insert at a Specific Index)

If you need to add an object at a specific index, like the beginning of the array, the splice() method is an excellent choice.

This method is perfect when working with multiple objects in an array and needing to insert an object at a specific position.

Here’s an example of how you can do it:

let myArray = [{ id: 1, name: "Yasmin" }];
let newObject = { id: 2, name: "Faruk" };

myArray.splice(myArray.length, 0, newObject); // Inserts at the end

console.log(myArray);

//Output
[
  { id: 1, name: "Yasmin" },
  { id: 2, name: "Faruk" }
]

To use the splice() method, first, attach it to the array where you want to insert the object.

In the splice() method, you need to provide three parameters: startIndex (the position to insert/remove), deleteCount (the number of items to remove), and item (the new element to add).

startIndex: The position in the array where elements will be inserted or removed.
deleteCount: The number of elements to delete (set to 0 avoid deletion).
item1, item2, ...: The new elements to insert.

Method 5: Using unshift() (Add to the Beginning)

The unshift() method is perfect when you need to add a new object at the beginning of the array.

The unshift() method works similarly to the push() method, but instead of adding the object at the end of the array, it inserts it at the beginning.

Here’s a great example of how to use the unshift() method.

let myArray = [{ id: 1, name: "Yasmin" }];
let newObject = { id: 2, name: "Faruk" };

myArray.unshift(newObject);

console.log(myArray);

//Output
[
  { id: 2, name: "Faruk" },
  { id: 1, name: "Yasmin" }
]

Conclusion

Adding an object to an array in JavaScript is simple if you’re familiar with the right methods. You can use push(), concat(), splice(), unshift(), or the spread operator to achieve this.

If you know a better solution, feel free to share it in the comments, and I’d be happy to update this blog post with your suggestions.

If you found this blog post helpful, you might also be interested in learning How to Disable Inspect Element on a Website? (4 Simple Methods) or How to Validate a Form in JavaScript Before Submission? [Simple Steps].

For amazing web development tutorial videos, I highly recommend subscribing to the SingleSyntax YouTube channel and following our X.com account.

On this page