Sort an Array of Objects by Boolean property in JavaScript

avatar

Borislav Hadzhiev

Last updated: Feb 22, 2022

banner

Photo from Unsplash

Sort an Array of Objects by Boolean property in JavaScript #

To sort an array of objects by a boolean property:

  1. Call the sort() method on the array, passing it a function.
  2. In the function, convert the 2 boolean values to numbers.
  3. Subtract the first number from the second.
  4. The sort method will sort the array in place, by the boolean property.
index.js
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
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
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
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
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.
book cover
You can use the search field on my Home Page to filter through all of my articles.