JavaScript - Sort an Array of Strings

Here are the various methods to sort an array of strings in JavaScript

1. Using Array.sort() Method

The sort() method is the most widely used method in JavaScript to sort arrays. By default, it sorts the strings in lexicographical (dictionary) order based on Unicode values.

let a = ['Banana', 'Apple', 'Cherry', 'Mango'];
a.sort();
console.log(a);

[ 'Apple', 'Banana', 'Cherry', 'Mango' ]

• sort() sorts the array a in place. In the case of strings, it compares the Unicode values of the characters.
• This method sorts the strings in ascending order by default.

2. Using Array.sort() with a Custom Comparator

If you need more control over the sorting (e.g., sorting case-insensitively or in reverse order), you can pass a custom comparator function to the sort() method.

Case-Insensitive Sort

let a = ['banana', 'Apple', 'cherry', 'Mango'];
a.sort((s1, s2) => 
	s1.toLowerCase().localeCompare(s2.toLowerCase()));
console.log(a);

[ 'Apple', 'banana', 'cherry', 'Mango' ]

• localeCompare() compares two strings and returns a negative, zero, or positive value based on their lexicographical order.
• By using toLowerCase(), you ensure the sorting is case-insensitive.

Reverse Order Sort

let a = ['Banana', 'Apple', 'Cherry', 'Mango'];
a.sort((s1, s2) => 
	s2.localeCompare(s1));
console.log(a); 

• The comparator function (s1, s2) => s2.localeCompare(s1) reverses the order of comparison, resulting in descending order.

3. Using Array.sort() with Numeric Sorting (for Length)

If you need to sort an array of strings by the length of each string (instead of lexicographically), you can customize the comparator to compare string lengths.

let a = ['Banana', 'Apple', 'Cherry', 'Mango'];
a.sort((s1, s2) => 
	s1.length - s2.length);
console.log(a);

[ 'Apple', 'Mango', 'Banana', 'Cherry' ]

• The comparator function (s1, s2) => s1.length - s2.length sorts the strings by their length in ascending order.
• You can modify the comparator to sort in descending order by changing the comparison to s2.length - s1.length.

4. Using Array.sort() with Locale-Sensitive Sorting

If you're working with strings in different languages and need to account for locale-specific sorting rules (e.g., accented characters), you can use localeCompare() with the locales and options parameters.

let a = ['apple', 'banana', 'cherry', 'mango', 'ápple'];
a.sort((s1, s2) => 
	s1.localeCompare(s2, 'en', { sensitivity: 'base' }));
console.log(a);

[ 'apple', 'ápple', 'banana', 'cherry', 'mango' ]

• localeCompare() with en as the locale ensures that sorting respects the English alphabet's rules.
• The sensitivity: 'base' option ignores diacritic marks (e.g., accents).

5. Using Array.sort() with Custom Order (Non-Alphabetical)

If you want to sort the strings based on a custom order (not just alphabetically), you can define an order map and sort the array based on this custom order.

let a = ['Banana', 'Apple', 'Mango', 'Cherry'];
let order = ['Mango', 'Apple', 'Banana', 'Cherry']; //custom order
a.sort((s1, s2) => 
	order.indexOf(s1) - order.indexOf(s2));
console.log(a);

[ 'Mango', 'Apple', 'Banana', 'Cherry' ]

• The order.indexOf(s1) and order.indexOf(s2) functions retrieve the indices of each string in the custom order array, sorting the array based on these indices.

Which Approach to Choose?