How To Convert An Array Of Objects To A Map In JavaScript

how to convert an array of objects to a map in JavaScript

Are you struggling to know how to convert an array of objects to a map in JavaScript? Let me show you how to do it. Read this article till the end to find the best way.

Convert an array of objects to a map in JavaScript

Map in JavaScript is a data structure that allows storing key-value data. It’s pretty similar to Object, except it allows any data type for the ‘key’ – Number, String, Boolean, Object,…

Initialize Map in JavaScript

Here is the syntax to initialize Map in JavaScript:

new Map([iterable])

Firstly, Map stores data in a key-value format. Therefore each element of an iterable object must be an array of two components of the form: [key, value].

The iterable object is an optional parameter. An empty Map will be created if you don’t pass any input parameters. Take a look at the example below:

//Create an empty Map:
const first_map = new Map() 
console.log(first_map)                                                                                                                                                                                                                    
console.log(typeof first_map)

//Use iterable object as the input parameter
const second_map = new Map([["height", 182],["weight",80]])
console.log(second_map)
console.log(typeof second_map)

Output:

Map(0) {}

object

Map(2) {'height' => 182, 'weight' => 80}

object

Convert An Array Of Objects To A Map

Solution 1 – Using Array.map()

Alright, to convert an array of objects to a map, you apply the Array.map() method on your array object. This method returns a new array consisting of key and value pairs. Then, pass those key-value pairs into the Map constructor to create a new Map object. 

Syntax:

array.map(function(currentItem, index, arr), this)

Parameter:

function()A function that executed on every element of the array – Required.
currentItemThe value of the current element – Required.
indexThe index of the current element – Optional.
arrThe whole array of the current element – Optional.
thisA value passed to the function to be used as its this value – Optional.
Default value: undefined.

Here is an example for you:

const physical= [
	{height: 182, weight:  80},
	{height: 178, weight:  62},
	{height: 184, weight:  82},
]

temp = physical.map(item => {
	return [item.height, item.weight]
})

myMap = new Map(temp)
console.log(myMap)

Output:

Map(3) {182 => 80, 178 => 62, 185 => 82}

Solution 2 – Using Array.forEach()

You can also use the Array.forEach() method instead of Array.map() method. Basically, the same steps, but you will apply forEach() instead of Map() to the array object. Refer to the following example:

Syntax:

array.forEach(function(currentItem, index, arr), this)

Parameter:

function()A function that executed on every element of the array – Required.
currentItemThe value of the current element – Required.
indexThe index of the current element – Optional.
arrThe whole array of the current element – Optional.
thisA value passed to the function to be used as its this value – Optional.
Default value: undefined.

Check out this example:

const physical= [
	{height: 182, weight:  80},
	{height: 178, weight:  62},
	{height: 184, weight:  82},
]

myMap = new Map()

//use the myMap.set() method to add a new key-value pair to the Map
physical.forEach(item => {
	myMap.set(item.height, item.weight)
})

console.log(myMap)

Output:

Map(3) {182 => 80, 178 => 62, 185 => 82}

Summary

So in this article, I helped you learn how to convert an array of objects to a map in JavaScript through a few examples above. Thanks, and I hope this information is helpful to you.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *