How to Sort a Map in JavaScript?

Sorting a Map in JavaScript involves ordering its key-value pairs based on the keys or values. Since Maps maintain the insertion order, you can't directly sort them like arrays. Instead, you'll need to convert the Map into an array, sort it, and then convert it back into a Map.

Below are the approaches to sorting a map in JavaScript:

Approach 1: Using Map.entries() and sort() Method

The Map.entries() and sort() method approach involves converting a Map's entries into an array, sorting the array by keys or values with sort(), and then converting the sorted array back into a new Map.

Syntax:

[...map1.entries()] 
# this will generate a multi-dimensional array 
# out of the key-value pairs stored in the map

Example 1: In this example we initializes a Map, adds elements using set(), sorts the Map's entries by keys with sort(), and then prints only the keys of the sorted Map.

// Initializing and inserting values into Map
let map1 = new Map([
    [4, 2],
    [2, 3],
]);

// Inserting new element into map using set() method
map1.set(3, 10);
console.log("Our map :");
console.log(map1);

// Adding the sorting logic
map1 = new Map([...map1.entries()].sort());

// Separately printing only keys
for (let [key, value] of map1) {
    console.log(key, " ");
}

Our map :
Map(3) { 4 => 2, 2 => 3, 3 => 10 }
2  
3  
4  

Approach 2: Using Array.from() and sort() Method

The Array.from() and sort() approach involves converting a Map to an array using Array.from(), then sorting the array with the sort() method based on keys or values. Finally, the sorted array is converted back into a new Map.

Example: In this example,, we are using Array.from() and sort() Method

let map1 = new Map([
    [4, 2],
    [2, 3],
]);

// Inserting new element into map using set() method
map1.set(3, 10);
console.log(map1);

// Adding the custom sorting logic to sort
// by decreasing values of keys
const newMap = Array.from(map1).sort((a, b) => a[1] - b[1]);

const sortedMap = new Map(newMap);
console.log(sortedMap);

Map(3) { 4 => 2, 2 => 3, 3 => 10 }
Map(3) { 4 => 2, 2 => 3, 3 => 10 }

Approach 3: Using Lodash's _.sortBy function

The Lodash _.sortBy function approach sorts a Map by converting it into an array using Array.from(), applying _.sortBy for custom sorting by keys or values, and converting the sorted array back into a Map for further use.

Example: In this example we initializes a Map, adds a new element, and sorts it by values in ascending order using Lodash's _.sortBy function. The sorted Map is then printed, showing the reordered entries.

// Importing the lodash library
const _ = require('lodash');

let map1 = new Map([
    ['banana', 3],
    ['apple', 5],
    ['orange', 2],
]);

map1.set('grape', 10); // Adding a new element to the map

console.log("Original map:");
console.log(map1);

// Sorting the map by increasing values of keys using lodash
const sortedMap = new Map(_.sortBy(Array.from(map1), [(entry) => entry[1]]));

console.log("Sorted map:");
console.log(sortedMap);

Output:

Sorted map: Map {   'orange' => 2,   'banana' => 3,   'apple' => 5,   'grape' => 10 }