How Does Sort Method Work in JavaScript?
Tags: javascript, codenewbie, beginners
Published: 2021-02-21 08:07:12

##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](https://asecuritysite.com/coding/asc2).

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__

```javascript
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.
```javascript
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.
```javascript
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!**
```javascript
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.
```javascript
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.

```javascript
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.

```javascript
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)
[【JavaScript入門】sort()による配列・文字列・オブジェクトのソート方法 | 侍エンジニアブログ](https://www.sejuku.net/blog/62904)