Sorting an array of objects by a string property value is a common requirement in JavaScript programming. This can be useful in a variety of scenarios, such as sorting a list of users by their names or a list of products by their titles. In this article, we will explore different methods to sort an array of objects by a string property value, providing detailed explanations and complete code examples for each approach.
Approach 1. Using the sort() Method
The sort() method sorts the elements of an array in place and returns the sorted array. The default sort order is ascending, built upon converting the elements into strings and comparing their sequences of UTF-16 code unit values. To sort an array of objects by a string property, we need to provide a comparison function that compares the desired property values.
Example
let users = [ { name: 'John', age: 25 }, { name: 'Alice', age: 30 }, { name: 'Bob', age: 20 } ]; users.sort((a, b) => { if (a.name < b.name) { return -1; } if (a.name > b.name) { return 1; } return 0; }); console.log(users); // Output: [ // { name: 'Alice', age: 30 }, // { name: 'Bob', age: 20 }, // { name: 'John', age: 25 } // ]
In this example, the sort() method is used with a comparison function that sorts the users
array by the name property in ascending order.
Approach 2. Using Locale Compare
The localeCompare() method returns a number indicating whether a reference string comes before, after, or is the same as the given string in sort order. This method is particularly useful for sorting strings that may contain special characters or for supporting different locales.
Example
let products = [ { title: 'Banana', price: 1 }, { title: 'apple', price: 2 }, { title: 'Orange', price: 3 } ]; products.sort((a, b) => a.title.localeCompare(b.title)); console.log(products); // Output: [ // { title: 'apple', price: 2 }, // { title: 'Banana', price: 1 }, // { title: 'Orange', price: 3 } // ]
In this example, the localeCompare() method is used to sort the products
array by the title property, taking into account locale-specific character comparison.
Approach 3. Case-Insensitive Sorting
To perform a case-insensitive sort, you can convert the strings to a consistent case (either lower or upper) before comparing them.
Example
let books = [ { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' }, { title: 'to kill a mockingbird', author: 'Harper Lee' }, { title: '1984', author: 'George Orwell' } ]; books.sort( (a, b) => a.title.toLowerCase() .localeCompare(b.title.toLowerCase())); console.log(books); // Output: [ // { title: '1984', author: 'George Orwell' }, // { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' }, // { title: 'to kill a mockingbird', author: 'Harper Lee' } // ]
In this example, the toLowerCase() method is used to convert the title property values to lowercase before comparing them, ensuring a case-insensitive sort.
Approach 4. Sorting by Multiple Properties
Sometimes, you may need to sort by multiple properties. This can be achieved by chaining comparison logic.
Example
let students = [ { name: 'John', grade: 'A' }, { name: 'Alice', grade: 'B' }, { name: 'Bob', grade: 'A' } ]; students.sort((a, b) => { if (a.grade < b.grade) { return -1; } if (a.grade > b.grade) { return 1; } if (a.name < b.name) { return -1; } if (a.name > b.name) { return 1; } return 0; }); console.log(students); // Output: [ // { name: 'John', grade: 'A' }, // { name: 'Bob', grade: 'A' }, // { name: 'Alice', grade: 'B' } // ]
In this example, the students array is sorted first by the grade property and then by the name property if the grades are the same.