Sort an array of objects by multiple properties in JavaScript

Sorting an array of objects by multiple properties is a common requirement in JavaScript applications. This involves creating custom comparison logic that prioritizes different properties based on specific criteria.

Suppose, we have an array of objects like this:

const arr = [
    { id: 1, score: 1, isCut: false, dnf: false },
    { id: 2, score: 2, isCut: false, dnf: false },
    { id: 3, score: 3, isCut: false, dnf: false },
    { id: 4, score: 4, isCut: false, dnf: false },
    { id: 5, score: 5, isCut: true, dnf: true },
    { id: 6, score: 6, isCut: true, dnf: false },
    { id: 7, score: 7, isCut: true, dnf: false },
    { id: 8, score: 8, isCut: true, dnf: false },
    { id: 9, score: 9, isCut: true, dnf: false },
    { id: 10, score: 0, isCut: false, dnf: false },
    { id: 11, score: -1, isCut: false, dnf: false },
    { id: 12, score: -2, isCut: false, dnf: true },
    { id: 13, score: -3, isCut: false, dnf: false },
    { id: 14, score: -4, isCut: false, dnf: false },
    { id: 15, score: -5, isCut: false, dnf: false },
    { id: 16, score: 10, isCut: true, dnf: false }
];

Sorting Criteria

We need to sort the above array based on the following priority rules:

• If dnf is true: Object goes to the bottom; all dnf-objects should be sorted by score
• If isCut is true: Object goes to the bottom, but above dnfs; all isCut-objects should be sorted by score
• Regular objects: Sorted by score in descending order, and if scores are equal, by id

Implementation Using Custom Sort Function

const arr = [
    { id: 1, score: 1, isCut: false, dnf: false },
    { id: 2, score: 2, isCut: false, dnf: false },
    { id: 3, score: 3, isCut: false, dnf: false },
    { id: 4, score: 4, isCut: false, dnf: false },
    { id: 5, score: 5, isCut: true, dnf: true },
    { id: 6, score: 6, isCut: true, dnf: false },
    { id: 7, score: 7, isCut: true, dnf: false },
    { id: 8, score: 8, isCut: true, dnf: false },
    { id: 9, score: 9, isCut: true, dnf: false },
    { id: 10, score: 0, isCut: false, dnf: false },
    { id: 11, score: -1, isCut: false, dnf: false },
    { id: 12, score: -2, isCut: false, dnf: true },
    { id: 13, score: -3, isCut: false, dnf: false },
    { id: 14, score: -4, isCut: false, dnf: false },
    { id: 15, score: -5, isCut: false, dnf: false },
    { id: 16, score: 10, isCut: true, dnf: false }
];

const sortComplex = (arr = []) => {
    arr.sort(function (a, b) {
        // Priority order: normal (0), isCut (1), dnf (2)
        const order = (dnf, isCut) => {
            return [0, 1, 3, 2][dnf * 2 + isCut];
        }
        
        // First sort by priority, then by score (descending)
        return order(a.dnf, a.isCut) - order(b.dnf, b.isCut) || b.score - a.score;
    });
};

sortComplex(arr);
console.log(arr);

[
    { id: 4, score: 4, isCut: false, dnf: false },
    { id: 3, score: 3, isCut: false, dnf: false },
    { id: 2, score: 2, isCut: false, dnf: false },
    { id: 1, score: 1, isCut: false, dnf: false },
    { id: 10, score: 0, isCut: false, dnf: false },
    { id: 11, score: -1, isCut: false, dnf: false },
    { id: 13, score: -3, isCut: false, dnf: false },
    { id: 14, score: -4, isCut: false, dnf: false },
    { id: 15, score: -5, isCut: false, dnf: false },
    { id: 16, score: 10, isCut: true, dnf: false },
    { id: 9, score: 9, isCut: true, dnf: false },
    { id: 8, score: 8, isCut: true, dnf: false },
    { id: 7, score: 7, isCut: true, dnf: false },
    { id: 6, score: 6, isCut: true, dnf: false },
    { id: 5, score: 5, isCut: true, dnf: true },
    { id: 12, score: -2, isCut: false, dnf: true }
]

How the Sort Function Works

The order function creates a priority system:

• Priority 0: Regular objects (dnf: false, isCut: false)
• Priority 1: Cut objects (dnf: false, isCut: true)
• Priority 3: DNF objects (dnf: true, isCut: false or true)

The expression [0, 1, 3, 2][dnf * 2 + isCut] maps boolean combinations to priority values. Objects with lower priority values appear first in the sorted array.

Alternative Approach with Clearer Logic

const sortAlternative = (arr = []) => {
    return arr.sort((a, b) => {
        // Handle DNF objects - they go to the bottom
        if (a.dnf && !b.dnf) return 1;
        if (!a.dnf && b.dnf) return -1;
        
        // If both are DNF, sort by score descending
        if (a.dnf && b.dnf) return b.score - a.score;
        
        // Handle isCut objects - they go after normal objects
        if (a.isCut && !b.isCut) return 1;
        if (!a.isCut && b.isCut) return -1;
        
        // For same type objects, sort by score descending
        return b.score - a.score;
    });
};

// Test with a copy of the array
const testArr = [...arr];
console.log(sortAlternative(testArr));

Conclusion

Sorting arrays of objects by multiple properties requires custom comparison functions that handle priority rules and fallback sorting criteria. The key is to establish clear precedence rules and implement them systematically in the sort function.