Sorting arrays by two criteria in JavaScript

When sorting arrays by multiple criteria in JavaScript, you need to create a custom comparator function that handles each condition sequentially. This article demonstrates sorting objects by priority (isImportant) first, then by date within each priority group.

The Array Structure

Consider an array of objects with id, date, and isImportant properties. We want important items first, then sort by date within each group:

const array = [{
    id: 545,
    date: 591020824000,
    isImportant: false,
},
{
    id: 322,
    date: 591080224000,
    isImportant: false,
},
{
    id: 543,
    date: 591080424000,
    isImportant: true,
},
{
    id: 423,
    date: 591080225525,
    isImportant: false,
},
{
    id: 135,
    date: 591020225525,
    isImportant: true,
}];

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

Original array: [
  { id: 545, date: 591020824000, isImportant: false },
  { id: 322, date: 591080224000, isImportant: false },
  { id: 543, date: 591080424000, isImportant: true },
  { id: 423, date: 591080225525, isImportant: false },
  { id: 135, date: 591020225525, isImportant: true }
]

Multi-Criteria Sorting Logic

The sort comparator function handles two criteria sequentially:

const array = [{
    id: 545,
    date: 591020824000,
    isImportant: false,
},
{
    id: 322,
    date: 591080224000,
    isImportant: false,
},
{
    id: 543,
    date: 591080424000,
    isImportant: true,
},
{
    id: 423,
    date: 591080225525,
    isImportant: false,
},
{
    id: 135,
    date: 591020225525,
    isImportant: true,
}];

array.sort((a, b) => {
    // First criterion: isImportant (true ranks higher)
    if(a.isImportant && !b.isImportant){
        return -1;  // a ranks higher
    } else if(!a.isImportant && b.isImportant){
        return 1;   // b ranks higher
    } else {
        // Second criterion: date (descending order)
        return b.date - a.date;
    }
});

console.log("Sorted array:", array);

Sorted array: [
  { id: 543, date: 591080424000, isImportant: true },
  { id: 135, date: 591020225525, isImportant: true },
  { id: 423, date: 591080225525, isImportant: false },
  { id: 322, date: 591080224000, isImportant: false },
  { id: 545, date: 591020824000, isImportant: false }
]

How the Comparator Works

The sort comparator function receives two elements (a and b) and returns:

• Negative value (-1): Element a comes before b
• Positive value (1): Element b comes before a
• Zero (0): Elements remain in their current order

Alternative Compact Syntax

You can write the same logic more concisely:

const array = [{id: 1, date: 100, isImportant: false}, 
               {id: 2, date: 200, isImportant: true}];

array.sort((a, b) => {
    return (b.isImportant - a.isImportant) || (b.date - a.date);
});

console.log(array);

[
  { id: 2, date: 200, isImportant: true },
  { id: 1, date: 100, isImportant: false }
]

Key Points

• Handle primary criterion first (isImportant)
• Apply secondary criterion only when primary values are equal
• Use negative/positive return values to control sort order
• Boolean values can be compared directly in compact syntax

Conclusion

Multi-criteria sorting requires a custom comparator that checks conditions sequentially. Always handle the most important criterion first, then fall through to secondary criteria when primary values are equal.