Sort an Array with NULL values coming last in JavaScript

avatar
Borislav Hadzhiev

Last updated: Mar 6, 2024
4 min

banner

# Sort an Array with NULL values coming last in JavaScript

To sort an array with NULL values coming last:

  1. Call the sort() method on the array, passing it a function.
  2. The function defines the sort order.
  3. Sort the null values at the end.
index.js
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 array with null values coming last

The code for this article is available on GitHub

If you need to sort an array with null values in descending order, use the following code sample instead.

index.js
const arr = ['c', null, 'z', null, 'b', null, 'a']; // โœ… Sort Descending (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]

sort array with null values in descending order

The code for this article is available on GitHub

We used the Array.sort() method to sort an array with the null values coming last.

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 = ['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]

# Sort an Array with NULL values coming last 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
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']

sort array with null values coming last 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 since mutations can be confusing and difficult to track throughout a codebase.

The parameter we passed to the sort method is a function that defines the sort order.

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

# Sort an Array with NULL values coming last in descending order

All you have to do to change the order to descending is change the last line in the callback function.

index.js
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]

sort array with null values coming last in descending order

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.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev