Borislav Hadzhiev
Tue Feb 22 2022·3 min read
Photo by Joshua Rawson-Harris
To sort an array with NULL values coming last:
sort()
method on the array, passing it a function.null
values at the end.const arr = ['c', null, 'z', null, 'b', null, 'a']; // ✅ Sort Ascending (low to high) const sortedAsc = arr.sort((a, b) => { if (a === null) { return 1; } if (b === null) { return -1; } if (a === b) { return 0; } return a < b ? -1 : 1; }); console.log(sortedAsc); // 👉️ ['a', 'b', 'c', 'z', null, null, null] // ✅ Sort Ascending (high to low) const sortedDesc = arr.sort((a, b) => { if (a === null) { return 1; } if (b === null) { return -1; } if (a === b) { return 0; } return a < b ? 1 : -1; }); console.log(sortedDesc); // 👉️ ['z', 'c', 'b', 'a', null, null, null]
We used the
Array.sort
method to sort an array with the null
values coming last.
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 = ['c', null, 'z', null, 'b', null, 'a']; const sortedAsc = arr.sort((a, b) => { if (a === null) { return 1; } if (b === null) { return -1; } if (a === b) { return 0; } return a < b ? -1 : 1; }); console.log(sortedAsc); // 👉️ ['a', 'b', 'c', 'z', null, null, null] // 👇️ (Original array also changed) console.log(arr); // 👉️ ['a', 'b', 'c', 'z', null, null, null]
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 = ['c', null, 'z', null, 'b', null, 'a']; // 👇️ create shallow copy before calling sort() const sortedAsc = [...arr].sort((a, b) => { if (a === null) { return 1; } if (b === null) { return -1; } if (a === b) { return 0; } return a < b ? -1 : 1; }); console.log(sortedAsc); // 👉️ ['a', 'b', 'c', 'z', null, null, null] console.log(arr); // 👉️ ['c', null, 'z', null, 'b', null, 'a']
We used the
spread syntax (...)
to unpack the values of the array into a new array before calling the sort
method.
The parameter we passed to the sort
method is a function that defines the sort
order.
const arr = ['c', null, 'z', null, 'b', null, 'a']; const sortedAsc = arr.sort((a, b) => { if (a === null) { return 1; } if (b === null) { return -1; } if (a === b) { return 0; } return a < b ? -1 : 1; }); console.log(sortedAsc); // 👉️ ['a', 'b', 'c', 'z', null, null, null]
The sort()
method determines the order of the elements in the array in the
following way:
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
.
In our example, this translates to:
If a
has a value of null
, we return 1
and therefore sort b
before a
.
If b
has a value of null
, we return -1
and sort a
before b
.
If a
and b
are equal, we return 0
to keep the original order of a
and
b
.
Otherwise, we check if a
is less than b
and return -1
, else we return
1
.
All you have to do to change the order to descending is change the last line in the callback function.
const arr = ['c', null, 'z', null, 'b', null, 'a']; const sortedDesc = arr.sort((a, b) => { if (a === null) { return 1; } if (b === null) { return -1; } if (a === b) { return 0; } return a < b ? 1 : -1; }); console.log(sortedDesc); // 👉️ ['z', 'c', 'b', 'a', null, null, null]