Skip to main content

How to Update an Object in an Array of Objects in JavaScript

A very common task in JavaScript is to find a specific object within an array and update one of its properties. For example, you might need to change a user's name, update the status of a task, or modify an item in a shopping cart. The best approach depends on whether you want to modify the original array directly (mutation) or create a new, updated array (an immutable operation).

This guide will teach you the modern, standard methods for both scenarios. You will learn how to use Array.prototype.map() for the immutable approach and Array.prototype.find() for a direct, in-place mutation.

The Core Problem: Finding and Updating an Object​

You have an array of objects, and you need to find a specific object (usually by a unique id) and change one of its properties.

Problem: you have an array of users and you need to change the name of the user with id: 2.

// Problem: How to change the name of the user with `id` 2 to 'Robert'?
let users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

Method 1 (Recommended & Immutable): map()​

The Array.prototype.map() method is the most common, readable, and safest way to "update" an object. It creates a new array, allowing you to return a modified version of the target object while keeping all other objects the same. This is an immutable operation and is a best practice in modern JavaScript.

The Logic:

  1. Iterate over the array with map().
  2. For each object, check if it's the one you want to update.
  3. If it is, return a new object with the updated property, using the spread syntax (...) to copy the old properties.
  4. If it's not, return the original object unchanged.

The Solution:

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

let updatedUsers = users.map(user => {
  if (user.id === idToUpdate) {
    // This is the object we want to update.
    // Return a new object with the old properties and the new name.
    return { ...user, name: newName };
  }
  // Otherwise, return the original object.
  return user;
});

console.log(updatedUsers); // # Output: The new, updated array
console.log(users);        // # Output: The original, unchanged array

Output:

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

This method is highly recommended for its clarity and for avoiding side effects.

Method 2 (Mutation): find()​

If you need to modify the original array directly (an in-place mutation), the Array.prototype.find() method provides an efficient way to get a direct reference to the object you want to change.

The logic:

  1. Use find() to get a reference to the first object that matches your condition.
  2. If the object is found, you can modify its properties directly. Because objects are passed by reference, this will change the object within the original array.

The solution

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

// 1. Find the object in the array.
let userToUpdate = users.find(user => user.id === idToUpdate);

// 2. If the object is found, update its property.
if (userToUpdate) {
  userToUpdate.name = newName;
}

console.log(users); // # Output: The original array is now modified

Output:

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

This method is more performant for very large arrays as it stops searching as soon as it finds a match, but it has the side effect of mutating your original data.

Updating All Matching Objects​

Both methods can be easily adapted to update every object that matches a condition.

  • The map() method already does this by default if your condition matches multiple items.
  • For the mutating approach, you would use forEach() or a for...of loop instead of find().
// Mutating approach to update all matches
users.forEach(user => {
  if (user.role === 'editor') {
    user.role = 'contributor';
  }
});

Conclusion​

Updating an object in an array is a common task with two excellent solutions, depending on your goal.

  • The recommended best practice for most cases is the immutable approach using Array.prototype.map(). It is safer, more readable, and aligns with functional programming principles.
  • If you must mutate the original array for performance or other reasons, the correct method is to use find() to locate the object and then modify its properties directly.

Table of Contents