How to Sort an Object Array by a Boolean Property in JavaScript
To sort an array of objects by a boolean property in JavaScript, call the sort() method on the array with a callback as an argument. In the function, use the boolean property to return an expression that evaluates to a positive number, a negative number, or zero. This will sort the array in place, by the boolean property, i.e.:
const trueFirst = users.sort((a, b) => b.boolProp - a.boolProp);
const falseFirst = users.sort((a, b) => a.boolProp - b.boolProp);For example:
const users = [
{ name: 'Kate', premium: false },
{ name: 'Bob', premium: true },
{ name: 'Jeff', premium: false },
{ name: 'Samantha', premium: true },
];
const premiumFirst = users.sort((a, b) => b.premium - a.premium);
/*
[
{ name: 'Bob', premium: true },
{ name: 'Samantha', premium: true },
{ name: 'Kate', premium: false },
{ name: 'Jeff', premium: false }
]
*/
console.log(premiumFirst);
const nonPremiumFirst = users.sort((a, b) => a.premium - b.premium);
/*
[
{ name: 'Kate', premium: false },
{ name: 'Jeff', premium: false },
{ name: 'Bob', premium: true },
{ name: 'Samantha', premium: true }
]
*/
console.log(nonPremiumFirst);
The Array sort() method takes a callback function as an argument. It uses the value returned from this callback to determine the order in which to sort the values. For each item pair in the array, a and b:
If the returned value is negative, a is placed before b in the sorted array.
If the value is positive, b is placed before a.
If the value is 0, the order of a and b is not changed.
const arr = [5, 3, 8, 1, 7];
// Sort in ascending order
arr.sort((a, b) => a - b);
console.log(arr); // [ 1, 3, 5, 7, 8 ]
// Sort in descending order
const desc = arr.sort((a, b) => b - a);
console.log(desc); // [ 8, 7, 5, 3, 1 ]
Because we used the subtraction operator (-) on the boolean values, they are coerced to numbers before the subtraction happens. Truthy values are coerced to 1, and falsy values 0.
console.log(true + true); // 2
console.log(true + false); // 1
console.log(false + false); // 0
After seeing how the sort() method and boolean coercion works, it's easy to understand the way the was sorted to place the objects with a boolean property value of true above the ones with false, and vice versa.
Sort object array by boolean property without mutation
The sort() method sorts the array in place, which means it gets modified. To prevent this, we can use the spread syntax (...) to create a shallow copy of the array for the sort:
const users = [
{ name: 'Kate', premium: false },
{ name: 'Bob', premium: true },
{ name: 'Jeff', premium: false },
{ name: 'Samantha', premium: true },
];
// 👇 Clone array with spread syntax
const premiumFirst = [...users].sort((a, b) => b.premium - a.premium);
/*
[
{ name: 'Bob', premium: true },
{ name: 'Samantha', premium: true },
{ name: 'Kate', premium: false },
{ name: 'Jeff', premium: false }
]
*/
console.log(premiumFirst);
/*
Original not modified:
[
{ name: 'Kate', premium: false },
{ name: 'Bob', premium: true },
{ name: 'Jeff', premium: false },
{ name: 'Samantha', premium: true }
]
*/
console.log(users);
By avoiding mutations, we can make our code more readable, predictable, and modular.
