How To Change A Value Of An Object In An Array In JavaScript

Posted on by Tom Joseph
change a value of an object in an array in JavaScript

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:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *