Array Method Sort on Numbers;

First experience with Sort()

As a beginner developer learning Javascript, there were a few things I found confusing.

During my learning of Javascript Arrays, one of those things was Sort().

Sort was a native array method that would take an array, compare each element with the next and automatically sort its elements in ascending order. Simple right? But I had to ask myself, "What is actually happening under the hood?."

Take this example below.

Here, I have an array of numbers, in which I would then apply the sort method on.

In my mind, I'm thinking, "If every number is sorted in ascending order, why is 10 not at the end of this array?".

Obviously, I have zero clue on what is happening as I have had zero prior experience with programming.

Sort() is not behaving like I'd expect.

Googling

After browsing a few online forums and a couple videos, I felt like I started to understand.

If we use the sort() by itself, with no argument passed into it, the method will sort the elements in the array. But the only issue is, this method will convert the elements it reads into datatype-- strings.

We have to remember that a method will behave like a robot so when it is reading a multi-digit string, it's seeing it as a series of numbers and not as a whole.

As strings, it will compare the Unicode numerical code values of the first character in those string numbers. The number 10's first character is 1 which has a value less than number 2.

Solution

In the midst of googling up a storm on sort(), I came across some solutions to how we can change up how the sort method operates.

Here, I have an array named numbers with its elements in random order but I'd like to sort them in ascending order.

Firstly, as an array method, Sort has () because it can accept an argument. This is what I used to change the method.

Instead of allowing the method to read elements as strings, I passed in a parameter. A function, more specifically. The function itself, will take in comparative parameters, a and b. The function will then return a value and depending on that value, it will determine the order in which the method will sort.

In the example above, we can see the sort() taking in a function which has parameters (a, b) and it will no longer compare a and b as strings but integers, and then it returns the value resulting from a - b.

Now, as I said before, the value will determine the sorting action. But how?

In the code example, a - b, it will subtract b from a.

The resulting value can only be 1 out of 3.

• Negative number


• Positive number


• 0

If a - b results in a number that is negative, a will come before b.

Below, if we see a as 1 and b as 10, the difference would be -9.

So 1 would come before 10.

Now, if a - b results to a positive number, b will come before a.

If b comes before a, 2 will now be before 10.

Lastly, if a - b equates to zero, then order will remain the same.

If my numbers array above had a duplicate number, this value would occur once.

Also, on the side note, if you wanted to sort in descending order, you could do b - a, which would sort inversely.

As as example,

If a - b, was 5 minus 5, it would result to zero.

Thoughts

To wrap up, if you wanted to apply sort method to an array of numbers in ascending order, be sure to pass in a function like (a, b) => a - b;

Credits

https://forum.freecodecamp.org/t/arr-sort-a-b-a-b-explanation/167677

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

https://www.youtube.com/watch?v=CTHhlx25X-U

https://www.freecodecamp.org/news/how-to-sort-javascript-array-accurately/

https://www.freecodecamp.org/news/how-does-the-javascript-sort-function-work/