
How to sort a map in JavaScript
October 30, 2023
In JavaScript, the Map
object holds key-value pairs and remembers the original insertion order of the keys. If you want to sort a map based on its keys or values, you'll need to transform it into an array, sort the array, and then transform it back to a map. This guide will walk you through this process.
Understanding the basics
Before sorting, let's grasp the basic behavior of a JavaScript Map
:
let fruits = new Map(); fruits.set("3", "apple"); fruits.set("1", "banana"); fruits.set("2", "cherry"); for (let [key, value] of fruits) { console.log(key, value); } // Output: // 3 apple // 1 banana // 2 cherry
As you can see, the Map
preserves the order of key insertion.
The easiest way to sort a map is to convert it into an array, use the built-in Array.sort
method, then convert it back into a map.
How to sort by keys
To sort the map by keys:
const sortedByKey = new Map([...fruits.entries()].sort()); for (let [key, value] of sortedByKey) { console.log(key, value); } // Output: // 1 banana // 2 cherry // 3 apple
How to sort by values
To sort the map by its values:
const sortedByValue = new Map([...fruits.entries()].sort((a, b) => a[1].localeCompare(b[1]))); for (let [key, value] of sortedByValue) { console.log(key, value); } // Output: // 3 apple // 1 banana // 2 cherry
Advanced sorting with a custom comparator
You might sometimes need more advanced sorting, like numerical sorting for the values or more complex comparisons. A custom comparator function can be passed to the sort()
method:
fruits.set("4", "42"); fruits.set("5", "5"); const numericalValueSort = new Map([...fruits.entries()].sort((a, b) => Number(a[1]) - Number(b[1]))); for (let [key, value] of numericalValueSort) { console.log(key, value); } // Output: // 5 5 // 1 banana // 2 cherry // 3 apple // 4 42
Performance Considerations
When sorting a Map
, especially with larger datasets, there are performance implications to consider:
- Time Complexity of Sorting: The
sort()
method has an average and worst-case time complexity of O(n log n), wheren
is the number of elements. - Cost of Map Transformations: Converting a
Map
to an array and back has a linear time complexity, O(n). These costs can add up with large datasets.
Using sorted maps with external tools
Once sorted, external tools like Basedash can help visualize or further process the data (if you’re storing it in a SQL database). With Basedash, you can generate an admin panel, share it with your team, or create charts and dashboards.
Limitations and considerations
Remember, JavaScript's Map
isn't primarily designed for sorting but for order preservation of key insertions. If you find yourself frequently sorting maps, reconsider your data structure or use optimized libraries.
Ship faster, worry less with Basedash
How to Sort Object Array by Boolean Property in JavaScript
Max Musing
How to Truncate Date in MySQL
Max Musing
What is evented I/O for V8 JavaScript?
Max Musing
Replace + with Space in JavaScript
Max Musing
How to Sort JavaScript Objects by Key
Max Musing
How to Scroll Automatically to the Bottom of a Page in JavaScript
Max Musing