Arrays in JavaScript have a built-in sort method, which allows us to have a high-performance sorting without writing our own sorting algorithm. However, do you know how to use sort? How does the compareFn passed in sort work? When compareFn is (a, b) => b - a, will the sort be ascending or descending? Why?

This is not only commonly used in work, but also a frequently asked question in interviews.

Make sure you have a good understanding of this concept. If you are not familiar with it, let us find out through this article.

How to use sort

If you look at the MDN documentation, you can see that sort is used like this.

sort(compareFn);

Among them, compareFn requires two parameters a and b. In the comparison rules, it must return 1, 0 or -1. The rules to be followed are as follows:

function compareFn(a, b) {
   if (a is greater than b) {
     return 1; // means a is placed after b
   }

if (a is smaller than b) {
     return -1; // means a is placed before b
   }

   // a is equivalent to b
   return 0; // means the position between a and b remains unchanged
}

But when writing comparisons between numbers, we tend to write a little more concisely.

In the following example, compareFn is (a, b) => b - a. Here comes a classic interview question, will (a, b) => b - a be in ascending or descending order? And why?

let arr = [3, 22, 17, 35, 2, 66];
arr.sort((a, b) => b - a);
// Will arr be [2, 3, 17, 22, 35, 66] or [66, 35, 22, 17, 3, 2] ?

(a,b) => b - a is ascending or descending? Why?

Will (a, b) => b - a be ascending or descending? The answer is descending, so arr in the above example would become [66, 35, 22, 17, 3, 2] .

let arr = [3, 22, 17, 35, 2, 66];
arr.sort((a, b) => b - a); // [66, 35, 22, 17, 3, 2]

Conversely, if the compareFn is (a, b) => a - b, it will be in ascending order, making arr become [2, 3, 17, 22, 35, 66].

let arr = [3, 22, 17, 35, 2, 66];
arr.sort((a, b) => b - a); // [2, 3, 17, 22, 35, 66]

Why is this so? Remember we mentioned in the previous paragraph that in compareFn,

• If a is greater than b, return 1
• If a is smaller than b, return -1
• Returns 0 if a is equal to b

Let's look at the following deduction next:

When (a, b) => a - b,

• If a > b, then a - b will be greater than 0, then return 1, a is placed after b, the order will be b, a, because a is greater than b, so it is ascending
• If a < b, then a - b will be less than 0, then return -1, a is placed before b, the order will be a, b, because a is smaller than b, the result is also ascending

Similarly, when (a, b) => b - a,

• If a > b, then b - a will be less than 0, then return -1, b will be placed after a, the order will be a, b, because a is greater than b, so it is descending
• If a < b, then b - a will be greater than 0, then return 1, b is placed before a, the order will be b, a, because a is less than b, the result is also descending

As can be seen from the above example, when (a, b) => a - b, no matter a is greater than b, or a is less than b, it will be ascending.

Conversely, when (a, b) => b - a, no matter a is greater than b, or a is less than b, it will be descending.

If you can explain through such an example in the interview, I believe you can pass this interview question.

Thanks for reading.

If you like the content, check out the free frontend interview prep resources my friends and I curated at explainthis.io.

I have got frontend engineer offers from both startup and FAANG companies. I would like to help as many people as possible to land a job. If you have any questions regarding to frontend engineering or frontend interview. Feel free to reach out to me at hello@explainthis.io