How to alphabetically sort an array of strings in JavaScript
One of the command tasks in JavaScript is to sort an array of strings alphabetically. There are multiple methods to achieve this type of sorting. We will look at some of these methods.
1. Sorting with the sort method
To perform a simple alphabetical sort on an array of strings, we can use the sort method. This method sorts the elements of an array in place and returns the sorted array. Let’s look at a working example of this method below.
const fruitsArr = ["mango", "peach", "cherry", "apple", "banana"];fruitsArr.sort();console.log(fruitsArr);
Explanation
Line 1: We define an array of strings,
fruitsArr, with some fruit names.Line 3: We use the
sortmethod onfruitsArrthat sorts the array elements in place and returns the array.Line 5: We print the array to the console.
2. Using localeCompare for sorting
We can use the localeCompare method if we have a use case where we want to sort strings based on locale or case sensitivity. Let’s look at a working example of this method to handle case-sensitive sorting below.
const fruitsArr = ["Cherry", "Peach", "pineapple", "apple", "Banana", "Avocados"];fruitsArr.sort((a, b) => a.localeCompare(b));console.log(fruitsArr);
Explanation
Line 3: We use the
sortmethod withlocaleCompareonfruitsArrthat provides case-sensitive sorting by default.Line 5: We print the array to the console.
Another use case is the locale-based comparison of an array of strings alphabetically. The localeCompare method is useful for sorting strings in different languages or with special characters and allows us to tackle our use case. Let’s look at a working example of this below.
const wordsArr = ["éducativé", "Educative", "educativé", "éducative"];wordsArr.sort((a, b) => a.localeCompare(b));console.log(wordsArr);
Explanation
Line 1: We define an array of strings,
wordsArr, with some words.Line 3: We use the
localeComparemethod to compare two strings according to the sort order of a specified locale. By default, it uses the current locale.When comparing,
["éducativé", "Educative", "educativé", "éducative"], thelocaleComparemethod sorts the strings as follows:"Educative"comes first because capital letters are sorted before accented and lowercase letters by default."educativé"comes next because lowercase"e"without accent, follows uppercase letters."éducative"and"éducativé"come next because"é"(ewith an accent) is treated as a distinct character that comes after plain"e".
Line 5: We print the array to the console.
3. Sorting with a custom order
We might need to sort strings based on a custom sorting order. For example, we may want to sort an array of objects by a specific property. Let’s look at an example below where we will sort an array of objects alphabetically based on the name property.
const technologies = [{ name: "React", type: "Frontend"},{ name: "java", type: "Backend"},{ name: "Python", type: "Backend"},{ name: "angular", type: "Frontend"},{ name: "Node.js", type: "Backend"}];technologies.sort((a, b) => a.name.localeCompare(b.name));console.log(technologies);
Explanation
Lines 1–7: We define an array of objects,
technologies, where each object has anameand atypeproperty.Line 9: We use the
sortmethod with a custom comparison function to sort the objects by thenameproperty.a.name.localeCompare(b.name)compares thenameproperties of two objects.Line 11: We print the array to the console.
Sorting an array of strings alphabetically in JavaScript can be done in various ways depending on the requirements. The sort method, along with the localeCompare method can be customized for case-sensitive, locale-aware, or criteria-based sorting cases.
