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 in this article, we are solely interested in the possible programming errors that might arise when using sort.
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

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

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

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.

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 still mutates the original array

Leave a like ❤️ if you found this useful
Happy coding 🔥 🔥