Best Way to Sort Array of Objects by Date in JavaScript

In JavaScript, you can use the sort() method to sort an array of objects by date. The sort() method takes a compare function as an argument, which allows you to specify the sort order.

Here is an example of using the sort() method to sort an array of objects by date:

const events = [
  {
    name: "Event 1",
    date: new Date("2022-12-15")
  },
  {
    name: "Event 2",
    date: new Date("2022-12-10")
  },
  {
    name: "Event 3",
    date: new Date("2022-12-20")
  }
];

events.sort((a, b) => a.date - b.date);
Code language: JavaScript (javascript)

In this example, we have an array of objects that represent events. Each event has a name and a date property. We use the sort() method to sort the array of events by date.

The sort() method takes a compare function as an argument, which is used to compare two elements in the array and determine their sort order.

In our compare function, we simply subtract the date property of the a object from the date property of the b object. This will sort the array in ascending order by date, with the earliest dates appearing first.

Sorting in Descending Order

If you want to sort the array of objects in descending order by date, you can simply reverse the order of the a and b arguments in the compare function. Here is an example:

const events = [
  {
    name: "Event 1",
    date: new Date("2022-12-15")
  },
  {
    name: "Event 2",
    date: new Date("2022-12-10")
  },
  {
    name: "Event 3",
    date: new Date("2022-12-20")
  }
];

events.sort((a, b) => b.date - a.date);
Code language: JavaScript (javascript)

In this example, we are using the same array of objects and the same sort() method, but we have reversed the order of the a and b arguments in the compare function. This will sort the array in descending order by date, with the latest dates appearing first.

sort() Modifies the Original Array

The sort() method returns a reference to the original array, meaning that changes made to the returned array will also be made to the original array. This can be seen in the following code:

const numbers = [3, 1, 4, 1, 5];
const sorted = numbers.sort((a, b) => a - b);
// numbers and sorted are both [1, 1, 3, 4, 5]
sorted[0] = 10;
console.log(numbers[0]); // 10
Code language: JavaScript (javascript)

If you want sort() to return a new array rather than a reference to the original array, you can use the spread syntax or Array.from() to create a shallow copy of the array before calling sort().

For example:

const numbers = [3, 1, 4, 1, 5];
// Array.from(numbers) creates a shallow copy, so sort() does not mutate the original
const sorted = Array.from(numbers).sort((a, b) => a - b);
sorted[0] = 10;
console.log(numbers[0]); // 3
Code language: JavaScript (javascript)

This way, the original array remains unchanged, and the sorted array can be modified without affecting the original.

Conclusion

Sorting an array of objects by date in JavaScript is easy to do using the sort() method. By providing a compare function to the sort() method, you can specify the sort order and sort the array in either ascending or descending order by date.

Reference

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort