How to Sort Items Alphabetically in JavaScript

Sort Items Alphabetically in JavaScript

Sorting is one of the most common tasks when working with lists. Whether you're sorting names in a contact list, items in a shopping cart, or even a dropdown menu, knowing how to alphabetize values in JavaScript is incredibly useful. JavaScript gives us several flexible options to sort array items alphabetically, depending on how precise or localized the comparison needs to be.

In this beginner-friendly tutorial, we’ll explore how to sort array items alphabetically using different techniques. We’ll start with the built-in sort() method, then enhance it with localeCompare() for more accurate and locale-aware results. Each method is illustrated with full examples and expected output.

Method 1: Using sort() – Simple Alphabetical Sorting

The easiest way to sort an array alphabetically is with the built-in sort() method. When used without arguments, sort() converts all elements to strings and compares their UTF-16 code units. This is usually sufficient for basic sorting of lowercase strings.

const fruits = ["banana", "apple", "cherry", "date"];

fruits.sort();

console.log("Alphabetically sorted:", fruits);

Alphabetically sorted: [ 'apple', 'banana', 'cherry', 'date' ]

Method 2: Using localeCompare() – Case and Locale Aware

When dealing with capital letters or accented characters (like in international names), localeCompare() is a better option. It provides a locale-sensitive string comparison and can be used inside the sort() function for more accurate and human-friendly sorting.

const fruits = ["Banana", "apple", "Cherry", "date"];

fruits.sort((a, b) => a.localeCompare(b));

console.log("Locale-aware sorted:", fruits);

Locale-aware sorted: [ 'apple', 'Banana', 'Cherry', 'date' ]

Method 3: Case-Insensitive Sort – Force Lowercase Before Comparing

Sometimes you want a truly case-insensitive sort where "Apple" and "apple" are treated the same. To achieve this, you can convert both strings to lowercase (or uppercase) during comparison.

const words = ["Banana", "apple", "cherry", "Date"];

words.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));

console.log("Case-insensitive sorted:", words);

Case-insensitive sorted: [ 'apple', 'Banana', 'cherry', 'Date' ]

When Should You Use Each Method?

Use sort() for quick, simple alphabetical sorting where case sensitivity doesn’t matter or when all values are lowercase. Use localeCompare() for more nuanced, human-friendly sorting—especially with mixed-case or international characters. When case-insensitive accuracy is a must, explicitly transform the values using toLowerCase() or toUpperCase() during the comparison.

Final Thoughts

Sorting items alphabetically is more than just cosmetic—it's often the backbone of user-friendly interfaces. Whether you’re sorting names, dropdowns, search results, or tables, JavaScript gives you plenty of tools to handle the task effectively.

Take some time to test these methods with different types of input. Try arrays with numbers, symbols, and accented characters. The more you practice, the more natural it becomes to decide which technique fits best—and your sorted lists will always feel neat, intentional, and user-first.