Map JavaScript Objects with Lodash

Originally published at https://josephkhan.me on February 20, 2020.

Last week I was working on an application that had a requirement of mapping an object. So I had a complex object data and I had to augment each value inside the object and then finally return a new object with the same keys. In this article, I will discuss how to map JavaScript objects using lodash with a few code examples.

What’s an object?

In JavaScript (and in general..) an object is a collection of keys and values. Loosely speaking, objects in JavaScript may be defined as an unordered collection of related data, of primitive or reference types, in the form of “key: value” pairs.

//an object data structure 
const obj = { 
  key: value, 
  key1: value1, 
  ... 
}

I will not go into the details of objects for now and I am assuming you know about objects. Even our problem statement is different. So let’s continue

You might recall that JavaScript Array’s have a built-in method map() which does exactly the same.

What does a JavaScript Array map do?

It takes an array, invokes a passed function and loops through each value, augments or maps them, and finally returns a new array. See an example below,

var arr = [1,2,3,4]; 
//map the array 
arr.map((value, index) => { 
  return value*value; 
}); 
//returns [1,4,9,16]

So we have a simple array. And then using the map() function we square each value of the array. So, basically you can carry out any computation inside the function and return your new array as you like. The original array is not modified.

You can read more about the JavaScript array map method from the MDN docs.

Now let’s map an object

I had the liberty of using lodash in my application and it has a very useful method- mapValues, to map object properties.

mapValues(object, (value, key) => { 
  ... your logic here 
})

mapValues returns a new object with the same keys as object and values generated by running each own enumerable string keyed property of object through the passed function.

Using lodash mapValues we can loop through each property (key:value pair) inside an object, modify or augment the value and return a new object. Let’s see an example,

I have defined an object data below,

var obj = { 
  "ahgh7657" : { 
    id: 23, 
    code: 3, 
    selectedOption: {
      quantity: 2, 
      weight: 10
    } 
  }, 
  "dfds8423" : { 
    id: 44, 
    code: 5, 
    selectedOption: {
      quantity: 3, 
      weight: 15
    } 
  } 
};

Now, let’s use mapValues to map the object above and return a new object like below,

//newObj looks like this 
{ 
  ahgh7657: { 
    newId: "ahgh7657_cc", //notice the small change here
    code: 3, 
    quantity: 2 //notice the heirarchy change
  } 
  dfds8423: {
     newId: "dfds8423_cc",
     code: 5, 
     quantity: 3 
  } 
}

Using mapValues,

import mapValues from 'lodash/mapValues'; 
let newObj = mapValues(obj, (value, key) => { 
  return { 
    newId: key + "_cc", 
    code: value.code, 
    quantity: value.selectedOption.quantity 
  } 
});

So there you go, it’s very easy to map an object and return a new object using lodash mapValues. The original object is not modified.

Why not use lodash map function instead?

Because map returns a new array.

import map from 'lodash/map'; 
map(obj, (value, key) => { 
  return { 
    newId: key + "_cc", 
    code: value.code, 
    quantity: value.selectedOption.quantity 
  } 
}); 
//returns an array of objects 
[ 
  { newId: "ahgh7657_cc", code: 3, quantity: 2 }, 
  { newId: "dfds8423_cc", code: 5, quantity: 3 } 
]

Can I do the same with vanilla JavaScript?

Yes, of course, you can do the same. It’s just that you will have some extra steps. I will leave this exercise for you!

lodash gives you convinience of these small utility functions which you can use.

Originally published at https://josephkhan.me on February 20, 2020.

If you liked this post, check out my blog where I regularly write about JavaScript, ReactJS, and FrontEnd & Web development related stuff.

You can also Subscribe to my email newsletter for similar tutorials. I send out free ebooks and tutorial pdfs regularly to my readers.

Cheers!