Are you looking for a way to change a value of an object in an array in JavaScript? Following this article, we will give you solutions to do it.
Change a value of an Object in JavaScript
Method 1: Using findIndex()
The findIndex() method is used to search and return the index of the first element that satisfies the condition, if not found, return the index -1.
You can pass either arrow functions or callback functions into this method.
// Arrow function
findIndex((element) => { /* … */ } )
// Callback function
findIndex(callbackFn)
Parameters:
- callbackFn
A function used to test elements in the array.
The function is called with the following arguments.
- element
The current element that is being processed in the array.
In our example, we will use an arrow function.
const arr = [
{id: 1, name: 'Anneline'},
{id: 2, name: 'Ross'},
{id: 3, name: 'Marie'}
]
objIndex = arr.findIndex((obj => obj.id == 1))
//print the name property before change
console.log("Before change: ", arr[objIndex]);
//change the name property
arr[objIndex].name = "Mary";
//print the name property before change
console.log("After change: ", arr[objIndex]);
Output
Before change: { id: 1, name: 'Anneline' }
After change: { id: 1, name: 'Mary' }
Method 2: Using map() function
The map() method creates a new array storing the results of a provided function on every element in the calling array.
Syntax
map((element) => { /* … */ })
map(callbackFn)
Return value
A new array with each element being the result of the callback function.
Map()
doesn’t mutate the original array.
We will execute array.map()
as follows:
const arr = [
{id: 1, name: 'Anneline'},
{id: 2, name: 'Ross'},
{id: 3, name: 'Marie'}
]
const newArr = arr.map(obj => {
if (obj.id === 3) {
return {...obj, name: 'Mary'};
}
return obj;
});
console.log(newArr);
Output
[
{ id: 1, name: 'Anneline' },
{ id: 2, name: 'Ross' },
{ id: 3, name: 'Mary' }
]
When not to use map()
Since map builds a new array, using it when you aren’t using the returned array isn’t effective; hence forEach
or for...of
is more likely recommended.
You shouldn’t be using map() if
- you’re not using the array it returns,
- you’re not returning a value from the callback.
Method 3: For… of iteration
The for…of loop allows us to check every object in the array.
const arr = [
{id: 1, name: 'Anneline'},
{id: 2, name: 'Ross'},
{id: 3, name: 'Marie'}
]
for (const obj of arr) {
if (obj.id === 2) {
obj.name = 'Tran';
break;
}
}
console.log (arr);
The loop breaks when the condition meets the first element.
Output
[
{ id: 1, name: 'Anneline' },
{ id: 2, name: 'Tran' },
{ id: 3, name: 'Marie' }
]
Summary
We have covered 3 methods to change a value of an object in an array. As each method is geared toward a suitable design, programmers should consider the most efficient way to solve the recurring problem.
Maybe you are interested:
- Add element to array at specific index in JavaScript
- Convert an array of objects to a map in javascript
- Check if an array doesn’t include a value

My name is Tom Joseph, and I work as a software engineer. I enjoy programming and passing on my experience. C, C++, JAVA, and Python are my strong programming languages that I can share with everyone. In addition, I have also developed projects using Javascript, html, css.
Job: Developer
Name of the university: UTC
Programming Languages: C, C++, Javascript, JAVA, python, html, css