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.
The sort method will sort the array in place, by the boolean property.

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.

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 because 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, true gets converted to 1, and false gets converted to 0.

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.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Sort an Array of Objects by Boolean property in JavaScript

Sort an Array of Objects by Boolean property in JavaScript #

Borislav Hadzhiev