Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to sort a map in JavaScript?
In JavaScript, Map is a data structure that stores values as key-value pairs. Maps preserve insertion order, but you can sort them by converting to an array, sorting, and creating a new Map.
Syntax
To sort a Map in JavaScript, use this approach:
var sortedMap = new Map([...originalMap].sort(compareFunction));
Where compareFunction defines the sorting criteria for the key-value pairs.
Sorting by Keys (Ascending)
Here's how to sort a Map by keys in ascending order:
<!DOCTYPE html>
<html>
<body>
<h3>Sorting Map by Keys (Ascending)</h3>
<p id="original"></p>
<p id="sorted"></p>
<script>
// Create original map
var myMap = new Map([
[20, 'twenty'],
[9, 'nine'],
[3, 'three'],
[13, 'thirteen']
]);
// Display original order
var original = "Original: ";
for (var [key, value] of myMap) {
original += key + " ";
}
document.getElementById("original").innerHTML = original;
// Sort by keys (ascending)
function compareByKey(a, b) {
return a[0] - b[0];
}
var sortedMap = new Map([...myMap].sort(compareByKey));
// Display sorted order
var sorted = "Sorted: ";
for (var [key, value] of sortedMap) {
sorted += key + " ";
}
document.getElementById("sorted").innerHTML = sorted;
</script>
</body>
</html>
Sorting by Keys (Descending)
To sort in descending order, reverse the comparison:
<!DOCTYPE html>
<html>
<body>
<h3>Sorting Map by Keys (Descending)</h3>
<p id="result"></p>
<script>
var myMap = new Map([
[20, 'twenty'],
[9, 'nine'],
[3, 'three'],
[13, 'thirteen']
]);
// Sort by keys (descending)
function compareByKeyDesc(a, b) {
return b[0] - a[0];
}
var sortedMap = new Map([...myMap].sort(compareByKeyDesc));
var result = "Descending order: ";
for (var [key, value] of sortedMap) {
result += key + " ";
}
document.getElementById("result").innerHTML = result;
</script>
</body>
</html>
Sorting by Values
You can also sort a Map by its values:
var myMap = new Map([
['apple', 5],
['banana', 2],
['orange', 8],
['grape', 1]
]);
console.log("Original Map:");
for (var [key, value] of myMap) {
console.log(key + ": " + value);
}
// Sort by values (ascending)
function compareByValue(a, b) {
return a[1] - b[1];
}
var sortedByValue = new Map([...myMap].sort(compareByValue));
console.log("\nSorted by values:");
for (var [key, value] of sortedByValue) {
console.log(key + ": " + value);
}
Original Map: apple: 5 banana: 2 orange: 8 grape: 1 Sorted by values: grape: 1 banana: 2 apple: 5 orange: 8
How It Works
The sorting process involves three steps:
-
Spread operator
[...myMap]converts the Map to an array of [key, value] pairs - Array.sort() sorts the array using the comparison function
- Map constructor creates a new Map from the sorted array
Comparison Functions
| Sort Type | Compare Function | Result |
|---|---|---|
| Keys Ascending | return a[0] - b[0] |
Smaller keys first |
| Keys Descending | return b[0] - a[0] |
Larger keys first |
| Values Ascending | return a[1] - b[1] |
Smaller values first |
| Values Descending | return b[1] - a[1] |
Larger values first |
Conclusion
JavaScript Maps can be sorted by converting them to arrays, using Array.sort() with a custom comparison function, and creating a new Map. This approach works for sorting by keys, values, or any custom criteria.
Updated on: 2026-03-15T23:19:01+05:30
2K+ Views
Advertisements