SORTing => The weird parts
Tags: javascript, interview, beginners, programming
Published: 2022-10-12 15:10:26


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hkcb1585p3twpopmyc6p.jpg)
As you realize the `sort` function performs mutations on the original array. This more often than not leads to bugs that are difficult to pin-point their origin and produce erroneous results.

There are various methods that one can apply to ensure that bugs do not arise in the process as using test, but **<u>in this article, we are solely interested in the possible programming errors that might arise when using `sort`</u>**.
Lets elaborate this using a simple method of sorting arrays in both ascending and descending order with the assumption that the array contains only numbers.

## Pit Fall 1: In Functions

One of the simplest method is the use of the sort function directly as:
Given the array `[12,21,56,1,88,3,2,45]` to sort from the largest to the smallest

```js
let arr = [12, 21, 56, 1, 88, 3, 2, 45];
const largeToSmall = (arr) => {
  return arr.sort((a, b) => a - b);
};
console.log(largeToSmall(arr)); //[1,2,3,12,21,45,56,88]
```

The code works as expected, lets take the code a little further by adding a smallest to largest conversion

```js
let arr = [12, 21, 56, 1, 88, 3, 2, 45];
function fnOrderArr(arr) {
  const smallToLarge = arr.sort((a, b) => a - b);
  const largeToSmall = arr.sort((a, b) => b - a);
  console.log(largeToSmall); //[88,56,45,21,12,3,2,1]
  console.log(smallToLarge); //[88,56,45,21,12,3,2,1]
}
fnOrderArr(arr);
```
Notice that `largeToSmall` is working fine as the array is arranged from the largest to the smallest but as soon as we hit the `smallToLarge` as we expect the results to be `[1,2,3,12,21,45,56,88]` but we got `[88,56,45,21,12,3,2,1]`. Whats going on?

Note that `sort()` function performs a mutable operation on our array. This means the function literally reorders the array elements in the array.

In our program:

### Step 1: Original Array

- Our original array is `[12, 21, 56, 1, 88, 3, 2, 45]`

### Step 2: Arrange by ascending Order

- After our `smallToLarge` operation the original array changes to `[1,2,3,12,21,45,56,88]`

### Step 3: Arrange by Descending Order

- Now the original array is `[1,2,3,12,21,45,56,88]` and by trying to order the function in descending order, there seem to develop a bug as it still resorts to `[1,2,3,12,21,45,56,88]` showing clearly that the `sort` function fails to perform as expected.

## Pit Fall 2: In Classes using Static Methods

The `sort` function display similar erroneous performance when used in classes with static methods

```js
class OrderInt {
  constructor(arr) {
    this.arr = arr;
  }
  static highToLow(arr) {
    const tempArr = arr;
    const highLow = tempArr.sort((a, b) => a - b);
    return highLow;
  }
  static lowToHigh(arr) {
    const tempArr = arr;
    const lowHigh = tempArr.sort((a, b) => b - a);
    return lowHigh;
  }
}

const arr = [23, 745, 166, 333, 221];
const orderDecreasing = OrderInt.highToLow(arr);
const orderIncreasing = OrderInt.lowToHigh(arr);
console.log("Order in Decreasing Order ", orderDecreasing); //[745,333,221,166,23]
console.log("Order in Increasing Order ", orderIncreasing); //[745,333,221,166,23]
```

## Using Classes without Static Methods

Strangely, using classes with normal method seem to work with the `sort` function working as expected.

```js
class OrderInt {
  constructor(arr) {
    this.arr = arr;
  }
  highToLow(arr) {
    const tempArr = arr;
    const highLow = tempArr.sort((a, b) => a - b);
    return highLow;
  }
  lowToHigh(arr) {
    const tempArr = arr;
    const lowHigh = tempArr.sort((a, b) => b - a);
    return lowHigh;
  }
}
const Order = new OrderInt()
const arr = [23, 745, 166, 333, 221];
console.log("Order in Decreasing Order ", Order.highToLow(arr)); //[23,166,221,333,745 ]
console.log("Order in Increasing Order ", Order.lowToHigh(arr)); //[745,333,221,166,23]
```

Although the `sort` function works both when ordering in ascending or descending order, it <u>**still mutates the original array**</u>

Leave a like :heart: if you found this useful
Happy coding :fire: :fire: