Borislav Hadzhiev
Mon Feb 21 2022·4 min read
Photo by Kinga Cichewicz
To sort an array of objects by date property:
sort()
method on the array, passing it a function.2
objects from the array.const arr1 = [ {id: 3, date: new Date(2022, 1, 24)}, {id: 5, date: new Date(2027, 1, 24)}, {id: 2, date: new Date(2023, 1, 24)}, ]; // ✅ Sort in Ascending order (low to high) const sortedAsc = arr1.sort( (objA, objB) => Number(objA.date) - Number(objB.date), ); // 👇️ {id: 3, date: Thu Feb 24 2022, // id: 2, date: Fri Feb 24 2023 // id: 5, date: Wed Feb 24 2027} console.log(sortedAsc); // ✅ Sort in Descending order (high to low) const sortedDesc = arr1.sort( (objA, objB) => Number(objB.date) - Number(objA.date), ); // 👇️ {id: 5, date: Wed Feb 24 2027, // id: 2, date: Fri Feb 24 2023, // ️ id: 3, date: Thu Feb 24 2022} console.log(sortedDesc);
Date
objects. If you have Date
strings instead, use the map
method to convert them to Date
objects before calling sort()
.const arr1 = [ {id: 3, date: '2022-02-24'}, {id: 5, date: '2027-02-24'}, {id: 2, date: '2023-02-24'}, ].map(obj => { return {...obj, date: new Date(obj.date)}; }); console.log(arr1); // ✅ Sort in Ascending order (low to high) const sortedAsc = arr1.sort( (objA, objB) => Number(objA.date) - Number(objB.date), ); // 👇️ {id: 3, date: Thu Feb 24 2022, // id: 2, date: Fri Feb 24 2023 // id: 5, date: Wed Feb 24 2027} console.log(sortedAsc); // ✅ Sort in Descending order (high to low) const sortedDesc = arr1.sort( (objA, objB) => Number(objB.date) - Number(objA.date), ); // 👇️ {id: 5, date: Wed Feb 24 2027, // id: 2, date: Fri Feb 24 2023, // ️ id: 3, date: Thu Feb 24 2022} console.log(sortedDesc);
Date
object.We used the Array.sort method to sort an array of objects by a date property.
Note that the sort()
method sorts the elements of the array in place and
returns the sorted array. In other words, it mutates the original array.
If you want to sort the array without mutating it, use the spread syntax (...)
to create a shallow copy before calling the sort()
method.
const arr1 = [ {id: 3, date: new Date(2022, 1, 24)}, {id: 5, date: new Date(2027, 1, 24)}, {id: 2, date: new Date(2023, 1, 24)}, ]; // ✅ Sort in Ascending order (low to high) const sortedAsc = [...arr1].sort( (objA, objB) => Number(objA.date) - Number(objB.date), ); // 👇️ {id: 3, date: Thu Feb 24 2022, // id: 2, date: Fri Feb 24 2023 // id: 5, date: Wed Feb 24 2027} console.log(sortedAsc);
We used the
spread syntax (...)
to unpack the values of the array into a new array before calling the sort
method.
We passed the
Date
objects to the Number
function to get the timestamp of each date.
Under the hood each Date
object in JavaScript stores the number of
milliseconds elapsed between the 1st of January 1970 00:00:00 and the given
date.
// 👇️ 1645454934750 console.log(Number(new Date()));
You can also be more explicit and use the getTime method to get the timestamp.
// 👇️ 1645454934750 console.log(new Date().getTime());
The parameter we passed to the sort()
method in is a function that defines the
sort order.
const arr1 = [ {id: 3, date: new Date(2022, 1, 24)}, {id: 5, date: new Date(2027, 1, 24)}, {id: 2, date: new Date(2023, 1, 24)}, ]; // ✅ Sort in Ascending order (low to high) const sortedAsc = arr1.sort( (objA, objB) => Number(objA.date) - Number(objB.date), ); // 👇️ {id: 3, date: Thu Feb 24 2022, // id: 2, date: Fri Feb 24 2023 // id: 5, date: Wed Feb 24 2027} console.log(sortedAsc);
The function gets called with 2
of the elements (objects) in the array on each
iteration.
The sort()
method uses the following logic to sort the elements in the array:
If the return value of the compare function is greater than 0
, then sort b
before a
.
If the return value of the compare function is less than 0
, then sort a
before b
.
If the return value of the compare function is equal to 0
, keep the original
order of a
and b
.
To sort the array of objects by date property in descending order, you just have to subtract the timestamp of the first date from the timestamp of the second.
const arr1 = [ {id: 3, date: new Date(2022, 1, 24)}, {id: 5, date: new Date(2027, 1, 24)}, {id: 2, date: new Date(2023, 1, 24)}, ]; // ✅ Sort in Descending order (high to low) const sortedDesc = arr1.sort( (objA, objB) => Number(objB.date) - Number(objA.date), ); // 👇️ {id: 5, date: Wed Feb 24 2027, // id: 2, date: Fri Feb 24 2023, // ️ id: 3, date: Thu Feb 24 2022} console.log(sortedDesc); // 👇️ 1645454934750 console.log(new Date().getTime());