Sort an array of objects in JavaScript

This post will discuss how to sort an array of objects in JavaScript.

1. Using `Array.sort()` method

JavaScript native method sort() is commonly used to in-place sort elements of an array. The sort() method optionally accepts a comparison function, which defines the sort order. If x and y are two elements being compared with comparison function comp, then if :

comp(x, y) < 0, x comes before y in sorted order.
comp(x, y) = 0, the relative order of x and y remains unchanged.
comp(x, y) > 0, x comes after y in sorted order.

You can implement the comparison function with either function expressions or arrow functions. Without the comparison function, all elements will be converted to the string, and the comparison is made using the lexicographic order. Any undefined elements are moved at the end of the array.

The sort() method can be used to sort an array of objects using one or more of their properties. The following code example demonstrates the usage of the sort() method to sort an array of objects using the year field.

const browsers = [

{ name: 'Chrome', year: 2008 },

{ name: 'Firefox', year: 2004 },

{ name: 'Safari', year: 2003 },

{ name: 'Opera', year: 1996 },

{ name: 'IE', year: 1995 },

{ name: 'Edge', year: 2015 }

];

browsers.sort((x, y) => x.year - y.year);

console.log(browsers);

Output:

[

{ name: 'IE', year: 1995 },

{ name: 'Opera', year: 1996 },

{ name: 'Safari', year: 2003 },

{ name: 'Firefox', year: 2004 },

{ name: 'Chrome', year: 2008 },

{ name: 'Edge', year: 2015 }

]

Download Run Code

For comparing strings, you can use the String.localeCompare() method.

const browsers = [

{ name: 'Chrome', year: 2008 },

{ name: 'Firefox', year: 2004 },

{ name: 'Safari', year: 2003 },

{ name: 'Opera', year: 1996 },

{ name: 'IE', year: 1995 },

{ name: 'Edge', year: 2015 }

];

browsers.sort((x, y) => x.name.localeCompare(y.name));

console.log(browsers);

Output:

[

{ name: 'Chrome', year: 2008 },

{ name: 'Edge', year: 2015 },

{ name: 'Firefox', year: 2004 },

{ name: 'IE', year: 1995 },

{ name: 'Opera', year: 1996 },

{ name: 'Safari', year: 2003 }

]

Download Run Code

The String.localeCompare() is case-insensitive. For case-sensitive comparison, you can use the following code:

browsers.sort(function (x, y) {

if (x.name < y.name) {

return -1;

}

if (x.name > y.name) {

return 1;

}

return 0;

});

To sort by multiple fields, you can do like:

browsers.sort(function (x, y) {

// sort by 'name' field first

if (x.name < y.name) {

return -1;

}

if (x.name > y.name) {

return 1;

}

// if names are equal, then sort by 'year'

return x.year - y.year;

});

2. Using `_.sortBy()` method

If you’re already using lodash or underscore JavaScript library, you can use the _.sortBy method. It sorts the array in ascending order with one or more fields. The following example demonstrates the usage of the _.sortBy by sorting the array first by the year field, followed by the name field.

var _ = require('lodash');

const browsers = [

{ name: 'Chrome', year: 2008 },

{ name: 'Firefox', year: 2004 },

{ name: 'Safari', year: 2003 },

{ name: 'Opera 7', year: 2003 },

{ name: 'IE', year: 1995 },

{ name: 'Edge', year: 2015 }

];

let sorted = _.sortBy(browsers, 'year', 'name');

console.log(sorted);

Output:

[

{ name: 'IE', year: 1995 },

{ name: 'Opera 7', year: 2003 },

{ name: 'Safari', year: 2003 },

{ name: 'Firefox', year: 2004 },

{ name: 'Chrome', year: 2008 },

{ name: 'Edge', year: 2015 }

]

Download Code

The _.sortBy method does not allow to sort the array in descending order, but you can call the reverse() method after a sort to reverse the order.

var _ = require('lodash');

const browsers = [

{ name: 'Chrome', year: 2008 },

{ name: 'Firefox', year: 2004 },

{ name: 'Safari', year: 2003 },

{ name: 'Opera', year: 1996 },

{ name: 'IE', year: 1995 },

{ name: 'Edge', year: 2015 }

];

let sortedByYearDesc = _.sortBy(browsers, 'year').reverse();

console.log(sortedByYearDesc);

Output:

[

{ name: 'Edge', year: 2015 },

{ name: 'Chrome', year: 2008 },

{ name: 'Firefox', year: 2004 },

{ name: 'Safari', year: 2003 },

{ name: 'Opera', year: 1996 },

{ name: 'IE', year: 1995 }

]

Download Code

3. Using `_.orderBy()` method

Alternatively, you can use the _.orderBy method (offered by Lodash only), which optionally allows you to specify the sort order. The following example demonstrates this by sorting the array first by the name field in ascending order and then by the year field in descending order.

var _ = require('lodash');

const browsers = [

{ name: 'Chrome', year: 2008 },

{ name: 'Firefox', year: 2004 },

{ name: 'Safari', year: 2003 },

{ name: 'Opera', year: 1996 },

{ name: 'IE', year: 1995 },

{ name: 'Edge', year: 2015 }

];

let sorted = _.orderBy(browsers, ['name', 'year'], ['asc', 'desc']);

console.log(sorted);

Output:

[

{ name: 'Chrome', year: 2008 },

{ name: 'Edge', year: 2015 },

{ name: 'Firefox', year: 2004 },

{ name: 'IE', year: 1995 },

{ name: 'Opera', year: 1996 },

{ name: 'Safari', year: 2003 }

]

Download Code

That’s all about sorting an array of objects in JavaScript.

Sort an array of objects in JavaScript

1. Using Array.sort() method

2. Using _.sortBy() method

3. Using _.orderBy() method

Share this:

1. Using `Array.sort()` method

2. Using `_.sortBy()` method

3. Using `_.orderBy()` method