Change a Value of an Object in an Array in JavaScript

Change a Value of an Object in an Array #

To change the value of an object in an array:

1. Call the findIndex() method to get the index of the specific object.
2. Access the array at the index and change the property's value using dot notation.
3. The value of the object in the array will get updated in place.

Copied!
const arr = [
  {id: 1, name: 'Alice'},
  {id: 2, name: 'Bob'},
];

const index = arr.findIndex(object => {
  return object.id === 2;
}); // 👉️ 1

if (index !== -1) {
  arr[index].name = 'John';
}

// 👇️ [{id: 1, name: 'Alice'}, {id: 2, name: 'John'}]
console.log(arr);

The function we passed to the Array.findIndex method gets called with each object in the array until it returns a truthy value or iterates over the entire array.

If the function never returns a truthy value, the findIndex() method returns -1, otherwise it returns the index of the matching array element.

We want to be sure that an object with the supplied id is found, so we conditionally check that the findIndex method didn't return -1.

After we get the index of the object, we can use dot notation to change the value of a specific property in the object.

In the example, we accessed the object at index 1 and updated the value of the name property to John.

To change the value of an object in an array:

1. Use the Array.map() method to iterate over the array.
2. Check if each object is the one to be updated.
3. Use the spread syntax to update the value of the matching object.

Copied!
const arr = [
  {id: 1, name: 'Alice'},
  {id: 2, name: 'Bob'},
];

const newArr = arr.map(object => {
  if (object.id === 2) {
    // 👇️ change value of name property
    return {...object, name: 'John'};
  }
  return object;
});

// 👇️ [{id: 1, name: 'Alice'}, {id: 2, name: 'John'}]
console.log(newArr);

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

The function we passed to the Array.map method gets called with each element (object) in the array.

Inside of the function, we used the spread operator (...) to create a copy of the object and changed the value of its name property.

Another difference is that the map() method iterates over the entire array, regardless if an object with the provided id is found.

If we had multiple objects with an id of 2, they'd all get updated.

The findIndex() method only finds the index of the first array element that matches a condition.

If we had multiple objects with an id of 2 in the array, find() would only return the index of the first matching object.

Further Reading #

• Convert Array to comma separated String in JavaScript
• Convert Array to String without Commas in JavaScript
• Convert Array to String with Spaces in JavaScript
• Convert a String to Array of Numbers in JavaScript
• Convert all Array Elements to Lowercase in JavaScript
• Convert all Array Elements to Uppercase in JavaScript
• Check if Multiple Values exist in Array in JavaScript
• Capitalize the First Letter of Each Word in Array in JS
• Convert a Comma Separated String to Array in JavaScript
• Convert Comma Separated String to Numeric Array in JS
• Replace the first Element of an Array in JavaScript
• Remove the Last 2 Elements from an Array in JavaScript