JavaScript Sort Array of Objects Alphabetically

If you want to align the array elements in alphabetical order, you can use the localeCompare() method, sort() method, and Intl.Collator() constructor in javascript. In many situations, we need to align array elements in alphabetical order like the order of the student’s name list, employee name list, etc. Sorting arrays of objects can be particularly helpful when dealing with large datasets or when you need to display information in a specific order. So, in this article, we’ll explore how to sort an array of objects alphabetically using JavaScript.

3 Easy ways to sort an array of objects alphabetically

1. Using the sort() method

In this method, we use the sort() method to sort the elements of an array in place and returns the sorted array.

const data= [ { name: 'John', age: 30 }, { name: 'Mary', age: 25 }, { name: 'Alex', age: 35 },];
data.sort((a, b) => a.name.localeCompare(b.name));
console.log(data);

Output:

{name: 'Alex', age: 35}
{name: 'John', age: 30}
{name: 'Mary', age: 25}

• In this above example code, we have created the array ‘data‘ and assigned the elements by objects.
• Then we use the sort() method for array ‘data’ and we pass the arguments as (a,b), which represent two elements of the array being compared. The function returns a value that determines the order in which the elements should be sorted.
• Then we ‘a.name.localeCompare(b.name)‘ compares the ‘name‘ property of ‘a‘ and ‘b‘ using the ‘localeCompare()‘ method. This method compares two strings and returns a negative, zero, or positive number depending on their lexicographical order.
• So, finally, the whole function returns the array in alphabetic order based on the name property of each object

2. Using the localeCompare() method

This method is similar to the sort() method, but in this method, we’re using the localeCompare() method directly to sort the objects. We create a new array with the sorted objects using the map() method.

const data = [{name: 'Roy'}, {name: 'Alex'}, {name: 'Peter'}];
const sortedArray = data.map(o => o.name).sort((a, b) => a.localeCompare(b)).map(name => data.find(o => o.name === name));
console.log(sortedArray);

Output:

name: Alex
name: Peter
name: Roy

In this example code:

• We have created an array of objects called ‘data‘.
• Then we create the variable ‘sortedarry‘ to store the sorted array ‘data’.
• And use the map() method to create an array of name properties, sort them using the localeCompare() method, and then use the map() method again to find the corresponding objects in the original array
• Finally, the variable ‘sortedArray’ contains the alphabetically sorted array. So, we logged that variable using the console.log() method.

3. Using the Intl.Collator() constructor

In this method, we use the ‘Intl.Collator() constructor’ to sort the array of object by alphabetical order.

const collator = new Intl.Collator('en', {sensitivity: 'base'});
const data= [{name: 'John'}, {name: 'Alice'}, {name: 'Bob'}];
data.sort((a, b) => collator.compare(a.name, b.name));
console.log(data);

Output:

{name: 'Alice'}
{name: 'Bob'} 
{name: 'John'}

• In this above example code, we have created the ‘Intl.Collator‘ object for sorting strings in a locale-sensitive way. We pass two arguments to the ‘Intl.Collator() constructor, the first argument is ‘en‘ and the second is ‘{sensitivity: ‘base’}’. The first argument specifies the locale as English and the second argument specifies the sorting should be case-insensitive.
• Then we create a new array of three objects called ‘data‘, each with a ‘name‘ property containing a string value.
• We use sort() method and it takes two arguments, (a and b), which represent elements of the array being compared.
• Use ‘compare()’ method of collator objects to compare the ‘name‘ property of the two objects and return a value indicating their relative order.
• Finally, we logged the array ‘data’ and we got the output alphabetic order.