How to Sort an Array of Objects in JavaScript

Previous Page Next Page

The JavaScript array object consists of the sort() property which orders the array element based on the callback function parameter. When the callback function returns a positive number, the sort() method ensures that element1 has a higher index than element2, and element1 will have a lower index than element2 when a negative number is returned. 

Array.sort((element1, element2) => {
  if (condition1) {
    return 1;
  } else if (condition2) {
    return -1;
  }
  return 0;
});

To demonstrate the sorting array of objects, we will consider the example of array with fruit objects consisting name, price, and arrival_date properties. 

const fruitBasket = [
  { name: "Apple", price: 5, arrival_date: "2022-06-09" },
  { name: "Pears", price: 6, arrival_date: "2022-06-12" },
  { name: "Avocado", price: 8, arrival_date: "2022-06-11" },
  { name: "Grapes", price: 2, arrival_date: "2022-07-12" },
  { name: "Mango", price: 3, arrival_date: "2021-06-13" },
  { name: "Orange", price: 3, arrival_date: "2022-06-10" }
];

Sort array of objects by property value

In the below example, we sort the array in ascending order of the price property of the fruit object. The code “item1.price – item2.price” returns negative value when item1.price < item2.price and vice versa. 

const cheapestFruits = [...fruitBasket];

cheapestFruits.sort((item1, item2) => item1.price - item2.price);

console.log(cheapestFruits);

//{name: "Grapes" ...},{name:"Orange"...},...

Sort array of objects in property’s Alphabetical order

The localeCompare() is a function inbuilt into a JavaScript string that returns a number based on whether the reference string is alphabetically before or after the parameter string.

Below, the array is sorted in alphabetical order of the object’s “name” property.

const orderedFruits = [...fruitBasket];

orderedFruits.sort((item1, item2) => item1.name.localeCompare(item2.name));

console.log(orderedFruits);

//{name: "Apple" ...},{name:"Avocado"...},...

Sort array of objects by Date property value

The date in string format cannot be directly compared in JavaScript, hence the strings need to be parsed into new Date() object. Then JavaScript operators must be used to compare the two Date objects.

Below, the array is sorted by descending order of arrival date indicating the freshness of the fruit.

const freshFruits = [...fruitBasket];

freshFruits.sort((item1, item2) => {
  const date1 = new Date(item1.arrival_date);
  const date2 = new Date(item2.arrival_date);
  return Date.parse(date2) - Date.parse(date1);
});
console.log(freshFruits);

//{name: "Grapes" ...},{name:"Pears"...},...

Combining number and date sort of properties

In a few scenarios, a property of multiple objects will have the same value as a result will not be sorted. Hence combining sorting with multiple properties reduces the amount of unsorted index.

In the below example, we perform the following:

  1. Sort array by ascending order of the “price” property.
  2. If two objects have an equal price, sort them based on descending order of “arrival_date” property.

Thus accomplishing the functionality to display the cheapest fruit objects and freshest fruit first when the prices are equal.

const sortedFruits = [...fruitBasket];

sortedFruits.sort((item1, item2) => {
  if (item1.price !== item2.price) {
    return item1.price - item2.price;
  } else {
    return (
      Date.parse(new Date(item2.arrival_date)) -
      Date.parse(new Date(item1.arrival_date))
    );
  }
});

console.log(sortedFruits);

//{name: "Grapes" ...},{name:"Orange"...},...

Related Articles