Sorting JavaScript Array: JS Array sort() Method

Before beginning with thee technical part of sorting JavaScript array, let discuss about what is sorting and why we need to perform sorting to a JavaScript Array? let's break it in into 2 part:

1. What is Sorting?
2. Why we need Sorting?

What is Sorting?

The word Sorting came for Sort, which basically stand for arranging the array's values in an Ascending or Descending order.

const a =[5,8,1,0,3,2]
Ascending order sorting-> [0,1,2,3,5,8]
Descending order sorting -> [8,5,3,2,1,0]

now, the second part coming to the picture,

Why we need Sorting?

Well, during the developing process, we all have different types of requirements, like as an example if we are creating a students list, we have to show the students list based on their name, roll number, subject wise number or even base on total number they got in ascending or descending order.

So, now understand how does Sorting work in JavaScript Array

In JavaScript, there is one in-built sort() method present to perform JS array sorting, which will return the sorted array.

Here some thing we need to keep in our mind :

• Default return: By default it will return sorted array in an ascending order.
• It will convert the elements into String and by comparing their UTF-16 code values Sequences.

const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ]
=> console.log(days.sort());
---> ['Friday', 'Monday', 'Saturday', 'Sunday', 'Thursday', 'Tuesday', 'Wednesday']

const numbers = [9,3,50,12,100,21,17]
=> console.log(numbers.sort());
---> [100, 12, 17, 21, 3, 50, 9]

Here we see while we perform sort() method, in case of string the output is as expected, in an ascending order. But in case of numbers, it doesn't fit our expectations. okay, okay, so let us understand why?????

In numeric sort, 3 come before 100 or 12, but as because numbers are converted to strings, "100" comes before "3".

Now the new challenge appear, how to solve this string issue in JS array Numeric elements Sorting.

In this case we have to create a comparison function which will compare between 2 elements and give a sorted array.

compareFunction(a,b) return value > 0  : sorting order **a** after **b** 
compareFunction(a,b) return value < 0  : sorting order **a** before **b** 
compareFunction(a,b) return value === 0  : keep original sorting order of **a** & **b** 

**** In case of undefined elements, those elements will sort to the end of the array with no call to compareFunction();

Core Code Explanation:

function compareFunction(a,b){
  if (a<b) {
     return -1; 
  }
  if (a>b) {
     return 1; 
  }
}

Let's create the working compare function for Ascending Sorting:

const numbers = [9,3,50,12,100,21,17]
function compareFunction(a,b) {
  return a-b;
}

numbers.sort(compareFunction);
=>[3, 9, 12, 17, 21, 50, 100]

Now, in the same way we can create a function for Descending Sorting:

const numbers = [9,3,50,12,100,21,17]
function compareFunction(a,b) {
  return b-a;
}

numbers.sort(compareFunction);
=>[100, 50, 21, 17, 12, 9, 3]

Woaooow!!! we solve the trick of sorting the things in JS array.

Now let's make this as an arrow function for sorting the elements in Ascending or Descending order:

const numbers = [9,3,50,12,100,21,17];
//Ascending order Sorting
numbers.sort((a,b)=>a-b);
 ----> [9, 3, 50, 12, 100, 21, 17];

//Descending order Sorting
numbers.sort((a,b)=>b-a);
---->[100, 50, 21, 17, 12, 9, 3]

So far we learn and understand the way of handling the Sorting process of JS array. If anywhere you face any issue to understand the method feel free to reach out me in platform like twitter, LinkedIn.

Please share this to all out there.

Take Care. Have a nice Day. Keep Learning, Keep Growing.