• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • VBA
  • About
You are here: Home / JavaScript / JavaScript Sorted Map – How to Sort a Map by Keys or Values

JavaScript Sorted Map – How to Sort a Map by Keys or Values

January 24, 2022 Leave a Comment

With JavaScript, we can easily sort a map by keys or get a sorted map by values using the JavaScript sort() function.

sorted_map_by_keys = new Map([...map_to_sort].sort((a, b) => String(a[0]).localeCompare(b[0])))

sorted_map_by_num_values = new Map([...map_to_sort].sort((a, b) => a[1] - b[1]))

sorted_map_by_str_values = new Map([...map_to_sort].sort((a, b) => String(a[1]).localeCompare(b[1])))

In JavaScript, the map object is useful for holding key-value pairs. By default, the map object orders the key-value pairs by the order of insertion.

Since the default order for a JavaScript map object is by order of insertion, we need to write our own code if we want to sort the map by the keys or the values to get a sorted map.

We can easily get a sorted map in our JavaScript code with the JavaScript sort() function.

Let’s say we have the following Map.

var map = new Map();
map.set('Apple','Good');
map.set('Pear','No');
map.set('Banana','Maybe');
map.set('Lemon','Yes');

We can get a sorted map by keys in our JavaScript code with the sort function applied to the keys in the following way.

sorted_map_by_keys = new Map([...map].sort((a, b) => String(a[0]).localeCompare(b[0])))

console.log(sorted_map_by_keys);

// Output
Map(4) {'Apple' => 'Good', 'Banana' => 'Maybe', 'Lemon' => 'Yes', 'Pear' => 'No'}

You can see now that the map is sorted in alphabetical order by keys.

How to Sort a Map by Values in JavaScript

As we saw above, it is easy to sort a map by the keys of the map. We can also sort a map by values easily in our Javascript code.

If your map has string values or a mix of string and numeric values, we can get a sorted map by string values in the following way using the JavaScript localecompare() function.

Let’s say we have the same map as above. Let’s sort the map by values.

sorted_map_by_str_values = new Map([...map].sort((a, b) => String(a[1]).localeCompare(b[1])))

console.log(sorted_map_by_str_values);

// Output
Map(4) {'Apple' => 'Good', 'Banana' => 'Maybe', 'Pear' => 'No', 'Lemon' => 'Yes'}

If your map only has numeric values, we should use a different sorting function.

Let’s say we have a different map with numeric values.

var map = new Map();
map.set('Apple',4);
map.set('Pear',2);
map.set('Banana',1);
map.set('Lemon',3);

To sort this map by its values, we will use a different sorting function for numeric values.

sorted_map_by_num_values = new Map([...map].sort((a, b) => a[1] - b[1]))

console.log(sorted_map_by_num_values);

// Output
Map(4) {'Banana' => 1, 'Pear' => 2, 'Lemon' => 3, 'Apple' => 4}

As you can see, the map is now sorted by values.

Hopefully this article has been useful for you to understand how to obtain a sorted map in your JavaScript code.

Other Articles You'll Also Like:

  • 1.  JavaScript atan2 – Find Arctangent of the Quotient of Two Numbers
  • 2.  Convert an Array to Set in JavaScript
  • 3.  Using JavaScript to Change the href of a Link
  • 4.  Using JavaScript to Scroll to Bottom of Div
  • 5.  JavaScript onkeyup – How to Use onkeyup Event with JavaScript
  • 6.  How to Repeat Character N Times in JavaScript
  • 7.  Using JavaScript to Reverse a Number
  • 8.  Using JavaScript to Get the Width of an Element
  • 9.  Clicking on an Image to Enlarge it in HTML
  • 10.  Using Javascript to Add Class to Element

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

The Programming Expert is a compilation of hundreds of code snippets to help you find solutions to your problems in Python, JavaScript, PHP, HTML, SAS, and more.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2022 · The Programming Expert · About · Privacy Policy