How to sort array of objects by properties with only one function?

Question

I have this Array:

const list = [
    { color: 'white', size: 'XXL' },
    { color: 'red', size: 'XL' },
    { color: 'black', size: 'M' }
]

I want to sort it by the values of color or size:

colorSort = () => {
    list.sort((a, b) => (a.color > b.color) ? 1 : -1)
}
    
sizeSort = () => {
    list.sort((a, b) => (a.size> b.size) ? 1 : -1)
}

I don't like to create 2 functions for sorting.

Is there any way to create a function like this:

sortArray = (value:string = 'color') => {
     #code here
}

Krisztián Balla · Accepted Answer · 2021-03-19 08:28:42Z

4

You could try this:

function by<T extends keyof U, U>(property: T): (a: U, b: U) => number {
    return (a, b) => {
        return a[property] < b[property] ? -1 : a[property] > b[property] ? 1 : 0;
    };
}

const list = [
    { color: 'white', size: 'XXL' },
    { color: 'red', size: 'XL' },
    { color: 'black', size: 'M' }
];

const listSortedByColor = [...list].sort(by("color"));

const listSortedBySize = [...list].sort(by("size"));

Here we use the function by to create compare functions which can be passed as an argument to the Array.sort method. We can use TypeScript's advanced typing system to make sure that by is type-safe allowing only properties as arguments that actually exist in the objects you want to sort.

And Remember: Array.sort is in-place. :-)

edited Mar 19, 2021 at 8:28

answered Mar 18, 2021 at 21:10

Krisztián Balla

20.5k13 gold badges78 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to sort array of objects by properties with only one function?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related