Sort a Map by values in JavaScript

This post will discuss how to sort a Map by values in JavaScript.

Sorting a map by values in JavaScript is a task that involves ordering the key-value pairs of a map object based on the values. The value can be any JavaScript type, such as a number, a string, an array, or even another map. There are several methods to sort a map by values in JavaScript:

1. Using `Array.from()` and `sort()` function

This is a concise and functional way to create a new map from sorting an existing map by values. The Array.from() function converts an iterable object, such as a map, into an array. The Array.sort() function sorts an array according to a compare function that determines the order of the elements. We can use these functions to convert a map into an array of key-value pairs, sort the array by the values, and then create a new map from the sorted array. We can also use the spread syntax (…) in place of Array.from() function, which expands an iterable object into individual elements. The following code illustrates this:

// Create a map with some key-value pairs

const myMap = new Map();

myMap.set("b", 20);

myMap.set("a", 10);

myMap.set("c", 30);

// Map(3) { 'b' => 20, 'a' => 10, 'c' => 30 }

console.log(myMap);

// Convert the map into an array of entries

const array = Array.from(myMap);

// Alternatively, we can use the spread syntax

// const array = [...myMap];

// Sort the array by the values

const sortedArray = array.sort((a, b) => a[1] - b[1]);

// Create a new map from the sorted array

const sortedMap = new Map(sortedArray);

// Check the contents of the new map

// Map(3) { 'a' => 10, 'b' => 20, 'c' => 30 }

console.log(sortedMap);

Download Run Code

2. Using a custom class

This function creates a custom class that extends the Map object and adds functions to add and delete keys from the map. It also adds functions to sort and return the map in different formats. This method works well for maps that require more functionality and flexibility than the built-in Map object. The following code illustrates this:

class MyMap extends Map {

constructor(iterable) {

// call the Map constructor with the optional iterable argument

super(iterable);

}

add(key, value) {

// call the Map.prototype.set function

super.set(key, value);

// return the map object for chaining

return this;

}

delete(key) {

// call the Map.prototype.delete function

super.delete(key);

// return the map object for chaining

return this;

}

sorted(ascending = true) {

if (ascending) {

// sort the values by ascending order

return new Map([...this].sort((a, b) => a[1] - b[1]));

} else {

// sort the values by descending order

return new Map([...this].sort((a, b) => b[1] - a[1]));

}

// create a custom map

const myMap = new MyMap([['b', 20], ['a', 10], ['c', 30]]);

// MyMap(3) [Map] { 'b' => 20, 'a' => 10, 'c' => 30 }

console.log(myMap);

// get a sorted map by values

const sortedMap = myMap.sorted();

// Check the contents of the sorted map

// Map(3) { 'a' => 10, 'b' => 20, 'c' => 30 }

console.log(sortedMap);

Download Run Code

That’s all about sorting a Map by values in JavaScript.

Sort a Map by values in JavaScript

1. Using Array.from() and sort() function

2. Using a custom class

Share this:

1. Using `Array.from()` and `sort()` function