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

Imagine you have a collection of these objects:

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

This list is to be rendered. However, first you need to order it according to the value of one property. You might order it alphabetically by color names, such as black, red and white.

The  sort()method of Array, takes a callback function that takes two objects in the array as parameters (which we refer to as  a and b)

list.sort((a, b) => (a.color > b.color) ? 1 : -1)

Returning 1 tells  sort()  that object b  is the priority in sorting. The opposite would be true if you returned -1.

To handle cases where the color is identical, or order by secondary properties, the callback function can also calculate other properties:

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