Sort Like a Pro: How to Sort an Object in JavaScript

how to sort objects in javascript feature image

Welcome to our comprehensive guide on sorting objects in JavaScript! If you’ve ever wondered how to sort an object by key or property in JavaScript, you’re in the right place. Sorting objects is a fundamental skill for any JavaScript developer, and in this blog post, we’ll show you the ins and outs of sorting objects with ease.

We’ll cover everything from basic sorting techniques to more advanced methods, ensuring that you have a solid understanding of how to manipulate objects in JavaScript. Whether you’re sorting an object by key, property, or any other criteria, we’ve got you covered. Let’s dive in and learn how to sort objects like a pro in JavaScript!

Sorting an object of objects in JavaScript is not directly possible because objects do not have an inherent order like arrays do. However, if you want to sort the keys of an object or sort the values of an object based on a specific property, you can achieve this by converting the object to an array, sorting the array, and then converting it back to an object if needed.

Let’s see 3 ways how we can sort an object in Javascript.

How To Sort An Object By Keys in Javascript

Method 1


let obj = {
  b: { name: 'John' },
  a: { name: 'jonny' },
  c: { name: 'Rox' }
};

let sortedKeys = Object.keys(obj).sort();
let sortedObj = {};

sortedKeys.forEach(key => {
  sortedObj[key] = obj[key];
});

console.log(sortedObj);

let obj = {

b: { name: 'John' },

a: { name: 'jonny' },

c: { name: 'Rox' }

};

let sortedKeys = Object.keys(obj).sort();

let sortedObj = {};

sortedKeys.forEach(key => {

sortedObj[key] = obj[key];

});

console.log(sortedObj);

Here as you can see the object has keys which are letters in the alphabet. So First what we are doing here is we create an array from all the keys in the object by using the Object.keys method. Then we can sort that array by using the sort() functionality. Then We can create a new object by iterating through the sortedKeys array by assigning the correct object related to the key as in the above. So final output will be an object that is sorted by its keys.

Method 2


let obj = {
  b: { name: 'John', age: 30 },
  a: { name: 'Jane', age: 25 },
  c: { name: 'Doe', age: 35 }
};

let sortedValues = Object.keys(obj).sort().reduce((acc, key) => {
  acc[key] = obj[key];
  return acc;
}, {});

console.log(sortedValues);

let obj = {

b: { name: 'John', age: 30 },

a: { name: 'Jane', age: 25 },

c: { name: 'Doe', age: 35 }

};

let sortedValues = Object.keys(obj).sort().reduce((acc, key) => {

acc[key] = obj[key];

return acc;

}, {});

console.log(sortedValues);

This is also a way that you can sort Javascript objects by keys. let’s see the above example step by step.

First, you convert your object to an array with object keys. Object.keys(obj) does that for you. Below is the array you got after converting object keys to an array.

1	['b', 'a', 'c']

After that, you can call the sort functionality for this array. Then the array will be sorted in ascending order.

['a', 'b', 'c']

1	['a', 'b', 'c']

Then finally you can use the reduce function to sort the object. You can get more ideas on how reduce works and some advanced scenarios that we use reduce from this Article. Basically what the reduce function will do is it will reduce your array into one single value. So here we want to return a single object from the reduce function. So this reduce function gets an initial value of an {} and returns an object which is a sorted object by iterating through the sorted array of keys.

How To Sort An Object by Values Based on a Property In Javascript


let obj = {
  b: { name: 'John', age: 30 },
  a: { name: 'Jane', age: 25 },
  c: { name: 'Doe', age: 35 }
};

let sortedValues = Object.entries(obj).sort((a, b) => a[1].age - b[1].age);

let sortedObj = sortedValues.<span class="hljs-title function_">reduce</span>(<span class="hljs-function">(<span class="hljs-params">acc, [key, value]</span>) =></span> { 
  acc[key] = value; 
<span class="hljs-keyword">  return</span> acc;
}, {});

console.log(sortedObj);

let obj = {

b: { name: 'John', age: 30 },

a: { name: 'Jane', age: 25 },

c: { name: 'Doe', age: 35 }

};

let sortedValues = Object.entries(obj).sort((a, b) => a[1].age - b[1].age);

let sortedObj = sortedValues.reduce((acc, [key, value]) => {

acc[key] = value;

return acc;

}, {});

console.log(sortedObj);

From Object.entries method will Convert the Object to an Array of Key-Value Pairs. This entries method will return an array of arrays, where each inner array represents a key-value pair from the original object. Below is what it looks like;

[

["b", { name: 'John', age: 30 }],

["a", { name: 'Jane', age: 25 }],

["c", { name: 'Doe', age: 35 }],

]

Then the next step is to sort the Array Based on the Property (e.g., age).

1	Object.entries(obj).sort((a, b) => a[1].age - b[1].age);

This will sort the Array of Key-Value Pairs according to the age in ascending order which is below Array.


[ 
 ["a", { name: 'Jane', age: 25 }],
 ["b", { name: 'John', age: 30 }],
 ["c", { name: 'Doe', age: 35 }],
]

[

["a", { name: 'Jane', age: 25 }],

["b", { name: 'John', age: 30 }],

["c", { name: 'Doe', age: 35 }],

]

Then finally Convert the Sorted Array Back to an Object. We can use Array.reduce for that. This reduce method iterates over the sorted entries array and builds a new object (sortedObj) by assigning each key-value pair to it. The sortedObj will now contain the original objects sorted by the specified property (age in this case):

{

a: { name: 'Jane', age: 25 },

b: { name: 'John', age: 30 },

c: { name: 'Doe', age: 35 },

}

So above we have discussed 2 ways that we can sort an object in Javascript. One way is we can sort objects by keys and another way is sorting the objects by value or property. In both ways, you can efficiently sort objects.

If you have any questions related to the sorting feel free to contact us via [email protected].