An array of objects might have a string value in it.
You can sort an array of objects by a String property value in JavaScript using the array.sort((a, b) => { sortFunction}) method.
Basic Example
array.sort((a, b) => {
if (a.property < b. property) return -1;
if (a. property > b. property) return 1;
return 0;
});This tutorial teaches you the different methods to sort an array of objects by a string property value in JavaScript and when it is appropriate method to each method.
Using Sort() Method
The sort() method sorts the elements of the array in place and returns it the same array with the values sorted.
The sort() method accepts a comparison function as an argument to determine the order of the elements. By default, it sorts the elements in ascending order.
- If the function returns a negative value, the elements are swapped
- If it returns a positive value, the elements are NOT swapped as they are in the ascending order
- If it returns
0, they are considered equal, and their order is unchanged.
Use this method when you want to compare the objects and sort them in a case-sensitive way.
Code
The following code demonstrates how to use the sort() method to sort an array of objects by the name property:
let people = [
{ name: "Charlie", age: 20 },
{ name: "David", age: 50},
{ name: "Alice", age: 30 },
{ name: "Bob", age: 40 }
];
people.sort((a, b) => {
if (a.name < b.name) return -1;
if (a.name > b.name) return 1;
return 0;
});
console.log(people);
// Output: [{name: "Alice", age: 30}, {name: "Bob", age: 40}, {name: "Charlie", age: 20}, {name: "David", age: 50}]Using Sort() method For Case Insensitive order
This section teaches how to use the sort() method for Case Insensitive order.
By default, when comparing strings, upper case letters have a different weight than lower case letters, and A would be positioned after b. Hence it is a good practice to equalize the strings to either lowercase or uppercase (more commonly, lowercase, due to efficiency).
To compare and sort in a case-insensitive order,
- Convert both the string elements to lowercase using the toLowerCase() method
- The objects will be compared and sorted in a case-insensitive way
Use this method when you want to compare the objects and sort them in a case-INsensitive way.
Code
let people = [
{name: "Alice", age: 30},
{name: “bob", age: 40},
{name: "Charlie", age: 20},
{name: "David", age: 50}, ];
people.sort((a, b) => {
if (a.name.toLowerCase() < b.name.toLowerCase()) return -1;
if (a.name.toLowerCase() > b.name.toLowerCase()) return 1;
return 0;
});
console.log(people); // Output: [{name: "Alice", age: 30}, {name: “bob", age: 40}, {name: "Charlie", age: 20}, {name: "David", age: 50}Using the Sort() Method with the LocaleCompare() Function
Sometimes, the array might have text with characters from different languages(Locales).
The JavaScript string object provides a method for the localCompare().
To sort the array in a specific locale,
- Use the
localeCompare()function as the compare function for thesort()method - It returns a negative value if the first string comes before the second one in the specified locale
- It returns a positive value if it comes after, and
0if they are equal.
Use this method when your array contains string properties from different languages other than English and you want to compare them accordingly.
Code
The following code demonstrates how to use the sort() method with the localeCompare() function to sort an array of objects by the name property in the Deutsch locale:
let people = [
{name: "Alice", age: 30},
{name: "Bob", age: 40},
{name: "Schäfer", age: 50},
{name: "Charlie", age: 20}
];
people.sort((a, b) => a.name.localeCompare(b.name, “de”));
console.log(people); // Output: [{name: "Alice", age: 30}, {name: "Bob", age: 40}, {name: "Charlie", age: 20}, {name: "Schäfer", age: 50}]Using the Sort() Method with the Intl.Collator Object (For Language Sensitive Comparison)
Sometimes, the array might have text with characters from different languages(Locales).
The Intl.Collator object is a constructor for collator objects that enable language-sensitive string comparison.
All browsers do not support the Intl.Collator object. If you need to support older browsers, you may want to use a polyfill or one of the other options for sorting an array of objects by a string property value, such as the sort() method with the localeCompare() function or a custom compare function.
To sort the array based on String objects in a different locale other than English,
- Initiate the
collatorusingnew Intl.Collator - Compare the array objects using the
collatorand sort them
Code
The following example demonstrates how to use the sort() method with the Intl.Collator object to sort an array of objects by the name property in the German locale.
let people = [
{name: "Charlie", age: 20},
{name: 'Schäfer',age: 50 },
{name: "Alice",age: 30},
{name: "Bob", age: 40},
];
const collator = new Intl.Collator('de');
people.sort((a, b) => collator.compare(a.name, b.name));
console.log(people);
// Output: [{name: "Alice", age: 30}, {name: "Bob", age: 40}, {name: "Charlie", age: 20}, {name: "Schäfer", age: 50}]The Intl.Collator object has several other options.
For example, you can use the sensitivity option to specify whether the comparison is sensitive
to a case, accent, or width.
Code
The following example demonstrates how to use the sort() method with the Intl.Collator object and the sensitivity option to sort an array of objects by the name property in the Deutsch locale
let people = [
{name: "Charlie", age: 20},
{name: 'Schäfer',age: 50 },
{name: "Alice",age: 30},
{name: "Bob", age: 40},
];
const collator = new Intl.Collator(“de”, {sensitivity: "base"});
people.sort((a, b) => collator.compare(a.name, b.name));
console.log(people); // Output: [{name: "alice", age: 30}, {name: "Bob", age: 40}, {name: "Charlie", age: 20}, {name: "Schäfer", age: 50}]`