In this post, we will discuss what a map object is and how to convert map keys to an array in JavaScript.
Map Object
A map object is a simple object whose function is to store a collection of elements with the exception that the map stores data in key-value pairs. Whatever order you insert data in the map object, it remembers that order. The syntax of the map object is given below:
The iterableObject argument is optional and is the object whose elements are stored as key-value pairs in the map object.
Let’s implement a map object in JavaScript so that we know how the map object is initialized and how it works:
var map = newMap();
// set up keys and values for map object
map.set('1', 'string'); // key as string
map.set(1, 'number'); // key as numeric
map.set(true, 'boolean'); // key as boolean
// get values from map using keys
console.log( map.get(1)); // number
console.log( map.get('1') ); // string
In the above code, we initialized a map object and then set some values inside the initialized map object. After this, we fetch a value using the map.get() method and display it using console.log():
Conversion of map keys to array
We can get the keys of the map object using the Map.keys() method.
To convert the map keys to an array we can use two methods. The first approach will be to use the Array.from method which helps in converting a MapIterator (an object helping us to loop through records or collections) into an array in the following manner:
var map = newMap();
// set up keys and values for map object
map.set('fruit', 'apple');
map.set('quantity', 20);
// convert map keys to array
let keys = Array.from( map.keys() );
console.log(keys); // [fruit, quantity]
In the above code, first, we initialized the map object and then set two values for the map object. Next to get keys of the map object we used the built-in method of map object map.keys(). Then we used the Array.from method which will convert the result into an array. In the end, we displayed the keys onto the console using the console.log() method.
The second approach we can take is to use the spread operator “…” in JavaScript whose function is to take an iterable and then convert that iterable into individual elements.
var map = newMap();
// set up keys and values for map object
map.set('fruit', 'apple');
map.set('quantity', 20);
// convert map keys to array
let keys =[ ...map.keys() ];
console.log(keys); // [fruit, quantity]
The code given above remains the same with the exception of the usage of spread operator “…”.
As you can see in the output that we have successfully converted our map object into an iterable array:
Conclusion
JavaScript introduced a map object in ECMAScript in 2005 in which we can store a collection of elements in key-value pairs. We can get the keys from the map object using the built-in method map.keys(). To convert map keys to an array we have to first initialize a map object, followed by using the map.keys() method and then use the spread operator or array.from() method to convert the keys into an array.
In this post, we discussed what a JavaScript map object is and how to convert a map object to an array in JavaScript using two approaches; using the spread operator and using an array.from() method.
