Sort an Array of Objects by Boolean property in JavaScript

avatar

Borislav Hadzhiev

Tue Feb 22 20222 min read

banner

Photo by Tom Pottiger

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.
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.

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
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 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
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
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.
Use the search field on my Home Page to filter through my more than 1,000 articles.