Sort an Array of Objects by Boolean property in JavaScript

# Table of Contents

# 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);

sort array of objects by boolean property

The code for this article is available on GitHub

If you need to sort an array of booleans, scroll down to the next subheading.

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);

# Sort an Array of Objects by Boolean property without mutation

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
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);

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

sort array of objects by boolean property without mutation

The code for this article is available on GitHub

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.

# Sort an Array of Booleans in JavaScript

To sort an array of booleans:

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 = [true, false, true, false, false];

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

// 👇️ [true, true, false, false, false]
console.log(trueFirst);

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

// 👇️ [false, false, false, true, true]
console.log(falseFirst);

sort array of booleans

The code for this article is available on GitHub

We used the Array.sort() method to sort an array of booleans.

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 = [true, false, true, false, false];

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

// 👇️ [true, true, false, false, false]
console.log(trueFirst);

// 👇️ [true, true, false, false, 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 = [true, false, true, false, false];

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

The code for this article is available on GitHub

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 = [true, false, true, false, false];

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

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

The code for this article is available on GitHub

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

index.js

Copied!
const arr = [true, false, true, false, false];

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

The code for this article is available on GitHub

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

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

# Table of Contents