Sorting array of strings having year and month in JavaScript

Suppose, we have an array of strings that contains month-year combined strings like this:

const arr = ["2009-feb", "2009-jan", "2010-mar", "2010-jan", "2011-jul",
"2011-sep", "2011-jan", "2012-jan", "2012-dec", "2012-feb", "2013-may",
"2013-jul", "2013-jun", "2014-jan", "2014-dec", "2014-may", "2015-may",
"2015-jan", "2015-jun", "2016-jan", "2016-dec"];

We need to write a JavaScript function that takes such an array and sorts these dates from oldest to latest order.

Approach

The solution involves creating a custom sorting function that:

• Splits each date string to separate year and month
• Converts month names to numeric values for comparison
• Compares years first, then months if years are equal

Example

const arr = ["2009-feb", "2009-jan", "2010-mar", "2010-jan", "2011-jul",
"2011-sep", "2011-jan", "2012-jan", "2012-dec", "2012-feb", "2013-may",
"2013-jul", "2013-jun", "2014-jan", "2014-dec", "2014-may", "2015-may",
"2015-jan", "2015-jun", "2016-jan", "2016-dec"];

const sorter = (a, b) => {
   const getDate = date => {
      let day = date.split('-');
      day[1] = {
         jan: 1, feb: 2, mar: 3, apr: 4, may: 5, jun: 6, 
         jul: 7, aug: 8, sep: 9, oct: 10, nov: 11, dec: 12
      }[day[1].substring(0, 3).toLowerCase()] || 0;
      return day;
   }
   const aDate = getDate(a);
   const bDate = getDate(b);
   return aDate[0] - bDate[0] || aDate[1] - bDate[1];
}

arr.sort(sorter);
console.log(arr);

[
  '2009-jan', '2009-feb',
  '2010-jan', '2010-mar',
  '2011-jan', '2011-jul',
  '2011-sep', '2012-jan',
  '2012-feb', '2012-dec',
  '2013-may', '2013-jun',
  '2013-jul', '2014-jan',
  '2014-may', '2014-dec',
  '2015-jan', '2015-may',
  '2015-jun', '2016-jan',
  '2016-dec'
]

How It Works

The getDate function splits each string by the hyphen and converts the month abbreviation to a number using an object mapping. The sorting comparator first compares years (aDate[0] - bDate[0]), and if they're equal, it compares months (aDate[1] - bDate[1]).

Alternative Approach Using Date Constructor

const arr2 = ["2009-feb", "2009-jan", "2010-mar", "2010-jan"];

const sortByDate = (a, b) => {
   const [yearA, monthA] = a.split('-');
   const [yearB, monthB] = b.split('-');
   
   const dateA = new Date(yearA, getMonthNumber(monthA));
   const dateB = new Date(yearB, getMonthNumber(monthB));
   
   return dateA - dateB;
}

function getMonthNumber(month) {
   const months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun',
                  'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
   return months.indexOf(month.toLowerCase());
}

arr2.sort(sortByDate);
console.log(arr2);

[ '2009-jan', '2009-feb', '2010-jan', '2010-mar' ]

Conclusion

Both approaches effectively sort date strings by converting month names to numbers for proper comparison. The first method uses a direct object lookup, while the second leverages JavaScript's Date constructor for more readable code.