Array.sort() in JavaScript - I was asked about this in an interview

I was in an interview and I was given an array of strings.

const arr = [  "karachi",  "lahore",  "kolachi",  "islamabad"]

He asked me to sort it in alphabatical order.

I tried:

arr.sort((a, b) => {  return a < b;});

He said it will work for numbers (actually it won't) but does not work for strings.

Then I tried

arr.sort((a, b) => {  return a.charAt(0) < b.charAt(0);});

He said it will work for just the first characters (actually it won't), then how karachi and kolachi starting with k will be sorted?

I was blank.

He said what are a and b?

I said a is the current element (the element at the index of current iteration) and b is the next element (the element at the current iteration + 1 index).

But actually, it is the opposite. a is the next element and b is the current element.

Then he asked, does the sort modify the original array or returns a new array.

Honestly, most of the time I am working with .map(), .filter(), .some(), and .every(). So I knew the behaviour of these methods but I don't remember when was the last time I used .sort().

I said, it does not modify the original array, rather returns a new array like .map().

But it is the opposite. .sort() modifies the original array and returns the reference to the original array, which is now sorted.

How does actually .sort() work?

Array.sort() accepts a an optional compare function as an argument.

If we do not provide any compare function, the sort method converts all the non-undefined elements to string, and then compare their sequences of UTF-16 code units values.

What does "compare their sequences of UTF-16 code units values" means?
To put it simple, let's say we write character a which is encoded as UTF-16 in JavaScript. In decimal it's value will be 97. For b it will be 98. i.e.
A = 65
B = 66
C = 67
and so on.
I expect you know the ACII table.

So basically the array of strings will automatically be sorted by .sort() method correctly without passing any compare function.

In case of numbers, the behaviour is same;

const arr = [1, 30, 4, 21, 100000];arr.sort();console.log(arr);// expected output: [1, 100000, 21, 30, 4]

Because each number is first converted into string, and then compared with respect to their UTF-16 code units values.

But If we provide a compare function to sort based on numbers:

const arr = [1, 5, 3, 10, 7]arr.sort((nextValue, prevValue) => {  // if returnValue > 0, move nextValue after the prevValue  // if returnValue < 0, move the nextValue before the prevValue  // if returnValue === 0, keep the original order, do not move any value  return nextValue - prevValue;});

So, the sort method can be thought of like this:

function compareFunction(a, b) {  if (a is less than b by some ordering criterion) {    return -1;  }  if (a is greater than b by the ordering criterion) {    return 1;  }  a must be equal to b  return 0;}

I hope this will make the things a bit clear about Array.sort()

That's it for this post. Write your thoughts in the comments below!