Borislav Hadzhiev
Tue Feb 22 2022·2 min read
Photo by Tom Pottiger
To sort an array of objects by a boolean property:
sort()
method on the array, passing it a function.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.
sort()
method sorts the elements of the array in place and returns the sorted array. In other words, it mutates the original array.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.
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.
The sort()
method takes a function that defines the sort order as a parameter.
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.
console.log(Number(true)); // 👉️ 1 console.log(Number(false)); // 👉️ 0
In the true
values first example:
a.bool
from b.bool
returns 1
, then b
is true
and a
is false
, so we sort b
before a
.-1
, then b
is false
and a
is true
, so we sort b
after
a
.0
, we keep the original order of a
and b
.