Update all the Values in an Object using JavaScript

Update all the Values in an Object in JavaScript #

To update all the values in an object:

1. Use the Object.keys() method to get an array of the object's keys.
2. Iterate over the array using the forEach() method and update each value.
3. After the last iteration, all the values in the object will be updated.

Copied!
const obj = {
  country: 'Chile',
  city: 'Santiago',
  address: 'Example',
};

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

// 👇️ {country: '', city: '', address: ''}
console.log(obj);

We used the Object.keys method to get an array of the object's keys.

Copied!
const obj = {
  country: 'Chile',
  city: 'Santiago',
  address: 'Example',
};

// 👇️ ['country', 'city', 'address']
console.log(Object.keys(obj));

The next step is to iterate over the array of keys using the Array.forEach method.

The function we passed to the forEach method gets called for each element of the array and gets passed 3 parameters:

1. the array element
2. the index
3. the array

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

Copied!
const obj = {
  country: 'Chile',
  city: 'Santiago',
  address: 'Example',
};

Object.keys(obj).forEach((key, index) => {
  obj[key] = obj[key] + index;
});

// 👇️ {country: 'Chile0', city: 'Santiago1', address: 'Example2'}
console.log(obj);

Update all the Values in an Object without Mutation #

To update all the values in an object:

1. Use the Object.keys() method to get an array of the object's keys.
2. Use the reduce() method to iterate over the array.
3. On each iteration, return a new object that contains the values from the previous iteration and the updated value.

Copied!
const obj = {
  country: 'Chile',
  city: 'Santiago',
  address: 'Example',
};

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

console.log(newObj); // 👉️ {country: '', city: '', address: ''}

// 👇️ {country: 'Chile', city: 'Santiago', address: 'Example'}
console.log(obj);

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

The Array.reduce method allows us to iterate over the array.

The function we passed to the method gets called for each element (key) in the array.

We passed an initial value of an empty object for the accumulator variable.

On each iteration, we use the spread syntax (...) to unpack the key-value pairs of the object into a new object and update the current value.

The value we return from the callback function gets passed to the reduce() method as the next value for the accumulator.

Further Reading #

• Update an Object's Property in Array of Objects in JS
• Get an Object's Key by its Value using JavaScript
• How to get the Length of an Object in JavaScript
• Convert an Object's Values to Comma-Separated String in JS
• How to Rename an Object's Key in JavaScript
• Access an Object Key that Contains a Space in JavaScript
• Add a Property to the Beginning of an Object in JavaScript