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.

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 pass 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 array element.

We want to be sure that an object with the supplied id is found, therefore we conditionally check that the index returned from the findIndex method is not equal to -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 access the object at index 1 and change the value associated to its name property to John.

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 pass to the Array.map method gets called with each element (object) in the array.

Inside the function we use the spread operator (...) to create a copy of the object and change the value of the name property.

Another difference is that if there were multiple object with an id of 2 in our array, using the map method we would have changed the value of the name property of all of them.

The findIndex method only finds the index of the first array element that matches a condition, even if we had multiple objects with id of 2, only the index of the first match would be returned.

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