How to sort an array of objects by string property value in JavaScript

Łukasz Holeczek Follow Łukasz Holeczek on GitHub Connect with Łukasz Holeczek on LinkedIn Follow Łukasz Holeczek on X (Twitter)

Saturday, January 18, 2025

#how-to #javascript

Sorting an array of objects by a specific property is a common requirement in JavaScript, especially when dealing with complex data structures in real-world applications. In this article, we’ll explore how to sort an array of objects by string values using JavaScript’s sort method. By the end of this guide, you’ll understand how to implement a custom comparison function and sort arrays efficiently.

Why Sorting Arrays of Objects Matters

Sorting arrays of objects is essential for organizing data, improving user experience, and creating dynamic interfaces. Whether you’re sorting user profiles alphabetically or arranging products by name, mastering this skill is key for developers working with objects in JavaScript.

Key Concepts and Methods for Sorting

The sort Method

The sort method is a built-in array method in JavaScript that sorts the elements of an array in place. It accepts a compare function, which determines the sort order. If no compare function is provided, the elements are sorted as strings in ascending order.

const arr = ['Banana', 'Apple', 'Cherry']
arr.sort()
console.log(arr) // Output: ['Apple', 'Banana', 'Cherry']

When sorting an array of objects, you must provide a compare function that explicitly defines how two objects should be compared.

Sorting an Array of Objects by a String Property

Here’s how to sort an array of objects by a specified property value:

const items = [
  { name: 'Banana', price: 1 },
  { name: 'Apple', price: 2 },
  { name: 'Cherry', price: 3 },
]

// Sort by the 'name' property in ascending order
items.sort((a, b) => a.name.localeCompare(b.name))

console.log(items)
/* Output:
[
  { name: 'Apple', price: 2 },
  { name: 'Banana', price: 1 },
  { name: 'Cherry', price: 3 }
]
*/

Explanation

• The localeCompare method is ideal for comparing string values as it respects locale-specific ordering and handles case sensitivity.
• The compare function returns:
  • A negative value if a should appear before b.
  • Zero if a and b are considered equal.
  • A positive value if a should appear after b.

Case-Insensitive Sorting

To perform a case-insensitive sort, convert both strings to lowercase (or uppercase) before comparing them:

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

Sorting in Descending Order

To sort the array in descending order, reverse the return values:

items.sort((a, b) => b.name.localeCompare(a.name))

Sorting by Numeric and Date Properties

While sorting strings is common, arrays of objects often contain numeric values or dates. Here’s how to handle these scenarios:

Numeric Sorting

items.sort((a, b) => a.price - b.price)

Sorting by Date Strings

const records = [
  { name: 'Event A', date: '2023-01-01' },
  { name: 'Event B', date: '2022-12-31' },
]

records.sort((a, b) => new Date(a.date) - new Date(b.date))
console.log(records)

Creating a Dynamic Sort Function

For more flexibility, you can write a dynamic sort function that accepts the property name and sort order as parameters:

function dynamicSort(property, order = 'asc') {
  return (a, b) => {
    const comparison = a[property].localeCompare(b[property])
    return order === 'desc' ? -comparison : comparison
  }
}

items.sort(dynamicSort('name', 'asc'))

Best Practices for Sorting Arrays of Objects

1. Handle Edge Cases: Ensure your function can handle undefined or null values.
2. Use Efficient Comparisons: For strings, prefer localeCompare for accurate and locale-sensitive sorting.
3. Avoid Mutating the Original Array: If you need to preserve the original array, use .slice() to create a copy before sorting.

Summary

Sorting an array of objects by string property value in JavaScript is straightforward with the sort method and a custom comparison function. Here’s what you’ve learned:

• The role of the compare function in determining the sort order.
• How to sort by string, numeric, and date values.
• Creating a dynamic sort function for reusable sorting logic.

Next Steps

To deepen your understanding, explore these resources:

• MDN Web Docs: Array.prototype.sort
• JavaScript Array Methods Overview
• Try sorting arrays with different data types and structures in your own projects.

Mastering these techniques will enhance your ability to manage complex data structures and build more dynamic applications. Happy coding!

About the Author

Follow Łukasz Holeczek on GitHub Connect with Łukasz Holeczek on LinkedIn Follow Łukasz Holeczek on X (Twitter)

Łukasz Holeczek, Founder of CoreUI, is a seasoned Fullstack Developer and entrepreneur with over 20 years of experience. As the lead developer for all JavaScript, React.js, and Vue.js products at CoreUI, they specialize in creating open-source solutions that empower developers to build better and more accessible user interfaces.

With expertise in TypeScript, JavaScript, Node.js, and modern frameworks like React.js, Vue.js, and Next.js, Łukasz combines technical mastery with a passion for UI/UX design and accessibility. CoreUI’s mission is to provide developers with tools that enhance productivity while adhering to accessibility standards.

Łukasz shares its extensive knowledge through a blog with technical software development articles. It also advises enterprise companies on building solutions from A to Z. Through CoreUI, it offers professional services, technical support, and open-core products that help developers and businesses achieve their goals.

Learn more about CoreUI’s solutions and see how your business can benefit from working with us.