Sort array of objects by single key with date value in JavaScript

In this article, we will see how to sort an array of objects by a single key with a date value in JavaScript. For sorting the array of objects we can use the sort() method which basically calls the callback function as an argument.

To sort the array of objects by a single key, we will use the following approaches:

• Using sort() Method
• Using sort() method with a custom comparison function
• Using sort() method with getTime()
• Using sort() method with toISOString()

Approach 1: Using sort() Method

First, we will create an array of an object containing the date key, then apply the sort() method to sort an array of objects using the date key.

Syntax:

array.sort((a, b) => a.date - b.date);

Example: In this example, we sort the arr array of objects by the date property in ascending order using the sort() method and subtraction.

Javascript

const arr = [
    { name: 'Geeks', date: new Date('2022-03-15') },
    { name: 'Abc', date: new Date('2022-03-12') },
    { name: 'GFG', date: new Date('2022-03-20') },
    { name: 'G4G', date: new Date('2021-03-20') }
];

arr.sort((a, b) => a.date - b.date);

console.log(arr);

Output

[
  { name: 'G4G', date: 2021-03-20T00:00:00.000Z },
  { name: 'Abc', date: 2022-03-12T00:00:00.000Z },
  { name: 'Geeks', date: 2022-03-15T00:00:00.000Z },
  { name: 'GFG', date: 2022-03-20T00:00:00.000Z }
]

Approach 2: Using sort() method with a custom comparison function

First, we will create an array of an object containing the date key, then use create a sort function to compare the date key and sort the object according to the date key.

Syntax:

array.sort(function (a, b) {
    // Custom comparison logic here

});

Example: In this example, we are using the above-explained method.

Javascript

const arr = [
    { name: 'Geeks', date: new Date('2022-03-15') },
    { name: 'Abc', date: new Date('2022-03-12') },
    { name: 'GFG', date: new Date('2022-03-20') },
    { name: 'G4G', date: new Date('2021-03-20') }
];

arr.sort(function(a, b) {
    let x = new Date(a.date);
    let y = new Date(b.date);

    // Compare the 2 dates
    if (x < y) return -1;
    if (x > y) return 1;
    return 0;
});

console.log(arr);

Output

[
  { name: 'G4G', date: 2021-03-20T00:00:00.000Z },
  { name: 'Abc', date: 2022-03-12T00:00:00.000Z },
  { name: 'Geeks', date: 2022-03-15T00:00:00.000Z },
  { name: 'GFG', date: 2022-03-20T00:00:00.000Z }
]

Approach 3: Using sort() method with getTime()

In this approach, we are sorts an array of objects by the date property using sort() and getTime() for ascending order based on timestamps.

Syntax:

array.sort((a, b) => a.date.getTime() - b.date.getTime());

Example: In this example sort() and getTime() to sort the arr array of objects by the date property in ascending order.

Javascript

const arr = [
    { name: 'Geeks', date: new Date('2022-03-15') },
    { name: 'Abc', date: new Date('2022-03-12') },
    { name: 'GFG', date: new Date('2022-03-20') },
    { name: 'G4G', date: new Date('2021-03-20') }
];

arr.sort((a, b) => a.date.getTime() - b.date.getTime());

console.log(arr);

Output

[
  { name: 'G4G', date: 2021-03-20T00:00:00.000Z },
  { name: 'Abc', date: 2022-03-12T00:00:00.000Z },
  { name: 'Geeks', date: 2022-03-15T00:00:00.000Z },
  { name: 'GFG', date: 2022-03-20T00:00:00....

Approach 4 : Using sort() method with toISOString()

In this approach, we are using the sort() method with toISOString() to sort the array of objects arr by the date property in ascending order

Syntax:

array.sort((a, b) => a.date.toISOString().localeCompare(b.date.toISOString()));

Example: In this example, we are using the above-explained approach.

Javascript

const arr = [
    { name: 'Geeks', date: new Date('2022-03-15') },
    { name: 'Abc', date: new Date('2022-03-12') },
    { name: 'GFG', date: new Date('2022-03-20') },
    { name: 'G4G', date: new Date('2021-03-20') }
];

arr.sort((a, b) =>
    a.date.toISOString().localeCompare(b.date.toISOString()));

console.log(arr);

Output

[
  { name: 'G4G', date: 2021-03-20T00:00:00.000Z },
  { name: 'Abc', date: 2022-03-12T00:00:00.000Z },
  { name: 'Geeks', date: 2022-03-15T00:00:00.000Z },
  { name: 'GFG', date: 2022-03-20T00:00:00....