How to Map Object Keys and Values in JavaScript

Mapping over an object’s keys and values is a common task in JavaScript when you need to transform or manipulate the data in some way. JavaScript provides several methods to accomplish this, including Object.keys(), Object.values(), Object.entries(), and Array.map().

let obj = { name: "Alice", age: 25, location: "Wonderland" };
let mappedObj = Object.fromEntries(
  Object.entries(obj).map(([key, value]) => [key.toUpperCase(), value])
);

console.log(mappedObj); // { NAME: "Alice", AGE: 25, LOCATION: "Wonderland" }

• Purpose: Transform or manipulate the keys and values of an object.
• Common Methods: Object.keys(), Object.values(), Object.entries(), Array.map().

In JavaScript, objects are fundamental structures used to store data as key-value pairs. Sometimes, you might want to transform these keys or values, or both, based on specific criteria. JavaScript provides several native methods that can be combined to achieve this, along with utility libraries like Lodash that offer even more flexibility.

Mapping Keys Using Object.keys()

Object.keys() returns an array of an object’s keys, which can then be mapped over to create a new object with transformed keys.

Example 1: Convert Keys to Uppercase

let obj = { name: "Alice", age: 25, location: "Wonderland" };
let mappedKeys = Object.fromEntries(
  Object.keys(obj).map(key => [key.toUpperCase(), obj[key]])
);

console.log(mappedKeys); // { NAME: "Alice", AGE: 25, LOCATION: "Wonderland" }

Explanation:

• Object.keys(obj): Retrieves an array of the object’s keys.
• .map(key => [key.toUpperCase(), obj[key]]): Maps over the keys, transforming each one to uppercase and preserving its value.
• Object.fromEntries(): Converts the array of key-value pairs back into an object.

Mapping Values Using Object.values()

Object.values() returns an array of an object’s values, allowing you to map over the values to create a new object with transformed values.

Example 2: Increment All Numeric Values

let obj = { name: "Alice", age: 25, score: 90 };
let mappedValues = Object.fromEntries(
  Object.entries(obj).map(([key, value]) =>
    [key, typeof value === "number" ? value + 1 : value]
  )
);

console.log(mappedValues); // { name: "Alice", age: 26, score: 91 }

Explanation:

• Object.values(obj): Retrieves an array of the object’s values.
• .map(([key, value]) => [key, value + 1]): Maps over the values, incrementing each numeric value by 1.
• Object.fromEntries(): Converts the modified key-value pairs back into an object.

Mapping Both Keys and Values Using Object.entries()

Object.entries() returns an array of an object’s [key, value] pairs, which you can map over to transform both keys and values.

Example 3: Modify Keys and Values

let obj = { name: "Alice", age: 25, location: "Wonderland" };
let mappedEntries = Object.fromEntries(
  Object.entries(obj).map(([key, value]) => [key.toUpperCase(), value.toString()])
);

console.log(mappedEntries); // { NAME: "Alice", AGE: "25", LOCATION: "Wonderland" }

Explanation:

• Object.entries(obj): Retrieves an array of [key, value] pairs.
• .map(([key, value]) => [key.toUpperCase(), value.toString()]): Transforms both the keys (to uppercase) and the values (to strings).
• Object.fromEntries(): Converts the transformed array back into an object.

Using Lodash for Object Mapping

Lodash, a powerful JavaScript utility library, provides methods like _.mapKeys() and _.mapValues() for more convenient object mapping.

Example 4: Using _.mapKeys() and _.mapValues()

let obj = { name: "Alice", age: 25, location: "Wonderland" };

// Using _.mapKeys() to transform keys
let mappedKeys = _.mapKeys(obj, (value, key) => key.toUpperCase());
console.log(mappedKeys); // { NAME: "Alice", AGE: 25, LOCATION: "Wonderland" }

// Using _.mapValues() to transform values
let mappedValues = _.mapValues(obj, value => value.toString());
console.log(mappedValues); // { name: "Alice", age: "25", location: "Wonderland" }

Explanation:

• _.mapKeys(obj, (value, key) => key.toUpperCase()): Creates a new object by transforming the keys using the provided function.
• _.mapValues(obj, value => value.toString()): Creates a new object by transforming the values using the provided function.

Conclusion

Mapping over an object’s keys and values in JavaScript allows you to transform your data in various ways, whether you’re modifying just the keys, just the values, or both. By using built-in JavaScript methods like Object.keys(), Object.values(), and Object.entries(), or by leveraging the power of Lodash, you can effectively manipulate objects to meet your specific needs.

Mastering these techniques enables you to handle complex data transformations in JavaScript, making your code more flexible and easier to maintain.