Sorting an array by price in JavaScript

Sorting an array of objects by price is a common requirement in JavaScript applications. This article demonstrates how to sort house data by price values stored as strings.

Sample Data

Let's start with an array of house objects where prices are stored as strings:

const arr = [
    {
        "h_id": "3",
        "city": "Dallas",
        "state": "TX",
        "zip": "75201",
        "price": "162500"
    },
    {
        "h_id": "4",
        "city": "Beverly Hills",
        "state": "CA",
        "zip": "90210",
        "price": "319250"
    },
    {
        "h_id": "5",
        "city": "New York",
        "state": "NY",
        "zip": "00010",
        "price": "962500"
    }
];

console.log("Original array:");
console.log(arr.map(house => `${house.city}: $${house.price}`));

Original array:
[ 'Dallas: $162500', 'Beverly Hills: $319250', 'New York: $962500' ]

Sorting in Ascending Order

To sort by price in ascending order (lowest to highest), we convert string prices to numbers using the unary plus operator:

const sortByPriceAsc = (arr) => {
    return arr.sort((a, b) => +a.price - +b.price);
};

const sortedAsc = sortByPriceAsc([...arr]); // Create copy to preserve original
console.log("Sorted ascending by price:");
console.log(sortedAsc.map(house => `${house.city}: $${house.price}`));

Sorted ascending by price:
[ 'Dallas: $162500', 'Beverly Hills: $319250', 'New York: $962500' ]

Sorting in Descending Order

For descending order (highest to lowest), we reverse the comparison:

const sortByPriceDesc = (arr) => {
    return arr.sort((a, b) => +b.price - +a.price);
};

const sortedDesc = sortByPriceDesc([...arr]); // Create copy to preserve original
console.log("Sorted descending by price:");
console.log(sortedDesc.map(house => `${house.city}: $${house.price}`));

Sorted descending by price:
[ 'New York: $962500', 'Beverly Hills: $319250', 'Dallas: $162500' ]

Flexible Sorting Function

Here's a more flexible function that accepts a direction parameter:

const sortByPrice = (arr, direction = 'asc') => {
    const multiplier = direction === 'desc' ? -1 : 1;
    return arr.sort((a, b) => multiplier * (+a.price - +b.price));
};

// Test both directions
console.log("Ascending:");
console.log(sortByPrice([...arr], 'asc').map(h => `${h.city}: $${h.price}`));

console.log("\nDescending:");
console.log(sortByPrice([...arr], 'desc').map(h => `${h.city}: $${h.price}`));

Ascending:
[ 'Dallas: $162500', 'Beverly Hills: $319250', 'New York: $962500' ]

Descending:
[ 'New York: $962500', 'Beverly Hills: $319250', 'Dallas: $162500' ]

Key Points

• The unary plus operator (+) converts string prices to numbers for proper numerical comparison
• Use [...arr] or arr.slice() to create a copy if you want to preserve the original array
• The sort() method modifies the original array unless you work with a copy
• For descending order, reverse the subtraction: +b.price - +a.price

Conclusion

Sorting objects by price requires converting string values to numbers using the unary plus operator. The sort() method with a custom comparison function provides flexible ascending or descending price sorting.