How to Convert a Map to an Array of Keys in JavaScript - Step by Step Examples

How to Convert a Map to an Array of Keys in JavaScript ?

Answer

To convert a map to an array of keys in JavaScript, you can use the keys() method to get an iterator of keys and then convert it to an array using the Array.from() method. This provides a convenient way to extract all keys from the map.

✐ Examples

1 Converting a Map to an Array of Keys Using keys() and Array.from()

We can convert a map to an array of keys in JavaScript using the keys() method, which provides an iterator of all keys in the map. We can then convert this iterator to an array using the Array.from() method.

For example,

We start by declaring and initializing a map named myMap with some key-value pairs. In this example, the map has string keys and integer values.
We use the keys method to get an iterator of the keys in the map.
We convert the iterator to an array using the Array.from method.
We store the array of keys in a variable named keysArray.
We print the keys to the console using the console.log function to verify the conversion.

JavaScript Program

const myMap = new Map([
    ['one', 1],
    ['two', 2],
    ['three', 3]
]);

// Convert map to an array of keys
const keysArray = Array.from(myMap.keys());

// Print the keys
console.log('Keys:', keysArray);

Output

Keys: ['one', 'two', 'three']

2 Converting an Empty Map to an Array of Keys

We can also convert an empty map to an array of keys in JavaScript using the keys() method, which returns an empty array when the map is empty.

For example,

We start by declaring an empty map named emptyMap with string keys and integer values.
We use the keys method to get an iterator of the keys in the empty map.
We convert the iterator to an array using the Array.from method.
We store the array of keys in a variable named emptyKeysArray.
We print the keys to the console using the console.log function to verify that the array is empty.

JavaScript Program

const emptyMap = new Map();

// Convert empty map to an array of keys
const emptyKeysArray = Array.from(emptyMap.keys());

// Print the keys
console.log('Keys:', emptyKeysArray);

Output

Keys: []

3 Converting a Map to an Array of Keys After Adding Elements

We can convert a map to an array of keys in JavaScript after adding elements using the keys() method, which provides an updated iterator of all keys in the map.

For example,

We start by declaring an empty map named dynamicMap with string keys and integer values.
We add some key-value pairs to the map using the map's set method.
We use the keys method to get an iterator of the keys in the map after adding elements.
We convert the iterator to an array using the Array.from method.
We store the array of keys in a variable named dynamicKeysArray.
We print the keys to the console using the console.log function to verify the updated list of keys.

JavaScript Program

const dynamicMap = new Map();

// Add elements to the map
dynamicMap.set('one', 1);
dynamicMap.set('two', 2);
dynamicMap.set('three', 3);

// Convert map to an array of keys
const dynamicKeysArray = Array.from(dynamicMap.keys());

// Print the keys
console.log('Keys:', dynamicKeysArray);

Output

Keys: ['one', 'two', 'three']

Summary

In this tutorial, we learned How to Convert a Map to an Array of Keys in JavaScript language with well detailed examples.

◀ Previous Next ▶

JavaScript Tutorials

JavaScript How-Tos

How to Convert a Map to an Array of Keys in JavaScript - Step by Step Examples