Sort an Array of Objects by Boolean property in JavaScript

Sort an Array of Objects by Boolean property in JavaScript #

To sort an array of objects by a boolean property:

Call the sort() method on the array, passing it a function.
In the function, convert the 2 boolean values to numbers.
Subtract the first number from the second.

index.js

Copied!
const arr = [{bool: true}, {bool: false}, {bool: false}, {bool: true}];

// ✅ true values first
const trueFirst = arr.sort((a, b) => Number(b.bool) - Number(a.bool));

// 👇️ [{bool: true}, {bool: true}, {bool: false}, {bool: false}]
console.log(trueFirst);

// ✅ false values first
const falseFirst = arr.sort((a, b) => Number(a.bool) - Number(b.bool));

// 👇️ [{bool: false}, {bool: false}, {bool: true}, {bool: true}]
console.log(falseFirst);

We used the Array.sort method to sort an array of objects by a boolean property.

Note that the sort() method sorts the elements of the array in place and returns the sorted array. In other words, it mutates the original array.

index.js

Copied!
const arr = [{bool: true}, {bool: false}, {bool: false}, {bool: true}];

// ✅ true values first
const trueFirst = arr.sort((a, b) => Number(b.bool) - Number(a.bool));

// 👇️ [{bool: true}, {bool: true}, {bool: false}, {bool: false}]
console.log(trueFirst);

// 👇️ [{bool: true}, {bool: true}, {bool: false}, {bool: false}]
// 👇️ (Original array also changed)
console.log(arr);

If you want to sort the array without mutating it, use the spread syntax (...) to create a shallow copy before calling the sort() method.

index.js

Copied!
const arr = [{bool: true}, {bool: false}, {bool: false}, {bool: true}];

// ✅ true values first
//                👇️ create shallow copy first
const trueFirst = [...arr].sort((a, b) => Number(b.bool) - Number(a.bool));

// 👇️ [{bool: true}, {bool: true}, {bool: false}, {bool: false}]
console.log(trueFirst);

We used the spread syntax (...) to unpack the values of the array into a new array before calling the sort method.

This is probably what you want to be doing since mutations can be confusing and difficult to track throughout a codebase.

The sort() method takes a function that defines the sort order as a parameter.

index.js

Copied!
const arr = [{bool: true}, {bool: false}, {bool: false}, {bool: true}];

// ✅ true values first
const trueFirst = arr.sort((a, b) => Number(b.bool) - Number(a.bool));

// ✅ false values first
const falseFirst = arr.sort((a, b) => Number(a.bool) - Number(b.bool));

The sort() method uses the following logic to sort the elements in the array:

If the return value of the compare function is greater than 0, then sort b before a.
If the return value of the compare function is less than 0, then sort a before b.
If the return value of the compare function is equal to 0, keep the original order of a and b.

When converting booleans to a number, we get 1 for true values and 0 for false values.

index.js

Copied!
console.log(Number(true)); // 👉️ 1
console.log(Number(false)); // 👉️ 0

In the true values first example:

If subtracting a.bool from b.bool returns 1, then b is true and a is false, so we sort b before a.
If we get -1, then b is false and a is true, so we sort b after a.
If we get 0, we keep the original order of a and b.

Sort an Array of Objects by Boolean property in JavaScript

Sort an Array of Objects by Boolean property in JavaScript #

Borislav Hadzhiev