JavaScript Program to Split Map Keys and Values into Separate Arrays

In this article, we are going to learn about splitting map keys and values into separate arrays by using JavaScript. Splitting map keys and values into separate arrays refers to the process of taking a collection of key-value pairs stored in a map data structure and separating the keys and values into two distinct arrays. The map is a data structure that allows you to store pairs of elements, where each element consists of a unique key and an associated value.

There are several methods that can be used to Split map keys and values into separate arrays, which are listed below:

• Using Array from() Method
• Using forEach() Method
• Using Spread Operator
• Using for-of Loop

We will explore all the above methods along with their basic implementation with the help of examples.

Approach 1: Using Array from() Method

In this approach, we are using Array.from() to transform keys and values into separate arrays. This facilitates the independent handling of keys and values for subsequent operations.

Syntax:

let keys = Array.from(map.keys());
let values = Array.from(map.values());

Example: In this example, we are using Array.form() method to separate keys and values from our given map.

Javascript

const map = new Map([
    ["India", 1],
    ["USA", 2],
    ["Russia", 3],
    ["Canada", 4]
]);

let keys = Array.from(map.keys());
let values = Array.from(map.values());

console.log("Keys are :", keys);
console.log("Values are :", values);

Output

Keys are : [ 'India', 'USA', 'Russia', 'Canada' ]
Values are : [ 1, 2, 3, 4 ]

Approach 2: Using forEach() Method

In this approach, we are Iterate through Map using forEach(). Extract keys and values separately during iteration, pushing them into separated arrays.

Syntax:

language.forEach((value, key) => {
    keys.push(key);
    values.push(value);
});

Example: In this approach we are using the above-explained approach.

Javascript

const language = new Map([
    ["HTML", 1],
    ["CSS", 2],
    ["JavaScript", 3]
]);

let keys = [];
let values = [];

language.forEach((value, key) => {
    keys.push(key);
    values.push(value);
});

console.log(keys);
console.log(values);

Output

[ 'HTML', 'CSS', 'JavaScript' ]
[ 1, 2, 3 ]

Approach 3: Using Spread Operator

In this approach, we are using the spread operator to expand Map entries into an array. Employ .map() to extract keys and values separately,

Syntax:

let entries = [...map.entries()];
let keys = entries.map(([key, value]) => key);
let values = entries.map(([key, value]) => value);

Example: In this example, a Map contains cricket player names and their respective jersey number. Using the spread operator, convert Map entries to an array. Extract keys (player names) and values (jersey number) separately using .map()

Javascript

const map = new Map([
    ["Virat kohli", 18],
    ["Rohit sharma", 45],
    ["M.s Dhoni", 7]
]);

let entries = [...map.entries()];
let keys = entries.map(([key, value]) => key);
let values = entries.map(([key, value]) => value);

console.log(keys);
console.log(values);

Output

[ 'Virat kohli', 'Rohit sharma', 'M.s Dhoni' ]
[ 18, 45, 7 ]

Approach 4: Using for of loop

In this approach, we are using a for…of loop, iterate through Map entries. Extract keys and values by destructuring each entry, appending them to separate arrays.

Syntax:

for ( variable of iterableObjectName) {
   ...
}

Example: In this example we are using the above-explained approach.

Javascript

const map = new Map([
    [1, "HTML"],
    [2, "CSS"],
    [3, "JavaScript"]
]);

let keys = [];
let values = [];

for (const [key, value] of map) {
    keys.push(key);
    values.push(value);
}

console.log(keys);
console.log(values);

Output

[ 1, 2, 3 ]
[ 'HTML', 'CSS', 'JavaScript' ]