Change a Value of an Object in an Array in JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

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.
index.js
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.

JavaScript Indexes are zero-based, therefore the first element in an array has an index of 0, and the last array element an index of arr.length - 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.

Most experienced developers avoid changing (mutating) objects and arrays in place. Instead, they create a new array that contains only the desired values.

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.
index.js
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.

There are multiple differences between this and the previous approach. The main one being, that we don't change the contents of the original array, we create a new array.

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 #

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.