How can I use JavaScript to sort an object by its values?

General Discussions
, ,
1

Given a JavaScript object like this:

var list = {
  "you": 100, 
  "me": 75, 
  "foo": 116, 
  "bar": 15
};

Is there a way to JavaScript sort object properties based on their values, so I get a new object ordered like this?

{
  "bar": 15, 
  "me": 75, 
  "you": 100, 
  "foo": 116
}

What’s the cleanest way to achieve this while preserving the key-value structure?

2

From my experience, one of the cleanest and most straightforward methods to javascript sort object by its values is by using Object.entries(). You start by converting the object into an array of key-value pairs. After that, you use sort() to arrange them based on the values, and finally, use Object.fromEntries() to transform the sorted array back into an object. Here’s how it can be done:

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

const list = {
  "you": 100, 
  "me": 75, 
  "foo": 116, 
  "bar": 15
};

const sortedList = sortObjectByValue(list);
console.log(sortedList);

The sort() function compares the second item of each key-value pair (i.e., a[1] and b[1]), ensuring that the object is sorted in ascending order. The use of Object.fromEntries() is the final touch that converts the array back into an object.

It’s a super clean solution and perfect for most use cases when you want a quick, easy, and readable approach to javascript sort object.

3

While the previous method using Object.entries() is effective, if you’re someone who enjoys a more functional programming approach, you can combine reduce() with sort() to get even more control over how your javascript sort object solution works.

Here’s an enhancement of the previous approach using reduce() to manually iterate through the sorted array and build the object:

function sortObjectByValue(obj) {
  const sortedArray = Object.entries(obj).sort((a, b) => a[1] - b[1]);
  return sortedArray.reduce((acc, [key, value]) => {
    acc[key] = value;
    return acc;
  }, {});
}

const list = {
  "you": 100, 
  "me": 75, 
  "foo": 116, 
  "bar": 15
};

const sortedList = sortObjectByValue(list);
console.log(sortedList);

This method does the sorting first and then uses reduce() to construct the sorted object. It’s a bit more verbose, but it offers flexibility for adding custom logic if needed during the reduction phase. Plus, it’s an elegant functional solution that can be easily adapted.

4

If you prefer a more hands-on approach, or maybe you’re working with older JavaScript or just prefer avoiding higher-order functions, here’s a solution where we manually loop through the object using for...in. This approach gives a lot more control over the sorting process and keeps everything within the standard JavaScript syntax.

function sortObjectByValue(obj) {
  const keys = Object.keys(obj);
  keys.sort((a, b) => obj[a] - obj[b]);
  
  const sortedObj = {};
  keys.forEach(key => {
    sortedObj[key] = obj[key];
  });
  
  return sortedObj;
}

const list = {
  "you": 100, 
  "me": 75, 
  "foo": 116, 
  "bar": 15
};

const sortedList = sortObjectByValue(list);
console.log(sortedList);

In this version, we first use Object.keys() to get the array of keys. We then sort those keys by the values in the original object. After that, we loop through the sorted keys and create a new object with the correct order.

This method is simple, doesn’t require any additional array manipulation, and is perfect if you’re working in environments where you prefer sticking to traditional loops. It’s straightforward, and while it’s not as concise as the Object.entries() version, it still achieves the same goal of sorting a javascript sort object.