JavaScript map value to keys (reverse object mapping)

In JavaScript, there are scenarios where we need to reverse the mapping of keys and values in an object, creating a new object where the original values become keys, and the keys become their corresponding values. For example, cities can be grouped by their states. In this article, we'll learn two approaches to achieve this: using Object.keys with iteration and reduce.

Using Object.keys() with forEach

The first approach involves iterating over the keys of the original object using Object.keys() of Object properties and populating a new object. If multiple keys in the original object share the same value, they are grouped into an array.

Example

const cities = {
   'Jodhpur': 'Rajasthan',
   'Alwar': 'Rajasthan',
   'Mumbai': 'Maharashtra',
   'Ahmedabad': 'Gujarat',
   'Pune': 'Maharashtra'
};

const reverseObject = (obj) => {
   const newObj = {};
   Object.keys(obj).forEach(key => {
      if(newObj[obj[key]]) {
         newObj[obj[key]].push(key);
      } else {
         newObj[obj[key]] = [key];
      }
   });
   return newObj;
};

console.log(reverseObject(cities));

Output

{
  Rajasthan: [ 'Jodhpur', 'Alwar' ],
  Maharashtra: [ 'Mumbai', 'Pune' ],
  Gujarat: [ 'Ahmedabad' ]
}

How It Works

• The function iterates over the keys of the original object.
• For each key, it checks if the value already exists as a key in the new object.
• If it exists, the key is added to the corresponding array; otherwise, a new array is created.

Using reduce() Method

For developers who prefer a functional style, the reduce() method offers a concise way to reverse an object. This approach builds the new object by accumulating key-value pairs in a single pass.

Example

const cities = {
   'Jodhpur': 'Rajasthan',
   'Alwar': 'Rajasthan',
   'Mumbai': 'Maharashtra',
   'Ahmedabad': 'Gujarat',
   'Pune': 'Maharashtra'
};

const reverseObject = (obj) => {
   return Object.entries(obj).reduce((acc, [key, value]) => {
      acc[value] = acc[value] || [];
      acc[value].push(key);
      return acc;
   }, {});
};

console.log(reverseObject(cities));

Output

{
   Rajasthan: [ 'Jodhpur', 'Alwar' ],
   Maharashtra: [ 'Mumbai', 'Pune' ],
   Gujarat: [ 'Ahmedabad' ]
}

How It Works

• Object.entries() converts the object into an array of key-value pairs.
• reduce() iterates over this array, constructing the new object.
• It checks if the value (now a key in the new object) already exists. If it does, the key is added to its array; otherwise, a new array is initialized.

Comparison

Conclusion

Both approaches effectively reverse object key-value mappings with proper handling of duplicate values. Choose Object.keys() for clarity or reduce() for functional programming style.