How to sort an array of objects by the value of a property in JavaScript

OpenJavaScript 0
Reading Time: 2 minutes 🕑

Last updated: May 6, 2022.

You may sometimes come across the need to sort objects contained in an array by the value of one of the object properties.

For example, imagine you want to sort the following array of objects by the value of name:

/* An array of objects */

const users = [
    { name: "Freddie", job: "Singer", id: 4},
    { name: "Roger", job: "Drummer", id: 2},
    { name: "John", job: "Bassist", id: 1},
    { name: "Brian", job: "Guitarist", id: 3}
]

For this, you can use the sort() array method.

Table of contents

How the sort() array method works

This sort() method accepts a function in which you can specify how array items should be sorted.

Inside this function, two parameters are available. These are often called a and b for simplicity (but this is just a naming convention).

These parameters represent each pairwise comparison between array values that sort() will make. How values are sorted is determined by making a calculation using a and b and returning the result.

If the result is a positive (e.g. a-b results in a positive number), then the greater value (a in the previous example) is pushed ahead of the lesser value in the array. If it is negative, (e.g. a-b results in a negative number), then the greater value (b this time) is not placed ahead.

For an array of values, this technique could be applied directly. But an array of objects requires a little more work.

The trick is to make a logical comparison between the value of a.name and b.name.

Sorting the objects

By alphabetical value

Alphabetical values that come later in the alphabet are considered greater (e.g. "y" > "z" returns false).

So to sort the objects in the array alphabetically by the value of name, you can check if a.name is greater than b.name (i.e. a.name is later in the alphabet than b.name). If so, return a positive value to make sort() push object a past object b in the array. Otherwise, return a negative value.

/* Sorting objects alphabetically on a property value */

const users = [
    { name: "Freddie", job: "Singer", id: 4},
    { name: "Roger", job: "Drummer", id: 2},
    { name: "John", job: "Bassist", id: 1},
    { name: "Brian", job: "Guitarist", id: 3}
]

const sortedArray = users.sort(function(a,b) {
    if (a.name > b.name) {
        return 1
    } else {
        return -1
    }
})

console.log(sortedArray);
// [
//     { name: "Freddie", job: "Singer", id: 4},
//     { name: "Roger", job: "Drummer", id: 2},
//     { name: "John", job: "Bassist", id: 1},
//     { name: "Brian", job: "Guitarist", id: 3}
// ]

Make it a one-liner!

Using everything modern JavaScript has to offer, the syntax for alphabetical sorting can be greatly reduced.

In the below code snippet:

  • The function passed in the .sort() is replaced by an arrow function
  • For the conditional statement, the ternary operator replaces if...else
  • An implicit, one-line return is used by dropping {} from the new arrow function
/* Shorthand for sorting alphabetically */

const sortedArray = users.sort((a,b) =>  (a.name > b.name) ? 1 : -1);

By numeric value

For numeric sorting, there is no need to create return values. The calculation can be made directly by comparing the value of a.id and b.id:

/* Sorting objects by numeric value of a property */

const sortedArray = users.sort(function(a,b) {
    return a.id-b.id;
})

console.log(sortedArray);
// [
//     { name: "John", job: "Bassist", id: 1},
//     { name: "Roger", job: "Drummer", id: 2},
//     { name: "Brian", job: "Guitarist", id: 3},
//     { name: "Freddie", job: "Singer", id: 4}
// ]