Sort an array to have specific items first in the array - JavaScript

When working with arrays of objects, you might need to sort them so that items with specific properties appear first. This is a common requirement in applications where you need to prioritize certain elements while maintaining the original order of others.

Suppose we have an array of objects like this:

const arr = [
    {flag: true, other: 1},
    {flag: true, other: 2},
    {flag: false, other: 3},
    {flag: true, other: 4},
    {flag: true, other: 5},
    {flag: true, other: 6},
    {flag: false, other: 7}
];

Requirements

We need to sort the array based on these conditions:

• If arr.flag === false, the matching element gets placed first in the array, but only after the previous matching elements.
• The elements that do not match remain in the same order they were in originally.
• Order of appearance is important.

For the above array, the expected output should be:

[
    {flag: false, other: 3},
    {flag: false, other: 7},
    {flag: true, other: 1},
    {flag: true, other: 2},
    {flag: true, other: 4},
    {flag: true, other: 5},
    {flag: true, other: 6}
]

Solution Using Custom Sort Function

const arr = [
    {flag: true, other: 1},
    {flag: true, other: 2},
    {flag: false, other: 3},
    {flag: true, other: 4},
    {flag: true, other: 5},
    {flag: true, other: 6},
    {flag: false, other: 7}
];

const sortByFlag = arr => {
    const sorter = (a, b) => {
        // If 'a' has flag false and 'b' has flag true, 'a' comes first
        if (!a['flag'] && b['flag']) {
            return -1;
        }
        // If 'a' has flag true and 'b' has flag false, 'b' comes first
        if (a['flag'] && !b['flag']) {
            return 1;
        }
        // If both have same flag value, maintain original order using 'other' property
        return a['other'] - b['other'];
    };
    arr.sort(sorter);
};

sortByFlag(arr);
console.log(arr);

[
    { flag: false, other: 3 },
    { flag: false, other: 7 },
    { flag: true, other: 1 },
    { flag: true, other: 2 },
    { flag: true, other: 4 },
    { flag: true, other: 5 },
    { flag: true, other: 6 }
]

Alternative Approach Using Filter and Spread

const arr2 = [
    {flag: true, other: 1},
    {flag: true, other: 2},
    {flag: false, other: 3},
    {flag: true, other: 4},
    {flag: true, other: 5},
    {flag: true, other: 6},
    {flag: false, other: 7}
];

const sortByFlagAlternative = (array) => {
    const falseItems = array.filter(item => !item.flag);
    const trueItems = array.filter(item => item.flag);
    return [...falseItems, ...trueItems];
};

const sortedArr = sortByFlagAlternative(arr2);
console.log(sortedArr);

[
    { flag: false, other: 3 },
    { flag: false, other: 7 },
    { flag: true, other: 1 },
    { flag: true, other: 2 },
    { flag: true, other: 4 },
    { flag: true, other: 5 },
    { flag: true, other: 6 }
]

How It Works

The first approach uses a custom comparator function with Array.sort():

• Returns -1 when the first element should come before the second
• Returns 1 when the first element should come after the second
• Returns 0 (or compares by another property) when both elements are equal in priority

The second approach uses filter() to separate items into two groups and then combines them using the spread operator.

Conclusion

Both methods effectively sort arrays to prioritize specific items while maintaining order. The custom sort approach is more flexible for complex sorting logic, while the filter approach is more readable for simple priority-based sorting.