How to Sort Objects by a Property in JavaScript

Sort Objects by a Property in JavaScript

Sorting an array of objects by a specific property is one of the most common tasks in JavaScript development. Whether you're organizing user data by name, sorting a product list by price, or ranking items by quantity, being able to sort objects by their property values allows you to present data meaningfully and clearly.

In this tutorial, we’ll break down multiple ways to sort objects in JavaScript based on a property—both numeric and string-based. Each method is beginner-friendly, easy to follow, and explained with working code examples using everyday data like fruit names and quantities.

Method 1: Sort Objects by a Numeric Property

Let’s start with sorting objects based on a numeric value like quantity. We'll use the sort() method and pass a custom compare function. The key idea is simple: subtract one property from another.

const fruits = [
  { name: "Apple", quantity: 10 },
  { name: "Banana", quantity: 25 },
  { name: "Cherry", quantity: 5 }
];

fruits.sort((a, b) => b.quantity - a.quantity);

console.log("Sorted by quantity (descending):", fruits);

Sorted by quantity (descending): [
  { name: 'Banana', quantity: 25 },
  { name: 'Apple', quantity: 10 },
  { name: 'Cherry', quantity: 5 }
]

Method 2: Sort Objects by a String Property (Alphabetically)

Sorting alphabetically is a bit different from sorting numbers. When comparing string properties such as name, you should use localeCompare() for proper alphabetical order—especially if your data includes characters from different languages or letter cases.

const fruits = [
  { name: "Cherry", quantity: 5 },
  { name: "Banana", quantity: 25 },
  { name: "Apple", quantity: 10 }
];

fruits.sort((a, b) => a.name.localeCompare(b.name));

console.log("Sorted by name (A-Z):", fruits);

Sorted by name (A-Z): [
  { name: 'Apple', quantity: 10 },
  { name: 'Banana', quantity: 25 },
  { name: 'Cherry', quantity: 5 }
]

Method 3: Case-Insensitive Sort by String Property

If your object properties might have inconsistent capitalization (e.g., "apple", "Banana"), and you want to sort in a case-insensitive way, you can convert each value to lowercase before comparing.

const fruits = [
  { name: "banana", quantity: 25 },
  { name: "Apple", quantity: 10 },
  { name: "cherry", quantity: 5 }
];

fruits.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));

console.log("Case-insensitive sort by name:", fruits);

Case-insensitive sort by name: [
  { name: 'Apple', quantity: 10 },
  { name: 'banana', quantity: 25 },
  { name: 'cherry', quantity: 5 }
]

Final Thoughts

Sorting objects in JavaScript by a property might sound complex at first, but it becomes quite intuitive with a few real-world examples. Whether you're displaying leaderboard rankings, organizing user profiles, or managing inventory, knowing how to sort by properties—both numbers and strings—will help you present cleaner, more useful data.

Remember: for numbers, use direct subtraction in your compare function; for strings, rely on localeCompare() and optionally lowercase the values to make it case-insensitive. Practice with simple examples like fruit lists, and then extend the same logic to larger datasets in your projects.

Comments

Loading comments...