How to sort JavaScript array

The JavaScript array is commonly used in client-side development and quite often we use filtering and sorting in the array. In this article, we learn how to sort JavaScript array objects with single and multiple columns.

 

 

The array.sort() method is used to sort the array elements and the sort method has compared function that determines the order of array objects.

Sort normal array items having integer items –

Example 1 –

var array = [9,1,2,6,2,3,1,4,8,2,7,3,5];
array.sort();
console.log(array);

Output –

// [1, 1, 2, 2, 2, 3, 3, 4, 5, 6, 7, 8, 9]

This is a normal integer array what about the complex types such as an array of objects in this article we also see how to sort a JavaScript array of objects based on its columns value.

How to sort JavaScript array of Objects

Let say we have below array product array which has Product Name, Date and Price –

let product = [

    {ProdName: "iPhone", Date: "2021-12-20T06:00:00Z", price: 1000},
    {ProdName: "MacBook",  Date: "2021-10-28T06:00:00Z", price: 2500},
    {ProdName: "GoPro",  Date: "2020-11-18T06:00:00Z", price: 700},
    {ProdName: "Ps4",  Date: "2021-09-14T06:00:00Z", price: 500}

];

How to sort JavaScript array object by Date

Sort the above JavaScript array objects by date Ascending and Descending. We have a date in the string so first convert the same into Date format. See the below examples –

First, sort the product array object by Date in ascending order.

Example 1 –

var result = product.sort(function(a, b) 
{ 
return new Date(a.Date) - new Date(b.Date) 
});

It sorts the product array by date in ascending order and below is the output.

Output –

0: {ProdName: 'GoPro', Date: '2020-11-18T06:00:00Z', price: 700}
1: {ProdName: 'Ps4', Date: '2021-09-14T06:00:00Z', price: 500}
2: {ProdName: 'MacBook', Date: '2021-10-28T06:00:00Z', price: 2500}
3: {ProdName: 'iPhone', Date: '2021-12-20T06:00:00Z', price: 1000}

Note – the compare function in sort() method return -1, 1 or 0 depending on the comparison.

function compare(a, b) {

  if (a is less than b by some ordering) {
    return -1;
  }
  if (a is greater than b by the ordering) {
    return 1;
  }
  return 0; // a must be equal to b
}

Example 2 –

Now sort the JavaScript array object by date in descending order –

var result = product.sort(function(a, b) { 

return new Date(b.Date) - new Date(a.Date) 

});

The above code sort the product array in descending order by Date and below is the output.

0: {ProdName: 'iPhone', Date: '2021-12-20T06:00:00Z', price: 1000}
1: {ProdName: 'MacBook', Date: '2021-10-28T06:00:00Z', price: 2500}
2: {ProdName: 'Ps4', Date: '2021-09-14T06:00:00Z', price: 500}
3: {ProdName: 'GoPro', Date: '2020-11-18T06:00:00Z', price: 700}

How to Sort JavaScript Array Objects by String

The array.sort() method worked in the same way as it worked in the above sample. Let use the same product array and sort the product items by product Name –

Example 1 –

Sort the JavaScript Array object by a string in Ascending Order –

var result = product.sort(function(a, b) {
let fa = a.ProdName.toLowerCase();
let fb = b.ProdName.toLowerCase();

if (fa < fb) {
        return -1;
    }
    if (fa > fb) {
        return 1;
    }
    return 0;

});

This sort the product array alphabetically and below is the output. You can see I have used different conditions in compare function and it returns -1,1 or 0.

Output –

0: {ProdName: 'GoPro', Date: '2020-11-18T06:00:00Z', price: 700}
1: {ProdName: 'iPhone', Date: '2021-12-20T06:00:00Z', price: 1000}
2: {ProdName: 'MacBook', Date: '2021-10-28T06:00:00Z', price: 2500}
3: {ProdName: 'Ps4', Date: '2021-09-14T06:00:00Z', price: 500}

 

How to sort the JavaScript Array object by Number

Below is the code to sort the array based on the number field. Here in the below sample, I have used the ES6 arrow function you can use the normal function as the same I used in the above examples –

var result = product.sort((a, b) => { return a.price - b.price });

Output –

0: {ProdName: 'Ps4', Date: '2021-09-14T06:00:00Z', price: 500}
1: {ProdName: 'GoPro', Date: '2020-11-18T06:00:00Z', price: 700}
2: {ProdName: 'iPhone', Date: '2021-12-20T06:00:00Z', price: 1000}
3: {ProdName: 'MacBook', Date: '2021-10-28T06:00:00Z', price: 2500}

This sort the elements in ascending order if you need the item to be displayed in descending order just reverse the compare function condition.

Conclusion

This is how you can sort JavaScript array objects based on different field types.