JavaScript objects are primarily composed of key-value pairs and stand as one of the most prevalent data structures within the JavaScript language. Data stored in any data structure, including objects, requires updates. While updating a single value can be straightforward, a more comprehensive approach is necessary when updating all values within an object. Let's learn how to update object key value in reactJs.

Table of Contents

Use forEach to update all keys in the Object with empty value 

Use map to update all keys in the Object with empty value 

Conditionally Update specific key value in an Object

Update all the Values in an Object without Mutation

Update all the Values in an Object using for...of

Summary


Use forEach to update all keys in the Object with empty value 

For comprehensive object value updates, follow these steps:

    Use Object.keys to extract all the keys from the object.

    Implement the desired logic to determine which values should be updated.

    Iteratively update each value using a loop construct  forEach

const userObj = {
name: 'Nagi',
country: 'India',
city: 'Bangalore',
address: 'Central part of city',
};

Object.keys(userObj).forEach(key => {
userObj[key] = '';
});


console.log(userObj);

// Output

// { name: '', country: '', city: '', address: '', }


Use map to update all keys in the Object with empty value 

For comprehensive object value updates, follow these steps:

    Use Object.keys to extract all the keys from the object.

    Implement the desired logic to determine which values should be updated.

    Iteratively update each value using a loop construct  map

const userObj = {
name: 'Nagi',
country: 'India',
city: 'Bangalore',
address: 'Central part of city',
};

Object.keys(userObj).map(key => {
userObj[key] = '';
});


console.log(userObj);

// Output

// { name: '', country: '', city: '', address: '', }


If you need to use the index, assign the second parameter of the callback function to a variable.

const userObj = {
name: 'Nagi',
country: 'India',
city: 'Bangalore',
address: 'Central part of city',
};

Object.keys(userObj).map((key, index) => {
userObj[key] = index;
});

console.log(userObj);

// Output

// { name: 0, country: 1, city: 2, address: 3 }



Conditionally Update specific key value in an Object

You can also check for a condition in an if statement before updating the object's values.

If the condition is true, the key's value gets set to 'New Bangalore'.

We used the logical (&&) operator to check if multiple conditions are true, but you can also check for a single condition.

const userObj = {
name: 'Nagi',
country: 'India',
city: 'Bangalore',
address: 'Central part of city',
};

Object.keys(userObj).map((key, index) => {
if (userObj[key] === 'Bangalore') {
userObj[key] = 'New Bangalore'
}
});

console.log(userObj);

// Output

/* {
name: 'Nagi',
country: 'India',
city: 'New Bangalore',
address: 'Central part of city'
}
*/


Update all the Values in an Object without Mutation

This involves a three-step procedure:

1. Employ the Object.keys() method to generate an array of the object's keys.

2. Use the reduce() method to cycle through the array.

3. On each iteration, return a new object that contains the values from the previous iteration and the updated value.

const userObj = {
name: 'Nagi',
country: 'India',
city: 'Bangalore',
address: 'Central part of city',
};

const newUserObj = Object.keys(userObj).reduce((accumulator, key) => {
return { ...accumulator, [key]: '' }
}, {});

// { name: '', country: '', city: '', address: '' }
console.log(newUserObj);




/*
{
name: 'Nagi',
country: 'India',
city: 'Bangalore',
address: 'Central part of city'
}
*/
console.log(userObj);


We obtained an array of the object's keys using the Object.keys() method.

The function we supplied to the Array.reduce method is invoked for every element in the array.

To start, we initialized the accumulator variable as an empty object, consistent with our second argument to the reduce() method.

During each iteration, we utilize the spread syntax (...) to unpack the object's key-value pairs into a fresh object, thereby updating the current value.

The value returned by the callback function becomes the accumulator for the subsequent iteration.

It's important to note that this method does not alter the values of the original object; instead, it produces a new object.


Update all the Values in an Object using for...of

This process consists of three steps:

    Employ the Object.keys() method to generate an array containing the keys of the object.

    Utilize a for...of loop to cycle through the array.

    Modify the values associated with each key during the iteration.

const userObj = {
name: 'Nagi',
country: 'India',
city: 'Bangalore',
address: 'Central part of city',
};

for (const iterator of Object.keys(userObj)) {
userObj[iterator] = ''

}
// { name: '', country: '', city: '', address: '' }
console.log(userObj);


Summary

To update key with new value especially across the entire object, the use of composable code is efficient and easier. The Object.keys(), forEach(), and map() methods help achieve the goal of updating the keys. The linkage between the methods where the results of the first method is passed to the second method is functional helped in achieving the result.