comparing 2 strings alphabetically for sorting purposes

Just remember that string comparison like "x" > "X" is case-sensitive

"aa" < "ab" //true
"aa" < "Ab" //false

You can use .toLowerCase() to compare without case sensitivity.

You do say that the comparison is for sorting purposes. Then I suggest localeCompare instead:

"a".localeCompare("b");

It returns -1 since "a" < "b", 1 or 0 otherwise, like you need for Array.prototype.sort()

Keep in mind that sorting is locale dependent. E.g. in German, ä is a variant of a, so "ä".localeCompare("b", "de-DE") returns -1. In Swedish, ä is one of the last letters in the alphabet, so "ä".localeCompare("b", "se-SE") returns 1.

Without the second parameter to localeCompare, the browser's locale is used. Which in my experience is never what I want, because then it'll sort differently than the server, which has a fixed locale for all users.

Also, if what you are sorting contains numbers, you may want:

"a5b".localeCompare("a21b", undefined, { numeric: true })

This returns -1, recognizing that 5 as a number is less than 21. Without { numeric: true } it returns 1, since "2" sorts before "5". In many real-world applications, users expect "a5b" to come before "a21b".

Lets look at some test cases - try running the following expressions in your JS console:

"a" < "b"

"aa" < "ab"

"aaa" < "aab"

All return true.

JavaScript compares strings character by character and "a" comes before "b" in the alphabet - hence less than.

In your case it works like so -

1 . "a​aaa" < "​a​b"

compares the first two "a" characters - all equal, lets move to the next character.

2 . "a​a​​aa" < "a​b​​"

compares the second characters "a" against "b" - whoop! "a" comes before "b". Returns true.