Skip to main content

How to Push an Object to an Array in JavaScript

Adding objects to an array is one of the most fundamental operations in JavaScript. Whether you're building a list of items, managing state, or collecting data, you will frequently need to add new objects to an existing array.

This guide will cover the three main scenarios for adding objects to an array: adding to the end, adding to the beginning, and inserting at a specific index. We will focus on the modern, idiomatic methods for each case.

Adding to the End of an Array (Most Common)​

This is the most frequent requirement. You have a list and need to append a new object.

Using Array.prototype.push() (Mutating)​

The push() method is the classic and most direct way to add one or more elements to the end of an array. This method mutates (modifies) the original array.

Solution:

let users = [
  { id: 1, name: 'Alice' }
];
let newUser = { id: 2, name: 'Bob' };

// Add a single object to the end of the array.
users.push(newUser);

console.log(users);
// Output: [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' } ]

// You can also push multiple objects at once.
let moreUsers = [{ id: 3, name: 'Charlie' }, { id: 4, name: 'David' }];
users.push(...moreUsers); // Spreading an array into push() also works

console.log(users.length); 
// Output: 4

Using Spread Syntax (...) (Non-mutating)​

If you prefer to work with immutable data (a best practice in frameworks like React), you can use the spread syntax (...) to create a new array with the new object added.

Solution:

let users = [
  { id: 1, name: 'Alice' }
];
let newUser = { id: 2, name: 'Bob' };

// Create a new array with the old elements and the new one.
users = [...users, newUser];

console.log(users);
// Output: [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' } ]
note

This approach does not modify the original array; instead, it creates a new one and reassigns the users variable to point to it. This is why users must be declared with let instead of const.

Adding to the Beginning of an Array​

Sometimes you need to prepend an object to the start of a list.

Using Array.prototype.unshift() (Mutating)​

The unshift() method is the counterpart to push(). It adds one or more elements to the beginning of an array, modifying the original array in place.

Solution:

let users = [
  { id: 2, name: 'Bob' }
];
let newUser = { id: 1, name: 'Alice' };

// Add an object to the beginning of the array.
users.unshift(newUser);

console.log(users);
// Output: [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' } ]

Using Spread Syntax (...) (Non-mutating)​

You can also use the spread syntax to create a new array with the new element at the beginning.

Solution:

let users = [
  { id: 2, name: 'Bob' }
];
let newUser = { id: 1, name: 'Alice' };

// Create a new array with the new object first.
users = [newUser, ...users];

console.log(users);
// Output: [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' } ]

Inserting at a Specific Index​

For more complex cases, you might need to insert an object into the middle of an array. The splice() method is the standard tool for this.

Using Array.prototype.splice() (Mutating)​

The splice() method is a powerful tool that can add, remove, or replace elements at any position in an array. It modifies the array in place.

array.splice(startIndex, deleteCount, item1, item2, ...)
  • startIndex: The index at which to start changing the array.
  • deleteCount: The number of elements to remove. To insert an item, you set this to 0.
  • item1, ...: The new elements to add to the array.

Let's insert a new user at index 1.

let users = [
  { id: 1, name: 'Alice' },
  { id: 3, name: 'Charlie' }
];
let newUser = { id: 2, name: 'Bob' };

// At index 1, delete 0 items, and insert newUser.
users.splice(1, 0, newUser);

console.log(users);

Output:

[
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
]

Conclusion​

Adding objects to arrays is a fundamental JavaScript operation with clear, modern solutions for every scenario.

  • To add to the end (append), the array.push(obj) method is the most direct approach. Use spread syntax ([...array, obj]) for an immutable alternative.
  • To add to the beginning (prepend), use the array.unshift(obj) method. Use spread syntax ([obj, ...array]) for an immutable alternative.
  • To insert at a specific index, the array.splice(index, 0, obj) method is the standard and most powerful tool.

By choosing the right method based on whether you need to mutate the array or create a new one, you can write clean and predictable code for managing lists of data.

Table of Contents