Sort Array of Objects By String Property Value in JavaScript

Sorting arrays of objects based on a string property can be helpful for handling user data or dynamic lists. Here are different ways to sort an array of Objects By String Property Value.

1. Using localeCompare() Method – Most Used

The JavaScript localeCompare() method returns a number indicating whether this string comes before, or after, or is the same as the given string in sort order. This is particularly useful for alphabetical ordering, making it ideal for most use cases.

const a = [
    { s: "banana", price: 8 },
    { s: "apple", price: 10 },
    { s: "orange", price: 12 }
];

a.sort((x, y) => x.s.localeCompare(y.s));
console.log(a);

Output

[
    { s: "apple", price: 10 },
    { s: "banana", price: 8 },
    { s: "orange", price: 12 }
]

2. Using < and > Operators for Direct Comparison

Direct comparison operators < and > can be used to sort strings. This method is simple but does not handle locale-specific characters as effectively as localeCompare().

const a = [
    { s: "banana", price: 8 },
    { s: "apple", price: 10 },
    { s: "orange", price: 12 }
];

a.sort((x, y) => {
    if (x.s < y.s) return -1;
    if (x.s > y.s) return 1;
    return 0;
});
console.log(a);

Output

[
    { s: 'apple', price: 10 },
    { s: 'banana', price: 8 },
    { s: 'orange', price: 12 }
]

3. Using Chained Comparison for Sorting by Multiple Properties

If you need to sort by more than one property, chaining comparisons within sort() is a useful technique.

const a = [
    { s: "apple", price: 10 },
    { s: "banana", price: 12 },
    { s: "apple", price: 8 }
];

a.sort((x, y) => x.s.localeCompare(y.s) || x.price - y.price);
console.log(a);

Output

[
    { s: 'apple', price: 8 },
    { s: 'apple', price: 10 },
    { s: 'banana', price: 12 }
]

4. Using Intl.Collator for Enhanced Locale-Aware Sorting

For applications having multiple languages, Intl.Collator offers more advanced locale-aware string comparison that handles language-specific rules.

const a = [
    { s: "banana", price: 8 },
    { s: "apple", price: 10 },
    { s: "orange", price: 12 }
];

const collator = new Intl.Collator('en', { sensitivity: 'base' });
a.sort((x, y) => collator.compare(x.s, y.s));
console.log(a);

Output

[
    { s: 'apple', price: 10 },
    { s: 'banana', price: 8 },
    { s: 'orange', price: 12 }
]

Importance of Checking if an Element is Hidden

Checking if an element is hidden is essential for

• Conditional display logic: Helps decide when to show or hide elements based on their current state.
• Efficient animations and transitions: Allows you to avoid redundant animations on already hidden elements.
• Accessibility and user experience: Ensures elements are displayed only when relevant to the user.