How to sort an object array by date property in JavaScript?

To sort an array of objects by a date property in JavaScript, you can use the Array.sort() method with a custom comparator function that compares the date values. Here’s a detailed guide with examples:

1. Basic Sorting by Date

Ascending Order (Oldest to Newest)

const events = [
  { name: "Event A", date: "2023-10-05" },
  { name: "Event B", date: "2023-09-01" },
  { name: "Event C", date: "2023-12-25" }
];

// Sort by date (ascending)
events.sort((a, b) => new Date(a.date) - new Date(b.date));

console.log(events);

Output:

[
  { name: "Event B", date: "2023-09-01" },
  { name: "Event A", date: "2023-10-05" },
  { name: "Event C", date: "2023-12-25" }
]

Descending Order (Newest to Oldest)

events.sort((a, b) => new Date(b.date) - new Date(a.date));

Output:

[
  { name: "Event C", date: "2023-12-25" },
  { name: "Event A", date: "2023-10-05" },
  { name: "Event B", date: "2023-09-01" }
]

2. Handling Different Date Formats

The Date constructor can parse most date strings (e.g., ISO 8601, MM/DD/YYYY, textual dates):

const mixedDates = [
  { event: "Meeting", date: "10/05/2023" },       // MM/DD/YYYY
  { event: "Webinar", date: "2023-09-15" },       // ISO 8601
  { event: "Deadline", date: "December 1, 2023" } // Textual
];

mixedDates.sort((a, b) => new Date(a.date) - new Date(b.date));

console.log(mixedDates);

Output:

[
  { event: "Webinar", date: "2023-09-15" },
  { event: "Meeting", date: "10/05/2023" }, // October 5, 2023
  { event: "Deadline", date: "December 1, 2023" }
]

3. Handling Missing or Invalid Dates

Default Missing Dates to Epoch (1970)

const incompleteData = [
  { task: "Task 1", date: "2023-11-01" },
  { task: "Task 2" }, // Missing date
  { task: "Task 3", date: "2023-10-10" }
];

incompleteData.sort((a, b) => {
  const dateA = a.date ? new Date(a.date) : new Date(0); // 1970-01-01
  const dateB = b.date ? new Date(b.date) : new Date(0);
  return dateA - dateB;
});

console.log(incompleteData);

Output:

[
  { task: "Task 2" }, // Treated as 1970-01-01
  { task: "Task 3", date: "2023-10-10" },
  { task: "Task 1", date: "2023-11-01" }
]

Skip Invalid Dates

const isValidDate = (dateStr) => !isNaN(new Date(dateStr).getTime());

events.sort((a, b) => {
  const dateA = isValidDate(a.date) ? new Date(a.date) : new Date(0);
  const dateB = isValidDate(b.date) ? new Date(b.date) : new Date(0);
  return dateA - dateB;
});

4. Optimizing Performance for Large Arrays

Precompute timestamps to avoid repeated conversions:

// Add a timestamp property to each object
events.forEach(event => event.timestamp = new Date(event.date).getTime());

// Sort by the precomputed timestamp
events.sort((a, b) => a.timestamp - b.timestamp);

5. Sorting Without Modifying the Original Array

Create a copy of the array before sorting:

const sortedEvents = [...events].sort((a, b) => new Date(a.date) - new Date(b.date));

6. Sorting by Nested Date Properties

If the date is nested inside an object:

const tasks = [
  { id: 1, details: { due: "2023-10-10" } },
  { id: 2, details: { due: "2023-09-01" } },
  { id: 3, details: { due: "2024-01-15" } }
];

tasks.sort((a, b) => new Date(a.details.due) - new Date(b.details.due));

console.log(tasks);

Output:

[
  { id: 2, details: { due: "2023-09-01" } },
  { id: 1, details: { due: "2023-10-10" } },
  { id: 3, details: { due: "2024-01-15" } }
]

Key Concepts

1. Comparator Function:
   The comparator returns:

• A negative number if a should come before b.
• A positive number if b should come before a.
• Zero if the order doesn’t matter.

1. Date Conversion:
   Use new Date(dateString) to parse dates. Subtract Date objects to compare timestamps.
2. Edge Cases:
   Handle missing dates, invalid formats, or inconsistent time zones.

Summary Table

Use Case	Code Snippet
Basic Ascending Sort	arr.sort((a, b) => new Date(a.date) - new Date(b.date))
Descending Sort	arr.sort((a, b) => new Date(b.date) - new Date(a.date))
Precompute Timestamps	arr.forEach(e => e.ts = new Date(e.date).getTime())
Handle Missing Dates	Default to new Date(0) (epoch)

Final Example with Time Zones

const globalEvents = [
  { title: "Event X", date: "2023-10-05T12:00:00+02:00" }, // UTC+2
  { title: "Event Y", date: "2023-10-05T06:00:00-05:00" }, // UTC-5
  { title: "Event Z", date: "2023-10-05T00:00:00Z" }       // UTC
];

globalEvents.sort((a, b) => new Date(a.date) - new Date(b.date));

console.log(globalEvents);

Output (sorted by UTC time):

[
  { title: "Event Z", date: "2023-10-05T00:00:00Z" },       // 00:00 UTC
  { title: "Event Y", date: "2023-10-05T06:00:00-05:00" },  // 11:00 UTC
  { title: "Event X", date: "2023-10-05T12:00:00+02:00" }   // 10:00 UTC
]

This guide covers all common scenarios for sorting object arrays by date in JavaScript!