Gautam Anand

Posted on Sep 22, 2023 • Edited on Dec 2, 2023

Javascript Sort: Simplified🧑‍💻

#javascript #beginners #webdev #programming

Is Javascript Sorting Simple?

Let's just admit that we all have gone to StackOverflow and just copied and pasted the javascript sort() method.

Well, I hope after reading this article, you might stop doing it and start writing your own custom javascript sorting methods.

Basics

To begin with any function, we need to understand the very basics of the sort() method.
It is a Higher Order Function, we'll know how.
As the name suggests, it sorts the elements in the array.

How?

Working of `sort()`

I love explaining with examples.

const array = ["Harry", "John", "Bob", "Zayn", "Chris"];
console.log(array.sort()); // [ 'Bob', 'Chris', 'Harry', 'John', 'Zayn' ]

This works exactly like sort(), except that it works only like this when we are sorting strings.

This is the default behavior of Javascript Sort() function - It converts the elements to string and compares the INSIDE value(i.e. the UTF-8 values) and returns the sorted array

For UTF-8 reference check this cheatsheet!
Alternatively, you may try running the below script

console.log("a".charCodeAt(0)); // 97

So in the above example, it resulted us the correct output because it actually looked up the UTF-8 values of the elements.

Suppose we have the same array variable

array.forEach((element) =>
  console.log(element.charCodeAt(0), " ", element.charAt(0))
);

This would actually tell us what is the value that was compared in real like this.

// console output
66   B
67   C
72   H
74   J
90   Z

Hence, Now when we actually try to sort an array full of numbers using the sort() function, we don't get the EXPECTED result.

Example

const array = [54, 133, 96, 0, 31, 101];
console.log(array.sort());

This will result an array like this - [0, 101, 133, 31, 54, 96] and the reason is stated above.

Solution

If you were reading up to here carefully, you must've remembered that sort is a higher-order function.
which basically means that it takes a callback() function as an argument.

The callback function takes two arguments(a,b)
a is the first element of the array and b is the second element.
It should return any of the three values: (-1, 0, 1) according to our requirements.

if negative: a < b
if positive: a > b
if zero: a == b // let it be as it is.

Writing our first compare function

It would be as simple as writing basic if else.

function compareFn(a, b) {
  if (a < b) return -1;
  else if (a > b) return 1;
  else return 0;
}

Let's just put our compareFn() in action!

const numbers = [54, 133, 31, 96, 0, 31, 101, 101];

function compareFn(a, b) {
  if (a < b) return -1; //BOOKMARK
  else if (a > b) return 1;
  else return 0; // means its equal
}

console.log(numbers.sort(compareFn)); // [ 0,  31,  31,  54, 96, 101, 101, 133 ]

See? we did it!
We actually sorted an array with numerical values!

But wait do we have to write the whole above logic just to create a sort() function that sorts numbers?
Javascript cannot be this harsh to us right?

It's not.

Our Final Touch to `sort()` function.

Well if we look closely to this line in our compare function

if (a < b) return -1;

NOTE:

This condition can only occur when we try to subtract a larger number from a smaller number that would result in a negative number.

Read that again!

So if we subtract b from a, this actually solves our all of the problems.

Listen.
We wanted a negative, a positive, and a zero right?

const a = 10;
const b = 100;
console.log(a - b); // would be negative

Also,

const a = 100;
const b = 10;
console.log(a - b); // would be positive

And if they are equal then it would actually give us zero.

This actually will sort our array again in an ASCENDING order with a much cleaner code.

We just cracked it!

Instead of writing the whole logic, we could just write our compare function like this.

function compareFn(a, b) {
  return a - b; // does all the job...
}

Now when we look at the code it should look like this

const numbers = [54, 133, 31, 96, 0, 31, 101, 101];

function compareFn(a, b) {
  return a - b; // b - a for descending order for obvious reasons.
}
console.log(numbers.sort(compareFn)); // [ 0,  31,  31,  54, 96, 101, 101, 133 ]

And since we know it just has a single line we can use an arrow function instead.

const nums = [6, 3, 8, 2, 5, 1];
console.log(nums.sort((a, b) => a - b)); // [1,2,3,5,6,8]

That's it.
Thank you for reading up to here,
If you really find this useful, share this blog with your friends, your co-workers, or anyone in your family who loves or hates javascript!

Social Links 👇
🌐Website
💻LinkedIn
🎶Instagram