Blog

To sort map by value in JavaScript –

1. Use the Array.from() method to get the array of map entries.
2. Call the sort() method on this array, passing in a callback function that compares the entry values.
3. Re-create the map with the sorted entries using the fromEntries() method.

Sort Map By Value In JavaScript When Value Is Integer

When the values in the map are integers, you can use the following code to sort them by value:

let map = new Map();

map.set('Foo', 4);

map.set('Bar', 1);

map.set('Baz', 3);

// Get entries from map as array and sort them by value

let sortedMapEntries = Array.from(map.entries()).sort((a, b) => a[1] – b[1]);

// Re-create map with sorted entries

let sortedMap = new Map(sortedMapEntries);

console.log(sortedMap); // { 1 => "Bar", 3 => "Baz", 4 => "Foo" }

To sort in descending order, simply reverse the callback function:

let map = new Map();

map.set('Foo', 4);

map.set('Bar', 1);

map.set('Baz', 3);

// Get entries from map as array and sort them by value in descending order

let sortedMapEntries = Array.from(map.entries()).sort((a, b) => b[1] – a[1]);

// Re-create map with sorted entries

let sortedMap = new Map(sortedMapEntries);

console.log(sortedMap); // { 4 => "Foo", 3 => "Baz", 1 => "Bar" }

In the above code, we first used the Array.from() method to get an array of entries from the map.

We then called the sort() method on this array, passing in a callback function that compared the entry values. When comparing values, we used the subtraction operator (a[1] – b[1]) to get the difference between the values (1 is the index of the value of map). If the difference is positive, it means that the value of “a” is greater than “b”, so we put “b” before “a”. If the difference is negative, it means that the value of “b” is greater than “a”, so we put “a” before “b”.

This callback function will sort the entries in ascending order. To sort in descending order, we simply reversed the callback function (b[1] – a[1]).

Finally, we recreated the map by passing the sorted value to a new Map constructor.

Note that Map retains the order of the entries based on when they were added to the Map.

Sort Map By Value In JavaScript When Value Is String

When sorting by value is not possible because the value data type is a string, you can use the following code:

let map = new Map();

map.set('Foo', 'b');

map.set('Bar', 'a');

map.set('Baz', 'c');

// Get entries from map as array and sort them by value in ascending order

let sortedMapEntries = Array.from(map.entries()).sort((a, b) => a[1] > b[1] ? 1:-1);

// Re-create map with sorted entries

let sortedMap = new Map(sortedMapEntries);

console.log(sortedMap); // { "Bar" => "a", "Foo" => "b", "Baz" => "c" }

To sort in descending order, simply reverse the callback function:

let map = new Map();

map.set('Foo', 'b');

map.set('Bar', 'a');

map.set('Baz', 'c');

// Get entries from map as array and sort them by value in descending order

let sortedMapEntries = Array.from(map.entries()).sort((a, b) => a[1] > b[1] ? -1:1);

// Re-create map with sorted entries

let sortedMap = new Map(sortedMapEntries);

console.log(sortedMap); // { "Baz" => "c", "Foo" => "b", Bar" => "a" }

In the code above, we used the sort() method to sort the array of entries by value.

The callback function that we passed to sort() compared the entry values (a and b) using the greater than operator (a[1]> b[1]). If “a” is greater than “b”, it returns a positive number, which will put “b” before “a”. If “b” is greater than “a”, it returns a negative number, which will put “a” before “b”.

This callback function will sort map entries in ascending order. To sort in descending order, we simply reversed the callback function (a[1]> b[1] ? -1: 1).

Finally, we recreated the map by passing the sorted value to a new Map constructor.

Sort Map By Value In JavaScript When Value Is Object

When the value data type is an object, you can use the following code:

let map = new Map();

map.set('Foo', {id: 1, name: 'Foo'});

map.set('Bar', {id: 2, name: 'Bar'});

map.set('Baz', {id: 3, name: 'Baz'});

// Get entries from map as array and sort them by id in ascending order

let sortedMapEntries = Array.from(map.entries()).sort((a, b) => a[[1]].id – b[[1]].id);

// Re-create map with sorted entries

let sortedMap = new Map(sortedMapEntries);

console.log(sortedMap); // { "Foo" => { id: 1, name: "Foo" }, "Bar" => { id: 2, name: "Bar" }, "Baz" => { id: 3, name: "Baz" } }

In the code above, we used the sort() method to sort the array of entries by id.

The callback function that we passed to sort() compared the entry values (a and b) using the subtraction operator (a[[1]].id – b[[1]].id). If the difference is positive, it means that the value of “a” is greater than “b”, so we put “b” before “a”. If the difference is negative, it means that the value of “b” is greater than “a”, so we put “a” before “b”.

This callback function will sort the entries in ascending order. To sort in descending order, we simply reversed the callback function (b[[1]].id – a[[1]].id).

Finally, we recreated the map by passing the sorted value to a new Map constructor.

Conclusion

In this article, we showed how to sort map by value in JavaScript.

First, we sorted the entries of a map by value using the built-in sort() method.

Then, we demonstrated how to sort by value when the value data type is a string or object.

Finally, we created a new map by passing the sorted value to the Map constructor.

I hope you found this article helpful. Thank you for reading!