Knowing how sorting in JavaScript works in general, we can have a look at how multi-dimensional sorting can be implemented in a custom chained comparator function.
const people = [
{
first_name: 'George',
last_name: 'Bluth',
age: 34,
},
{
first_name: 'Janet',
last_name: 'Weaver',
age: 19,
},
{
first_name: 'Emma',
last_name: 'Wong',
age: 45,
},
{
first_name: 'Eve',
last_name: 'Holt',
age: 33,
},
{
first_name: 'Emma',
last_name: 'Morris',
age: 87,
},
{
first_name: 'Tracey',
last_name: 'Ramos',
age: 67,
},
{
first_name: 'Emma',
last_name: 'Morris',
age: 19,
},
];
The basic idea is to chain comparators until one of them reaches a value not equal to zero. If the delta is either a negative number (i.e. A is smaller than B) or positive number (i.e. A is greater than B), this means that the values can be sorted on that level. But if the delta is 0, that means the values are identical on the current level and the function needs to »fall back« to the next level in the comparison chain.
Assuming we’d like to sort the list above by first_name in ascending order, then last_name in ascending order (as fallback for identical first names), and finally the age in descending order (as fallback for identical first/last names).
people.sort((a, b) =>
a.first_name.localeCompare(b.first_name) ||
a.last_name.localeCompare(b.last_name) ||
b.age - a.age,
);
Due to 0 being a falsy value, || would go on to the next comparison for comparisons where both values are equal. Thus || gives first_name priority over last_name and last_name over price.
