🔧 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!