Let's find out how to sort an array of objects by a property value

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

Let’s say we have an array of books (objects) like this

const books = [
    {
        author: 'Erich Gamma',
        published: 782708400000, // October 21, 1994
        title: 'Design Patterns',
    },
    {
        author: 'Robert C. Martin',
        published: 1217559600000, // August 1, 2008
        title: 'Clean Code',
    },
    {
        author: 'Robert C. Martin',
        published: 1304478000000, // May 4, 2011
        title: 'The Clean Coder',
    },
    {
        author: 'Martin Fowler',
        published: 915159600000, // January 1, 1999
        title: 'Refactoring',
    },
    {
        author: 'David Thomas',
        published: 938746800000, // October 1, 1999
        title: 'The Pragmatic Programmer',
    },
];

Note: By the way excellent list of books, highly recommended ☝️

Now let’s say that you probably want to render this list of books, but first you want to order it by the value of one of the books (objects) properties.

For example you want to order it by the title in alphabetical order

To do this can use the sort method of the Array, this method sorts the elements of an array in place and returns the sorted array

Note: This method mutates the array

The default sort order is ascending, built upon converting the array elements into strings and then comparing their values

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();

console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();

console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

This method can also take an optional parameter compareFunction, that will be used to define the sort order, this function will take as parameters two object, the first and second element for comparison.

For our case, we will be using a comparreFunction and to simplify our elements we will call them a and b

So, let’s sort the array of books by title in ascending alphabetical order

books.sort((a, b) => (a.title > b.title) ? 1 : -1);

console.log(books);
// expected output: Array[
//     {
//         author: 'Robert C. Martin',
//         published: 1217559600000,
//         title: 'Clean Code',
//     },
//     {
//         author: 'Erich Gamma',
//         published: 782708400000,
//         title: 'Design Patterns',
//     },
//     {
//         author: 'Martin Fowler',
//         published: 915159600000,
//         title: 'Refactoring',
//     },
//     {
//         author: 'Robert C. Martin',
//         published: 1304478000000,
//         title: 'The Clean Coder',
//     },
//     {
//         author: 'David Thomas',
//         published: 938746800000,
//         title: 'The Pragmatic Programmer',
//     },
// ]

Note: For descending order you can switch the 1 and the -1

When we return 1, the function will take the b element with precedent in the sorting over the element a, returning -1 would be the opposite

Remember that in the compareFunction you have access to the full element, that is to say, if you require another extra field to compare you can directly use it, maybe if you face the case where books have exactly the same name (another version) you could do the sort by the published field for example