Sorting an array of objects is something you’ll run into pretty often when working with JavaScript. This usually comes up when dealing with tables, lists, or data coming from an API.
In this article, we’ll go through how to sort arrays of objects using JavaScript’s sort() method. We’ll focus on practical examples and common patterns you’re likely to use in real projects.
Why It’s Useful to Sort Arrays of Objects
In most applications, data doesn’t arrive in the order you want. API responses, database results, or user-generated content are usually unsorted, so you have to handle that yourself before showing anything on the screen.
Sorting becomes especially useful when rendering table rows, listing products by name or price, or showing users alphabetically. A small detail like correct ordering can make a UI feel much easier to use.
It also helps prevent bugs. If you don’t understand how sorting works, it’s easy to accidentally mutate data, get unexpected orderings, or end up with sorting logic that’s hard to change later.
Understanding the sort() Method
JavaScript’s sort() method reorders the elements of an array. When you’re sorting objects, you provide a comparison function that tells JavaScript how two items should be compared.
The comparison function receives two elements and returns:
- a negative value →
acomes beforeb - a positive value →
bcomes beforea 0→ no change in order
array.sort((a, b) => {
// return negative, positive, or 0
});
One important thing to remember: sort() mutates the original array. This often catches people off guard, especially when working with state or reused data.
Sorting by Object Properties
Most of the time, you won’t sort objects directly. Instead, you’ll sort based on one of their properties like a name, price, or date.
Here are the most common cases.
Sorting by String Properties
This is very common when dealing with names, titles, or labels.
Basic string sorting:
users.sort((a, b) => a.name.localeCompare(b.name));
Case-insensitive sorting:
users.sort((a, b) =>
a.name.toLowerCase().localeCompare(b.name.toLowerCase())
);
Descending order:
users.sort((a, b) => b.name.localeCompare(a.name));
Using localeCompare() is generally safer than manual string comparisons and gives more consistent results.
Sorting by Numeric and Date Properties
Numbers are simpler to deal with.
**Numeric sorting:**
jsx
products.sort((a, b) => a.price – b.price);
For dates stored as strings, convert them to `Date` objects before comparing.
### **Sorting date strings:**
jsx
events.sort((a, b) => new Date(a.date) – new Date(b.date));
This avoids incorrect ordering that can happen with plain string comparison.
## Codepen Example: [Sort an array of objects]
[https://codepen.io/Vatsal-Kachhadiya/pen/ogLwQwB?embedable=true](https://codepen.io/Vatsal-Kachhadiya/pen/ogLwQwB?embedable=true)
## Creating a Dynamic Sort Function
In real projects, you rarely sort by just one field. Sometimes it’s the name, sometimes the price, sometimes a date. Writing a new comparison function every time gets repetitive.
A small utility function can help with that.
javascript
function sortBy(key, order = “asc”) {
return (a, b) => {
if (typeof a[key] === “string”) {
return order === “asc”
? a[key].localeCompare(b[key])
: b[key].localeCompare(a[key]);
}
return order === "asc"
? a[key] - b[key]
: b[key] - a[key];
};
}
**Usage:**
javascript
users.sort(sortBy(“name”));
products.sort(sortBy(“price”, “desc”));
This isn’t meant to cover every edge case, but it works well for most simple lists and keeps the calling code readable.
## Best Practices & Common Mistakes
A few things worth keeping in mind:
* **Don’t mutate the original array** if you still need it elsewhere:
javascript
const sortedUsers = […users].sort(sortBy(“name”));
“`
- Use
localeCompare()for strings instead of custom logic. - Watch out for missing or
undefinedvalues when sorting real data. - Be careful when sorting mixed types (for example, numbers stored as strings).
Conclusion
Sorting arrays of objects is a regular part of working with JavaScript. Once you understand how sort() and comparison functions work; most use cases are pretty straightforward.
For simple needs, a direct sort() call is enough. As things grow, a reusable sort helper can make your code cleaner and easier to maintain. Knowing both approaches helps you handle real-world data without overcomplicating things.
