How to Update an Object Inside an Array in JavaScript

Arrays and objects are fundamental constructs in JavaScript. It‘s common to have arrays containing objects, such as a list of users or products. Sometimes you need to update the data inside those objects.

In this comprehensive guide, you‘ll learn four different ways to update an object that lives inside a JavaScript array:

1. Using findIndex() and index access
2. With map() and the spread syntax
3. Using find()
4. Looping with for...of

We‘ll look at the syntax, examples, and pros and cons of each method. By the end, you‘ll know exactly how to update objects in arrays to build dynamic, data-driven applications.

Prerequisites

Before diving in, you should be familiar with:

• JavaScript arrays – declaring, populating, indexing
• JavaScript objects – declaring, accessing properties
• Arrow functions
• Accessing array elements by index

With that foundation, let‘s get started!

Sample Array of Objects

We‘ll use the following array of objects in the examples:

const users = [
  { id: 1, name: "John", age: 25 },  
  { id: 2, name: "Sarah", age: 32 },
  { id: 3, name: "Peter", age: 28 }
];

It‘s an array called users containing three objects that represent different users, with id, name, and age properties.

Our task is to update the value of a property, like the name or age, for one of those user objects inside the array.

Method 1: findIndex() and Index Access

The first method to update an object uses the findIndex() method to find the index of the target object. Then you can access the object directly by its index and update its property.

How It Works

1. findIndex() takes a callback function that returns true for the object you want. It returns the index of the found element.

2. Use bracket notation and the index to access the object in the array.

3. Update whichever property you want.

Syntax

Here is the syntax for this approach:

const index = array.findIndex(obj => {
  // return true if this is the object to update 
})

array[index].property = newValue; 

Example

Let‘s increase the age of the user with id of 3:

// Find index of user 
const index = users.findIndex(user => {
  return user.id === 3; 
});

// Update age 
users[index].age = 30;

We first used findIndex() and an arrow function that returns true if the id is 3. This gives us the index 2.

Then, we use bracket notation to access the object directly and update the age property to 30.

Pros

• Simple syntax
• Mutates the original array which may be desired behavior

Cons

• Requires updating objects one-by-one instead of in batch

Method 2: map() and Spread Syntax

The second method leverages map() and the spread syntax.

How It Works

1. map() loops through the array, allowing you to operate on each object
2. Return a new object with spread syntax and overridden properties

This returns a new array with the updated data.

Syntax

Here is how it works:

const updatedArray = array.map(obj => {

  // Edit this object?
  if (shouldUpdateObj(obj)) {
    // Use spread to copy existing key-values 
    return {...obj, key: newValue}; 
  } 

  // Otherwise return unchanged 
  return obj;

});

Example

Let‘s use the same example of updating the user with id of 3:

const updatedUsers = users.map(user => {

  // Check if this is user #3
  if (user.id === 3) {

    // Return new object with updated age 
    return {...user, age: 30};

  }

  return user;

});

By returning a new object for user #3 instead of mutating, this avoids side effects.

Pros

• Avoids mutations so no side effects
• Can update multiple objects in one operation

Cons

• More verbose syntax
• Returns a new array instead of updating original

Method 3: find()

The third method uses find(). This works by getting a reference to the object you want to update.

How It Works

1. find() returns the first object that matches some condition
2. Access the returned object reference to update data
3. Useful when you know there may only be one match

Syntax

const user = array.find(obj => {
  // return true if this is target object
});

if (user) {
  // Update user 
  user.age = newAge;
}

Example

Here this is in action:

// Get reference to user #2  
const user = users.find(u => u.id === 2);  

// Update if found
if (user) {
  user.name = ‘Sarah Jones‘;  
}

Instead of index values, we work directly with object references.

Pros

• Simple lookup by property
• Modify object in place

Cons

• Only returns first match

Method 4: for…of Loop

The fourth option is a simple for...of loop, accessing objects directly from the array.

How It Works

1. Use for...of to loop through array
2. Inside the loop, check for object to update
3. Access object and update property

Syntax

Here is the syntax:

for (const obj of array) {

  if (updateCondition(obj)) {  
    // Update object
    obj.prop = newValue;
  }

} 

Example

Let‘s update the first user again:

for (const user of users) {

  if (user.id === 1) {
    user.name = ‘Johnny‘;
    break; 
  }

} 

We loop through, identify the target, update the property directly, and break out of the loop.

Pros

• Good old-fashioned loop
• Update object directly

Cons

• Requires break statement
• No built-in methods

Summary

We looked at a few different options for updating an object inside a JavaScript array:

• findIndex() gets index for direct access
• map() + spread syntax returns new array
• find() gets single object reference
• for...of loops through array

The best approach depends on the situation. Using the built-in methods makes the code clean and readable. But sometimes a simple loop is effective too.

The key ideas are:

• Access array element by index or reference
• Update properties on accessed object
• Optionally return new array or modify existing

Now you have some new tools to build dynamic applications with changing data.

Happy coding!