How to Sort a JavaScript Array?

You can use the Array.prototype.sort() method in JavaScript for sorting the elements of an array. It performs in place modification of the array, which means that it modifies the original array rather than creating a new one. It can be used in the following two ways:

Passing in a compare function as an argument to Array.prototype.sort() is optional, which means you use any of the following syntax:

// without compare function
sort()

// with compare function
sort((a, b) => { /* ... */ }) // ES6+
sort(function compareFn(a, b) { /* ... */ })

Please note that in either case, all undefined elements are sorted to the end of the array, and if there are any empty slots, they are moved right after all the undefined elements.

Using Array.prototype.sort() Without Compare Function

If you don't specify the compare function to the Array.prototype.sort() method, then all non-undefined array elements are converted to strings, and sorted according to each character's Unicode code point value.

Consider the following example, where 9 appears after 80 when no compare function is provided to the Array.prototype.sort() method (even though by default arrays are sorted in ascending order):

const nums = [80, 10, 9, 40]

nums.sort();

console.log(nums); // [10, 40, 80, 9]

This happens because, in this instance:

  • Numbers are converted to strings, and sorted according to each character's Unicode code point value;
  • "80" (i.e. numeric string eighty) comes before "9" (i.e. numeric string nine) in the Unicode order.

If the array has undefined and/or empty slots, then those are pushed to the end of the array:

const nums = [80, , , undefined, 10, 9, 40]

nums.sort();

console.log(nums); // [10, 40, 80, 9, undefined, empty × 2]

Using Array.prototype.sort() With Compare Function

You can use the Array.prototype.sort() method with a compare function to sort array elements based on a specific criteria — where the function should return a negative, zero, or positive value to determine the sort order. It sorts all non-undefined array elements according to the return value of the compare function (as shown below):

compareFn(a, b) Return Value Sort Order
< 0 sort a before b;
> 0 sort a after b;
=== 0 order of a and b remains unchanged.

In versions prior to ES10, elements that compare equal might not retain their original order, because in those version the Array.prototype.sort() method is not guaranteed to use stable sort algorithm.

For example, the following sorts an array of numbers in ascending order:

// ES6+
const nums = [80, 10, 9, 40]

nums.sort((a, b) => a - b);

console.log(nums); // [9, 10, 40, 80]

If the array has undefined and/or empty slots, then those are pushed to the end of the array:

// ES6+
const nums = [80, , , undefined, 10, 9, 40]

nums.sort((a, b) => a - b);

console.log(nums); // [9, 10, 40, 80, undefined, empty × 2]

Please note that the arrow function syntax is only supported in ES6+. You can write the callback to Array.prototype.sort() without arrow function to make it compatible with earlier versions of ES.


This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.