JS, method behind the madness.

Daniel Dennis — Tue, 08 Sep 2020 17:21:22 +0000

Hi There, Welcome to my first Post ☄

It all started with this meme

A friend of mine called me out as a now lover of JS. To be honest, i was mad(mostly because I didn't have a come back) so i decided to try it myself, only to prove him right. If you are not keen enough, JS may get away with it. Allow me to demonstrate the problem.

Given an array of numbers [6,-2,2,-7], and sort them in Ruby and in JS using the Sort method .sort().
In JS:

    const array = [6,-2,2,-7];
    array.sort();

    // The result is: [ -2, -7, 2, 6 ]

In Ruby:

 array = [6,-2,2,-7];
 array.sort();

 # The Result is:  [-7, -2, 2, 6]

By now, I hope you see it now. If you are a beginner, Given a couple of numbers and telling the computer to sort the numbers using different programming languages, one language gives them back arranged correctly (Ruby), and the other gives a not so correct answer(JS).

The reason why this happens is because, Javascript is a weird language. Not weird, Just different. Javascript's sort method uses an In-Place algorithm to sort through the array elements.

This basically means, It converts the elements in an array into a sequence of Strings, then compares the sequences of UTF-16 code units values. In simple terms, makes the numbers become individual strings of letters and arranges them accordingly.
Now, the sort method isn't broken, to see this underlying in-place algorithm work, lets sort some Strings.

Given an array of Names:

    const array = ["Daniel", "Bob", "Fizz", "Buzz", "Cynthia"];
    array.sort();

    // The result is: [ 'Bob', 'Buzz', 'Cynthia', 'Daniel', 'Fizz' ]

Tada ☄☄ It works because we are sorting strings. The default behavior of the sort method will treat everything like a String.

Worry not, You can override this behavior by use of a parameter function.
Fasten your seatbelt, it may get tricky. The function will take 2 parameters itself say (a,b), To learn more on the function and it's capabilities, read this. The function basically just checks whether a or b is smaller, bigger or equal to the other and arranges them accordingly,regardless of the data type.

To tell the sort method to treat the elements in the array as numbers, just subtract the parameters (a,b) of the parameter function of the sort method. This will arrange the elements in ascending order irrespective of the data type.
Confusing, let me demonstrate:

    //given a and b are parameters of Compare function which we pass to the sort method.
     const array = [6,-2,2,-7];
        array.sort(function(a,b){
        return a-b;
    });

    // The result will be correct, you can check 😉

Yikes, that looks weird, lets redo it with a fat arrow function like sane people.

    const array = [6,-2,2,-7];
    array.sort((a, b) => return a - b);

    // The result will be correct, you can check again 😉

Much better now courtesy of pentacular.

And there you have it, a well sorted array.

Conclusion

Moral of the story is, If you have a farm, I highly recommend you turn to farming instead, because talking to computers using JS will make you cry at one point. Ha!, just kidding, Javascript has alot of weird stuff here and there, but when you love something, you love the flaws too.
Just a tip, if you don't like all the weird parts of JS, try Typescript by Microsoft which offers Types and other cool features on top of JS.

Till Next rant,

Daniel Katungi Dennis

DEV Community: Daniel Dennis

JS, method behind the madness.

Hi There, Welcome to my first Post ☄

Conclusion