Sort an Array of Objects by Date in TypeScript

Sort an Array of Objects by Date in TypeScript #

To sort an array of objects by date in TypeScript:

Call the sort() method on the array, passing it a function.
The function will be called with 2 objects from the array.
Subtract the timestamp of the date in the second object from the timestamp of the date in the first.

index.ts

Copied!
const arr1 = [
  { id: 3, date: new Date('2022-04-21') },
  { id: 5, date: new Date('2027-04-21') },
  { id: 2, date: new Date('2023-01-21') },
];

// ✅ Sort in Ascending order (low to high)
const sortedAsc = arr1.sort(
  (objA, objB) => objA.date.getTime() - objB.date.getTime(),
);

// 👇️ {id: 3, date: Thu Apr 21 2022,
//     id: 2, date: Sat Jan 21 2023
//     id: 5, date: Wed Apr 21 2027}
console.log(sortedAsc);

// ✅ Sort in Descending order (high to low)
const sortedDesc = arr1.sort(
  (objA, objB) => objB.date.getTime() - objA.date.getTime(),
);

//  👇️ {id: 5, date: Wed Apr 21 2027,
//      id: 2, date: Sat Jan 21 2023,
// ️     id: 3, date: Thu Apr 21 2022}
console.log(sortedDesc);

The code snippet above assumes that your array of objects contains Date objects. If you have an array of objects containing date strings, use the map() method before calling sort().

index.ts

Copied!
const arr1 = [
  { id: 3, date: '2022-04-21' },
  { id: 5, date: '2027-04-21' },
  { id: 2, date: '2023-01-21' },
].map((obj) => {
  return { ...obj, date: new Date(obj.date) };
});

// ✅ Sort in Ascending order (low to high)
const sortedAsc = arr1.sort(
  (objA, objB) => objA.date.getTime() - objB.date.getTime(),
);

// 👇️ {id: 3, date: Thu Apr 21 2022,
//     id: 2, date: Sat Jan 21 2023
//     id: 5, date: Wed Apr 21 2027}
console.log(sortedAsc);

// ✅ Sort in Descending order (high to low)
const sortedDesc = arr1.sort(
  (objA, objB) => objB.date.getTime() - objA.date.getTime(),
);

//  👇️ {id: 5, date: Wed Apr 21 2027,
//      id: 2, date: Sat Jan 21 2023,
// ️     id: 3, date: Thu Apr 21 2022}
console.log(sortedDesc);

The code snippet above achieves the same result, but has a starting point of an array containing objects with date strings and not Date instances.

We used the Array.sort method to sort an array of objects by a date.

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.

index.ts

Copied!
const arr1 = [
  { id: 3, date: new Date('2022-04-21') },
  { id: 5, date: new Date('2027-04-21') },
  { id: 2, date: new Date('2023-01-21') },
];

// ✅ Sort in Ascending order (low to high)
const sortedAsc = [...arr1].sort(
  (objA, objB) => objA.date.getTime() - objB.date.getTime(),
);

// 👇️ {id: 3, date: Thu Apr 21 2022,
//     id: 2, date: Sat Jan 21 2023
//     id: 5, date: Wed Apr 21 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.

This is probably what you want to be doing since mutations can be confusing and difficult to track throughout a codebase.

The getTime method returns a number that represents the milliseconds elapsed between midnight of the 1st of January 1970 and the given date.

index.ts

Copied!
const date = new Date('2022-09-24');

// 👇️ 1663977600000
console.log(date.getTime());

The parameter we passed to the sort() method in is a function that defines the sort order.

index.ts

Copied!
const arr1 = [
  { id: 3, date: new Date('2022-04-21') },
  { id: 5, date: new Date('2027-04-21') },
  { id: 2, date: new Date('2023-01-21') },
];

// ✅ Sort in Ascending order (low to high)
const sortedAsc = arr1.sort(
  (objA, objB) => objA.date.getTime() - objB.date.getTime(),
);

// 👇️ {id: 3, date: Thu Apr 21 2022,
//     id: 2, date: Sat Jan 21 2023
//     id: 5, date: Wed Apr 21 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 in a descending order, you just have to subtract the timestamp of the first date from the timestamp of the second.

index.ts

Copied!
const arr1 = [
  { id: 3, date: new Date('2022-04-21') },
  { id: 5, date: new Date('2027-04-21') },
  { id: 2, date: new Date('2023-01-21') },
];

// ✅ Sort in Descending order (high to low)
const sortedDesc = arr1.sort(
  (objA, objB) => objB.date.getTime() - objA.date.getTime(),
);

//  👇️ {id: 5, date: Wed Apr 21 2027,
//      id: 2, date: Sat Jan 21 2023,
// ️     id: 3, date: Thu Apr 21 2022}
console.log(sortedDesc);

Sort an Array of Objects by Date in TypeScript

Sort an Array of Objects by Date in TypeScript #

Borislav Hadzhiev