How to sort an object in ascending order by the value of a key in JavaScript?

Sorting an object in ascending order by the value of a key is a common task in JavaScript. Objects are data structures, which are a collection of key-value pairs. Since objects in JavaScript are unordered collections, sorting them directly is not possible. This article will guide you on how to sort an object in ascending order by the value of a key in JavaScript.

Understanding the Concept

Suppose we have the following object:

const obj = {
   "sub1": 56,
   "sub2": 67,
   "sub3": 98,
   "sub4": 54,
   "sub5": 87
};

We are required to write a JavaScript function that takes in one such object. Then our function should sort the object in ascending order of the values present in the object. And then at last, we should return the object thus formed.

Algorithm For Sorting Object Keys

Here is the algorithm to sort an object by the value of a specific key:

• Create an object with subjects and scores.
• Define a function to sort the subjects based on scores.
• Get the keys of the object and sort them.
• Create a new object with the sorted keys and their scores.
• Return and display the sorted object.

Method 1: Using Object.keys() and Array.sort()

The following is a simple code implementation for sorting an object in ascending order by the value of a key in JavaScript.

const obj = {
   "sub1": 56,
   "sub2": 67,
   "sub3": 98,
   "sub4": 54,
   "sub5": 87
};

const sortObject = obj => {
   const sorter = (a, b) => {
       return obj[a] - obj[b];
   };
   const keys = Object.keys(obj);
   keys.sort(sorter);
   const res = {};
   keys.forEach(key => {
       res[key] = obj[key];
   });
   return res;
};

console.log(sortObject(obj));

{ sub4: 54, sub1: 56, sub2: 67, sub5: 87, sub3: 98 }

Method 2: Using Object.entries() and Array.sort()

A more concise approach using Object.entries() to convert the object to key-value pairs, sort them, and reconstruct the object:

const obj = {
   "sub1": 56,
   "sub2": 67,
   "sub3": 98,
   "sub4": 54,
   "sub5": 87
};

const sortObjectByValue = obj => {
   return Object.fromEntries(
       Object.entries(obj).sort(([,a], [,b]) => a - b)
   );
};

console.log(sortObjectByValue(obj));

{ sub4: 54, sub1: 56, sub2: 67, sub5: 87, sub3: 98 }

Code Explanation

Here is the code explanation for the above implementations:

• Method 1: We extract keys using Object.keys(), sort them based on their corresponding values using a custom comparator function, then reconstruct the object in sorted order.
• Method 2: We use Object.entries() to get key-value pairs, sort by values using array destructuring [,a] and [,b], then use Object.fromEntries() to reconstruct the sorted object.
• The comparator function a - b ensures ascending order. For descending order, use b - a.
• Both methods create a new object rather than modifying the original, preserving the original data.

Comparison

Conclusion

Both methods effectively sort objects by value in ascending order. The Object.entries() approach is more concise and modern, while the Object.keys() method offers better browser compatibility for older environments.