How Javascript Sort Map? Explain in 3 Methods

JavaScript is a versatile programming language that allows developers to work with different data structures, including maps. So, in this article, we will explore multiple methods to sort a map in JavaScript, providing step-by-step guidance and code examples to help you master the process.

Sorting a map can be a crucial task in various scenarios, ensuring data is organized and easily accessible. Before jumping into the different sorting methods let’s grasp the fundamental concepts of maps in JavaScript.

What is Map?

A map, also known as an associative array or dictionary, is a collection of elements where each element is stored as a key-value pair.

The keys are unique and used to access the corresponding values. In JavaScript, you can create a map using the Map() constructor, and it allows any data type to be used as keys.

For example:

// Creating a map in JavaScript
const myMap = new Map();
myMap.set("JAVASCRIPT", 3);
myMap.set("JAVA", 5);
myMap.set("PHP", 2);

This given example program demonstrates the creation of a map with three key-value pairs, representing the quantities of programming lanaguages.
The keys are strings (“JAVASCRIPT”, “JAVA”, and “PHP”), and the values are numbers (3, 5, and 2).

What is JavaScript sort map?

In Javascript, a sorting map is a collection of key-value pairs, wherein keys are unique and sorted based on the values.
Unlike regular objects, a Sort Map guarantees the order of its elements, making it ideal for scenarios that require data organization.

Now, let’s explore various methods to sort this map efficiently.

How to sort map in javascript

Map in Javascript is an object that stores key-value pairs. Primarily, the order of items in a map is insertion order.

However, if we want to sort the map based on certain criteria, you can use the following methods and techniques:

Method 1: Use Array to Sort the Map

One of the methods we can utilize is to convert the map into an array of key-value pairs, then sort array based on the key-value pairs and create a new map from the sorted array.

See the example program below:

const originalMap = new Map([
  ['Javascript', 3],
  ['PHP', 2],
  ['JAVA', 1],
]);

// Convert map to array of key-value pairs
const sortedArrayByKey = Array.from(originalMap);

// Sort array based on keys
sortedArrayByKey.sort((a, b) => a[0].localeCompare(b[0]));

// Create a new map from the sorted array
const sortedMapByKey = new Map(sortedArrayByKey);

console.log(sortedMapByKey);

Output:

{JAVA: 1, Javascript: 3, PHP: 2}

Apart from it, we can sort based on the values:

const originalMap = new Map([
  ['Javascript', 3],
  ['PHP', 2],
  ['JAVA', 1],
]);

// Convert map to array of key-value pairs
const sortedArrayByValue = Array.from(originalMap);

// Sort array based on values
sortedArrayByValue.sort((a, b) => a[1] - b[1]);

// Create a new map from the sorted array
const sortedMapByValue = new Map(sortedArrayByValue);

console.log(sortedMapByValue);

Output:

{JAVA: 1, Javascript: 3, PHP: 2}

Method 2: Sorting map in Place

Another approach is sorting pa in place, in this case, we can sort the original map directly without creating a new one.
Obviously, we can’t directly sort the map in place however we can clear the original map and then set sorted key value pairs back into it.

Study the example program below:

const originalMap = new Map([
  ['JavaScript', 3],
  ['PHP', 2],
  ['JAVA', 1],
]);

const sortedArrayByKey = Array.from(originalMap);
sortedArrayByKey.sort((a, b) => a[0].localeCompare(b[0]));

// Clear the original map
originalMap.clear();

// Set the sorted key-value pairs back into the map
sortedArrayByKey.forEach(([key, value]) => originalMap.set(key, value));

console.log(originalMap);

Result:

{JAVA: 1, JavaScript: 3, PHP: 2}

It is important to note that JavaScript maps are ordered by insertion, so the keys will be sorted in ascending order when using localeCompare.

For numerical values, you can use the comparison function a[1] – b[1].

Note: The insertion order behavior of maps is relatively new, so if you need to support older browsers, consider using an array or another data structure for sorting instead.

Method 3: Sort Map using Loadash library

Also, we can utilize Lodash to sort map, it is a popular JavaScript utility library that provides a convenient sortBy() function to sort objects based on specific properties.
To use Lodash for sorting maps, make sure to include the library in your project.

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

// Your original map
const myMap = new Map([
  ['JAVASCRIPT', 3],
  ['JAVA', 1],
  ['PHP', 2],
  ['PYTHON', 4]
]);

// Sorting the map by keys using Lodash
const sortedMapByKeys = new Map(_.sortBy([...myMap.entries()]));

// Sorting the map by values using Lodash
const sortedMapByValues = new Map(_.sortBy([...myMap.entries()], ([key, value]) => value));

// Display the sorted maps
console.log('Sorted Map by Keys:');
for (const [key, value] of sortedMapByKeys) {
  console.log(key, value);
}

console.log('Sorted Map by Values:');
for (const [key, value] of sortedMapByValues) {
  console.log(key, value);
}

FAQs

Additional Resources

• How to use String.valueOf() JavaScript?
• How to use the JavaScript array every() Method?

Conclusion

In conclusion, sorting a map in JavaScript is a valuable skill for any developer working with complex data structures.

In this article, we explored various methods to sort a map efficiently, ranging from simple conversion to arrays and using built-in array methods to leveraging the power of the Lodash library.

Understanding the fundamentals and using the appropriate sorting technique for your specific use case will result in well-organized and optimized code.

Glay Eliver

Programmer & Technical Writer at PIES IT Solution

Glay Eliver is a programmer and writer at PIES IT Solution, author of over 600 tutorials at itsourcecode.com. Specializes in JavaScript tutorials, Microsoft Office how-tos (Excel, Word, PowerPoint), and Python error debugging covering ImportError, TypeError, AttributeError, ModuleNotFoundError, and JavaScript ReferenceError. Authored several of the site’s highest-traffic Excel and MS Office reference articles.

Expertise: JavaScript · MS Excel · MS Word · MS PowerPoint · Python · Python ImportError · Python TypeError · Python AttributeError · ModuleNotFoundError · JavaScript ReferenceError · Pygame
 · View all posts by Glay Eliver →