Sort an Array with NULL values coming last in JavaScript

Sort an Array with NULL values coming last in JavaScript #

To sort an array with NULL values coming last:

Call the sort() method on the array, passing it a function.
The function defines the sort order.
Sort the null values at the end.

index.js

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

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

index.js

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

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

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

index.js

Copied!
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 an Array with NULL values coming last in JavaScript

Sort an Array with NULL values coming last in JavaScript #

Borislav Hadzhiev