Sort a Map by Value in JavaScript

avatar

Borislav Hadzhiev

Last updated: Feb 22, 2022

banner

Photo from Unsplash

Sort a Map by value in JavaScript #

To sort a Map by value:

  1. Get an array of the Map's entries using the spread syntax (...)
  2. Call the sort() method on the array
  3. Pass the result to the Map() constructor
index.js
// ✅ When VALUES are NUMBERS const map2 = new Map([ ['three', 3], ['one', 1], ['two', 2], ]); // ✅ Sort by Value Ascending (low to high) const sortNumAsc = new Map([...map2].sort((a, b) => a[1] - b[1])); // 👇️ {'one' => 1, 'two' => 2, 'three' => 3} console.log(sortNumAsc); // ✅ Sort by Value Descending (high to low) const sortedNumDesc = new Map([...map2].sort((a, b) => b[1] - a[1])); // 👇️ {'three' => 3, 'two' => 2, 'one' => 1} console.log(sortedNumDesc); // ✅ When VALUES are STRINGS const map1 = new Map([ ['three', 'c'], ['one', 'a'], ['two', 'b'], ]); // ✅ Sort by Value Ascending (low to high) const sortedAsc = new Map([...map1].sort((a, b) => (a[1] > b[1] ? 1 : -1))); // 👇️ {'one' => 'a', 'two' => 'b', 'three' => 'c'} console.log(sortedAsc); // ✅ Sort by Value Descending (high to low) const sortedDesc = new Map([...map1].sort((a, b) => (a[1] > b[1] ? -1 : 1))); // 👇️ {'three' => 'c', 'two' => 'b', 'one' => 'a'} console.log(sortedDesc);

The code snippet shows how to sort a Map by value in ascending and descending order, for both string and number values.

The Map object remembers the insertion order of the keys.

This is why we used the Map() constructor to create a new Map with the correct order.

The spread syntax (...) allows us to get an array containing the Map's entries.

index.js
const map2 = new Map([ ['three', 3], ['one', 1], ['two', 2], ]); // 👇️ [['three', 3], ['one', 1], ['two', 2]] console.log([...map2]);

The next step is to call the sort() method on the array, passing it a function.

The function we passed to the sort() method defines the sort order.

The function gets called with 2 parameters. In our example - 2 arrays containing key-value pairs.

index.js
// ✅ When VALUES are NUMBERS const map2 = new Map([ ['three', 3], ['one', 1], ['two', 2], ]); // ✅ Sort by Value Ascending (low to high) const sortNumAsc = new Map([...map2].sort((a, b) => a[1] - b[1])); // 👇️ {'one' => 1, 'two' => 2, 'three' => 3} console.log(sortNumAsc);

The sort() method uses the following logic to sort the elements in the array:

  • If the return value of the compare function is greater than 0, then sort b before a.

  • If the return value of the compare function is less than 0, then sort a before b.

  • If the return value of the compare function is equal to 0, keep the original order of a and b.

In the code snippet above:

  • If the second element (the value) in the a array minus the second element in the b array returns a value greater than 0, we sort b before a
  • If the subtraction returns a negative number, we sort a before b.
  • If the subtraction returns 0, we keep the original order of a and b.

If you need to sort in descending the Map by value in descending order, just subtract the value of a from the value of b.

index.js
// ✅ When VALUES are NUMBERS const map2 = new Map([ ['three', 3], ['one', 1], ['two', 2], ]); // ✅ Sort by Value Descending (high to low) const sortedNumDesc = new Map([...map2].sort((a, b) => b[1] - a[1])); // 👇️ {'three' => 3, 'two' => 2, 'one' => 1} console.log(sortedNumDesc);

We used the same approach to sort a Map by string values.

index.js
// ✅ When VALUES are STRINGS const map1 = new Map([ ['three', 'c'], ['one', 'a'], ['two', 'b'], ]); // ✅ Sort by Value Ascending (low to high) const sortedAsc = new Map([...map1].sort((a, b) => (a[1] > b[1] ? 1 : -1))); // 👇️ {'one' => 'a', 'two' => 'b', 'three' => 'c'} console.log(sortedAsc);

This time we check if the UTF-16 code unit value of the value in the a array is greater than the value in the b array and return 1 if it is and -1 otherwise.

If we return 1 (greater than 0), then we sort b before a.

You could change the ordering to descending by changing the places of 1 and -1.

index.js
// ✅ When VALUES are STRINGS const map1 = new Map([ ['three', 'c'], ['one', 'a'], ['two', 'b'], ]); // ✅ Sort by Value Descending (high to low) const sortedDesc = new Map([...map1].sort((a, b) => (a[1] > b[1] ? -1 : 1))); // 👇️ {'three' => 'c', 'two' => 'b', 'one' => 'a'} console.log(sortedDesc);
I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.