How To Convert An Object To A Map Using JavaScript

Posted on by Edward Anderson
Convert an Object to a Map using JavaScript

In this article, we will know how to convert an object to a map using JavaScript with some methods. You can use map.set() or object.entries() function. Each approach is rather straightforward, and you can choose whichever you like.

Convert an object to a map using JavaScript

Using map.set()

You can use the set() method on a new map to set a new element in the map object. This element has two properties: “key” and “value” as these are the characters of a Map. 

Syntax:

set(key, value)

Parameters:

  • key: key of the element of the map which has to be unique.
  • value: the value of a map element with the key provided.

Example:

var map = new Map()
var object = {host : 'learnshareit.com'}

// set a map element with key is 'LEARNSHAREIT' and the value is the whole object
map.set('LEARNSHAREIT', object);

// set a map element which resembles the given object
map.set('host', object.host);
console.log(map);

Output:

Map(2) {
  'LEARNSHAREIT' => { host: 'learnshareit.com' },
  'host' => 'learnshareit.com'
}

The above example uses the set method to set new map elements. The first element has the key “LEARNSHAREIT” and its value is the whole object you have. The second element has the key “host” and has the value of the host property in the object. In fact, the second approach may be what most programmers are expecting. However, the above example has a disadvantage because you have to know the name (the key) of the element before setting it. To cope with this then function Object.keys(object) is very helpful:

Syntax:

Object.keys(object)

Parameter:

  • object: the object that you want to receive all the keys (returned in array)

Example:

var map = new Map()
var object = {host : 'learnshareit.com', aim : 'Learn and Share Knowledge', url : 'https://learnshareit.com'}

// print out an example of what Object.key() returns
console.log(Object.keys(object));

// iterate through an array of the object's keys
for (i of Object.keys(object))
    map.set(i, object[i]);

console.log(map);

Output: 

[ 'host', 'aim', 'url' ]
Map(3) {
  'host' => 'learnshareit.com',
  'aim' => 'Learn and Share Knowledge',
  'url' => 'https://learnshareit.com'
}

Using Object.entries()

This approach may be fast to convert an object to a map using JavaScript. The function will return an array of an array whose element is an element representing [key, value].

Syntax:

Object.entries(object)

Parameter:

  • object: the object you want to get the entries array.

First, we need an example to know exactly what the function will return:

var map = new Map()
var object = {host : 'learnshareit.com', aim : 'Learn and Share Knowledge', url : 'https://learnshareit.com'}

// print out an example of what Object.entries() returns
console.log(Object.entries(object));

Output: 

[
  [ 'host', 'learnshareit.com' ],
  [ 'aim', 'Learn and Share Knowledge' ],
  [ 'url', 'https://learnshareit.com' ]
]

As you can see, it returns an array in which each element is an array of 2 elements, the first element represents the object’s key and the second represents its corresponding value. To convert an object to a map, you just need to use the Map() constructor with the parameter is the array returned by the function Object.entries(object):

var object = {host : 'learnshareit.com', aim : 'Learn and Share Knowledge', url : 'https://learnshareit.com'}

// print out an example of what Object.key() returns
var map = new Map(Object.entries(object))
console.log(map);

Output: 

Map(3) {
  'host' => 'learnshareit.com',
  'aim' => 'Learn and Share Knowledge',
  'url' => 'https://learnshareit.com'
}

Summary

We have shown you how to convert an object to a map using JavaScript. It is helpful to consider that each method has its advantages and disadvantages. There are many posts related to this subject which you can read more such as convert an array to a set or convert a map into an array of object.

Maybe you are interested:

Related Posts

Leave a Reply

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