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 sort() 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. sort() The comparison function receives two elements and returns: a negative value → a comes before b
a positive value → b comes before a
0 → no change in order a negative value → a comes before b a b a positive value → b comes before a b a 0 → no change in order 0 array.sort((a, b) => {
  // return negative, positive, or 0
}); 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. sort() mutates the original array 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 Sorting by String Properties This is very common when dealing with names, titles, or labels. This is very common when dealing with names, titles, or labels. Basic string sorting: Basic string sorting: users.sort((a, b) => a.name.localeCompare(b.name)); users.sort((a, b) => a.name.localeCompare(b.name)); Case-insensitive sorting: Case-insensitive sorting: users.sort((a, b) =>
  a.name.toLowerCase().localeCompare(b.name.toLowerCase())
); users.sort((a, b) =>
  a.name.toLowerCase().localeCompare(b.name.toLowerCase())
); Descending order: Descending order: users.sort((a, b) => b.name.localeCompare(a.name)); users.sort((a, b) => b.name.localeCompare(a.name)); Using localeCompare() is generally safer than manual string comparisons and gives more consistent results. localeCompare() Sorting by Numeric and Date Properties Sorting by Numeric and Date Properties Numbers are simpler to deal with.

**Numeric sorting:**

```jsx
products.sort((a, b) => a.price - b.price); 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. Date Sorting date strings: Sorting date strings: events.sort((a, b) => new Date(a.date) - new Date(b.date)); 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. 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];
  };
} 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: Usage: users.sort(sortBy("name"));
products.sort(sortBy("price", "desc")); 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:
const sortedUsers = [...users].sort(sortBy("name"));



Use localeCompare() for strings instead of custom logic.


Watch out for missing or undefined values when sorting real data.


Be careful when sorting mixed types (for example, numbers stored as strings). Don’t mutate the original array if you still need it elsewhere:
const sortedUsers = [...users].sort(sortBy("name")); Don’t mutate the original array if you still need it elsewhere: Don’t mutate the original array const sortedUsers = [...users].sort(sortBy("name")); const sortedUsers = [...users].sort(sortBy("name")); Use localeCompare() for strings instead of custom logic. Use localeCompare() for strings instead of custom logic. localeCompare() Watch out for missing or undefined values when sorting real data. Watch out for missing or undefined values when sorting real data. undefined Be careful when sorting mixed types (for example, numbers stored as strings). 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. sort() 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. sort()

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

How To Sort an Array of Objects in JavaScript?

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

3 Must-learn JavaScript Concepts to Master Before Learning React

A Node of Truth For Making Graphs

A Simple Introduction to Arrays In JavaScript

The Easiest Way to Add Time Intervals in JavaScript

Array And Set Operations: What You Need to Know

Array Manipulation: Understanding JavaScript Array Methods

3 Must-learn JavaScript Concepts to Master Before Learning React

A Node of Truth For Making Graphs

A Simple Introduction to Arrays In JavaScript

The Easiest Way to Add Time Intervals in JavaScript

Array And Set Operations: What You Need to Know

Array Manipulation: Understanding JavaScript Array Methods

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps