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:

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:

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:

• Check if an array doesn’t include a value
• Add a Key/Value pair to all Objects in Array in JavaScript
• Count Occurrences of each Element in Array in JavaScript

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js