JavaScript objects contain properties and functions in them.
You can use the find() method to find the specific object in an array and update the property’s value using the . operator.
This tutorial teaches you the different methods to change the value of an object in an array in JavaScript.
Table of Contents
Change the Value Of An Object in an Array Using FindIndex()
The findIndex() method finds the first object that passes the test condition and returns its index.
- If no object passes the condition,
-1is returned.
You can find the index of the object and assign a new value to the property of a JavaScript object.
Use this method when you want to find and change the value of the first matching element in the array.
Code
The following example demonstrates how to find the object with id 1 and set its name to a new name.
let yourArray = [
{ id: 0, name: "Bob" },
{ id: 1, name: "Ram" },
{ id: 2, name: "Peter" }
];
const index = yourArray.findIndex(object => {
return object.id === 1;
});
if (index !== -1) {
yourArray[index].name = 'John';
}
console.log(yourArray);Output
[{
id: 0,
name: "Bob"
}, {
id: 1,
name: "John"
}, {
id: 2,
name: "Peter"
}]Change the Value Of An Object in an Array Using Find(
The find() executes a test function in every element of the array. It doesn’t exit after finding the first matching element.
- Returns the first matching element, and If no object passes the condition, undefined is returned.
- The
find()method mutates the same array while changing the array object.
To change the value of the object in an array using the find() method:
- pass a function that updates the value if the object property matches a specific condition
Use this method when the array might contain more objects that pass a condition, and you need to update the value of all those objects. And you want to make the changes in the same array object.
Code
The following example demonstrates an array with objects having id =0 for two objects, and the find method updates the name of these objects.
let yourArray = [
{ id: 0, name: "Bob" },
{ id: 0, name: "Ram" },
{ id: 2, name: "Peter" }
];
yourArray.find(function(entry) {
if (entry.id === 0) {
entry.name = "Karthik";
}
});
console.log(yourArray);Output
[
{ id: 0, name: "Karthik"},
{ id: 0, name: "Karthik"},
{ id: 2, name: "Peter"}
]Change the Value Of An Object in an Array Using Map
The map() executes a callback function in every element of the array and returns a new array.
- Returns a new array with values that result while executing the callback function.
To change the value of the object in an array using the map() method:
- pass a function that updates the value if the object property matches a specific condition
Use this method when the array might contain more objects that pass a condition, and you need to update the value of all those objects. And you want to create a new array as a result of the change.
const yourArray = [
{id: 0, name: 'Bob'},
{id: 1, name: 'Peter'},
{id: 2, name: 'Ram'},
];
const newArray = yourArray.map(entry => {
if (entry.id === 1) {
return {...entry, name: 'Karthik'};
}
return entry;
});
console.log(newArray);Output
[
{ id: 0, name: "Bob"},
{ id: 1, name: "Karthik"},
{ id: 2, name: "Ram"}
]