How Does Sort Method Work in JavaScript?

Basic Understanding of Sort Method

The sort() method, as its name suggests, sorts every element in an array.

By default, the elements are converted into strings and sorted in ascending order based on UTF-16 code unit values.

If the array contains various types of characters such as signs, numbers, and letters with different cases, the order would be like this; signs * > numbers > upper case letters > lower case letters.
*with exceptions

const array = ["lettuce", 6, 10, "cabbege", "/", "tomato", "Cucumber", "onion", "Squash", 3, "!"];

array.sort();

console.log(array);

// --> ["!", "/", 10, 3, 6, "Cucumber", "Squash", "cabbege", "lettuce", "onion", "tomato"]

Customizing Sort Order — CompareFunction

When sorting the array that only has numbers, how do you think the elements would be ordered?

Let’s take a look at what happened with the example below.

const array = [1, 200, 55, 421, -14, -23, 1000];

array.sort();

console.log(array);

// --> [-14, -23, 1, 1000, 200, 421, 55]

I believe it was not what you expected.

As described above, the sort() method converts every element into a string, so it won’t sort them by numerical order.

However, with compareFunction, you can customize sort order as you wish so that you can fix this issue. See the example below.

const array = [1, 200, 55, 421, -14, -23, 1000];

array.sort(function compareFunction(a, b){
  return a - b;
});
//arrow function ver.
//array.sort((a, b) => a - b);

console.log(array);

// --> [-23, -14, 1, 55, 200, 421, 1000]

By setting two arguments a and b, and returns a certain value, you can manipulate how to sort. In this example, a represents the element which sort() method compares with the next element while b represents the next element which a is compared with.

The compareFunction has two types of forms.

When an array contains only numbers as the last example, the form can be like the following. It’s assumed that the array does not contain Infinity and NaN! Please remove them if they exist!

const array = [1, 0, 4, 3, -1, -3, 2];

array.sort((a, b) => b - a); //descending order

console.log(array);

// --> [4, 3, 2, 1, 0, -1, -3]

If it is not the case, the form can be like the following.

const array = ["lettuce", "cabbege", "tomato", "cucumber", "onion", "squash"];

array.sort(function compareFunction(a, b){ //descending order
  if(a > b){
    return -1;
  } else if(b > a){
    return 1;
  }
});

console.log(array);

// --> ["tomato", "squash", "onion", "lettuce", "cucumber", "cabbege"]

The sort() method shown in the example above acts differently according to its return value. (in the last example, it returns 1 or -1 )
Also, the compareFunction must have the return value or it causes an error.

• If compareFunction(a, b) returns less than 0, leave a and b unchanged.

• If compareFunction(a, b)returns 0, leave a and b unchanged with respect to each other, but sorted with respect to all different elements. Note: the ECMAScript standard only started guaranteeing this behavior in 2019, thus, older browsers may not respect this.

• If compareFunction(a, b) returns greater than 0, sort b before a.

---

Let’s break down what’s happening here with the last example.

Firstly, a represents "lettuce" and b represents "cabbege".
Comparing these two elements, the condition a > b is true and returns –1.
Nothing changes here.

["lettuce", "cabbege", "tomato", "cucumber", "onion", "squash"];

Now, a is "cabbege" and b is "tomato". The function returns 1 this time, so "tomato" comes before "cabbege" .

["lettuce", "tomato", "cabbege", "cucumber", "onion", "squash"];

This time, comparing "lettuce" as a with "tomato" as b, it returns 1 again. The order changes like the following.

["tomato", "lettuce", "cabbege", "cucumber", "onion", "squash"];

Continuing these steps, each element gets compared, like a round-robin tournament, and changes order respectively.
In consequence, an array gets sorted as intended.

---

Thanks to compareFunction, the sort() method can work with an associative array, which means it sorts values accessing each with keys (properties).
The following example sorts the age of each Disneyland from the oldest to the youngest.

const array = [
  { name: 'Disneyland Park', location: 'California', open: 1955 },
  { name: 'Tokyo Disneyland', location: 'Chiba', open: 1983 },
  { name: 'Hong Kong Disneyland', location: 'Lantau Island', open: 2005 },
  { name: 'Disneyland Paris', location: 'Coupvray', open: 1992 }
];

array.sort((a, b) => { //sort old to young
  const now = new Date();
  const thisYear = now.getFullYear();
  return (thisYear - b.open) - (thisYear - a.open);
}); 

console.log(array);

// -->
//[
//{ name: 'Disneyland Park', location: 'California', open: 1955 },
//{ name: 'Tokyo Disneyland', location: 'Chiba', open: 1983 },
//{ name: 'Disneyland Paris', location: 'Coupvray', open: 1992 },
//{ name: 'Hong Kong Disneyland', location: 'Lantau Island', open: 2005 }
//]

Heads-up!

Last but not least, this method acts on the existing array unlike map() or filter().

If you need to keep an original array, declare a new variable and assign a copy of the original array using slice() method. Then, sort the copy.

const array = [1, 0, 4, 3, -1, -3, 2];
const sorted = array.slice();

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

console.log(`Original array: [${array}]`);
console.log(`Sorted array; [${sorted}]`);

// -->
//"Original array: [1,0,4,3,-1,-3,2]"
//"Sorted array; [4,3,2,1,0,-1,-3]"

---

Reference:
Array.prototype.sort() — JavaScript | MDN
【JavaScript入門】sort()による配列・文字列・オブジェクトのソート方法 | 侍エンジニアブログ