Skip to main content

How to Update All Values in an Object in JavaScript

A common data transformation task is to iterate over all the properties of an object and update their values based on some logic. For example, you might need to trim all string values, set all numeric values to zero, or simply remap them to a new format.

This guide will demonstrate the modern, non-mutating approach using Object.fromEntries(), which is the recommended best practice. We will also cover the traditional, mutating approach using a for...of loop.

The Core Task: Mutating vs. Non-Mutating​

Before choosing a method, you must decide if you want to modify the original object or create a new, updated one.

  • Non-mutating (Immutable): Creates a new object with the updated values. The original object is left untouched. This is the recommended best practice in modern JavaScript as it is safer and leads to more predictable code.
  • Mutating: Modifies the original object in place. This can be more memory-efficient but can cause unintended side effects if other parts of your code rely on the original object.

This modern, declarative approach is the cleanest and safest way to transform an object's values.

Problem: you have an object with string values, and you want to create a new object where all values are converted to uppercase.

// Problem: Create a new object with all values in uppercase.
let user = {
  firstName: 'alice',
  lastName: 'smith',
};

Solution:

  1. Convert the object into an array of [key, value] pairs using Object.entries().
  2. Use map() to create a new array of pairs with the values transformed.
  3. Convert the new array of pairs back into an object using Object.fromEntries().
let user = { firstName: 'alice', lastName: 'smith' };

let uppercasedUser = Object.fromEntries(
  Object.entries(user).map(([key, value]) => [key, value.toUpperCase()])
);

console.log(uppercasedUser); // # Output: { firstName: 'ALICE', lastName: 'SMITH' }
console.log(user);           // # Output: { firstName: 'alice', lastName: 'smith' } (Original is unchanged)

Output:

{firstName: 'ALICE', lastName: 'SMITH'}
{firstName: 'alice', lastName: 'smith'}

The Mutating Method: Object.keys() and a for...of Loop​

If you have a specific need to modify the original object in place, you can iterate over its keys and reassign the value for each key.

let user = {
  firstName: 'alice',
  lastName: 'smith',
};

console.log(user); // Output: { firstName: 'alice', lastName: 'smith' }

// This modifies the original `user` object directly.
for (let key of Object.keys(user)) {
  user[key] = user[key].toUpperCase();
}

console.log(user); // Output: { firstName: 'ALICE', lastName: 'SMITH' }
// NOTE: The original `user` object has now been modified.

Output:

{firstName: 'alice', lastName: 'smith'}
{firstName: 'ALICE', lastName: 'SMITH'}
note

This approach is more direct but should be used with caution due to its side effects.

How the Non-Mutating Method Works​

Let's break down the one-liner Object.fromEntries(Object.entries(obj).map(...)).

Step 1: Convert to an Array of Entries Object.entries(obj) transforms the object into an array of [key, value] pairs.

let user = { firstName: 'alice', lastName: 'smith' };
let entries = Object.entries(user);
// entries is now [ ['firstName', 'alice'], ['lastName', 'smith'] ]

Step 2: Map Over the Entries to Transform the Values We use map() to create a new array. For each [key, value] pair, we return a new pair where the value has been transformed.

let mappedEntries = entries.map(([key, value]) => [key, value.toUpperCase()]);
// mappedEntries is now [ ['firstName', 'ALICE'], ['lastName', 'SMITH'] ]

Step 3: Reconstruct the Object Object.fromEntries() takes an array of [key, value] pairs and creates a new object from them.

let finalObject = Object.fromEntries(mappedEntries);
// finalObject is now { firstName: 'ALICE', lastName: 'SMITH' }

Practical Example: Conditionally Updating Values​

This pattern is also perfect for updating values based on a condition. This example uses the recommended non-mutating method to trim all string values in an object while leaving other types untouched.

let data = {
  name: '  Tom Nolan  ',
  id: 123,
  email: '  test@example.com ',
};

let trimmedData = Object.fromEntries(
  Object.entries(data).map(([key, value]) => {
    // Only trim the value if it's a string.
    let newValue = typeof value === 'string' ? value.trim() : value;
    return [key, newValue];
  })
);

console.log(trimmedData);

Output:

{name: 'Tom Nolan', id: 123, email: 'test@example.com'}

Conclusion​

Updating all values in an object is a common data transformation task with a clear, modern solution.

  • The non-mutating approach using a chain of Object.entries(), map(), and Object.fromEntries() is the recommended best practice. It is declarative, safe (as it doesn't have side effects), and highly readable.
  • The mutating approach using a for...of loop over Object.keys() is a valid but less safe alternative. It should be used only when you intentionally want to modify the original data in place.

Table of Contents