Sort array by year and month JavaScript

Sorting arrays of objects by multiple criteria is a common requirement in JavaScript applications. In this tutorial, we'll learn how to sort an array by year first, then by month for objects with the same year.

The Problem

We have an array of objects containing year and month properties:

const arr = [{
    year: 2020,
    month: 'January'
}, {
    year: 2017,
    month: 'March'
}, {
    year: 2010,
    month: 'January'
}, {
    year: 2010,
    month: 'December'
}, {
    year: 2020,
    month: 'April'
}, {
    year: 2017,
    month: 'August'
}, {
    year: 2010,
    month: 'February'
}, {
    year: 2020,
    month: 'October'
}, {
    year: 2017,
    month: 'June'
}];

console.log("Original array:");
console.log(arr);

Original array:
[
  { year: 2020, month: 'January' },
  { year: 2017, month: 'March' },
  { year: 2010, month: 'January' },
  { year: 2010, month: 'December' },
  { year: 2020, month: 'April' },
  { year: 2017, month: 'August' },
  { year: 2010, month: 'February' },
  { year: 2020, month: 'October' },
  { year: 2017, month: 'June' }
]

Solution: Multi-Level Sorting

We need to sort by year first (ascending), then by month order for objects with the same year. Here's the complete solution:

const arr = [{
    year: 2020,
    month: 'January'
}, {
    year: 2017,
    month: 'March'
}, {
    year: 2010,
    month: 'January'
}, {
    year: 2010,
    month: 'December'
}, {
    year: 2020,
    month: 'April'
}, {
    year: 2017,
    month: 'August'
}, {
    year: 2010,
    month: 'February'
}, {
    year: 2020,
    month: 'October'
}, {
    year: 2017,
    month: 'June'
}];

// Define month order for comparison
const months = ['January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'];

// Custom sorting function
const sorter = (a, b) => {
    if (a.year !== b.year) {
        return a.year - b.year;  // Sort by year first
    } else {
        return months.indexOf(a.month) - months.indexOf(b.month);  // Then by month
    }
};

arr.sort(sorter);
console.log("Sorted array:");
console.log(arr);

Sorted array:
[
  { year: 2010, month: 'January' },
  { year: 2010, month: 'February' },
  { year: 2010, month: 'December' },
  { year: 2017, month: 'March' },
  { year: 2017, month: 'June' },
  { year: 2017, month: 'August' },
  { year: 2020, month: 'January' },
  { year: 2020, month: 'April' },
  { year: 2020, month: 'October' }
]

How It Works

The sorting function uses a two-step approach:

1. Primary sort by year: If years are different, subtract them to get ascending order
2. Secondary sort by month: If years are the same, compare month positions in the months array using indexOf()

Alternative: Using Date Objects

For more robust date handling, you can convert to Date objects:

const arr2 = [{
    year: 2020,
    month: 'January'
}, {
    year: 2017,
    month: 'March'
}, {
    year: 2010,
    month: 'December'
}];

// Convert to Date objects for comparison
const sortByDate = (a, b) => {
    const dateA = new Date(a.year, new Date(Date.parse(a.month + " 1, 2000")).getMonth());
    const dateB = new Date(b.year, new Date(Date.parse(b.month + " 1, 2000")).getMonth());
    return dateA - dateB;
};

arr2.sort(sortByDate);
console.log("Sorted using Date objects:");
console.log(arr2);

Sorted using Date objects:
[
  { year: 2010, month: 'December' },
  { year: 2017, month: 'March' },
  { year: 2020, month: 'January' }
]

Conclusion

Multi-level sorting in JavaScript requires a custom comparator function that handles primary and secondary sort criteria. The months array approach is simple and effective for year-month sorting scenarios.