Lodash OrderBy

Understanding Lodash OrderBy

When working with arrays in JavaScript, sorting the elements in a specific order is a common requirement. The lodash library provides a convenient method called orderBy for sorting arrays based on one or more properties.

Syntax

The orderBy method takes two arguments: the first is the array to be sorted, and the second is an array of sorting criteria. The sorting criteria array can contain strings, arrays or functions.

_.orderBy(collection, [iteratees=[_.identity]], [orders])

Sorting by a Single Property

To sort an array by a single property, you can pass a string as the sorting criteria. The following example sorts an array of objects by the name property in ascending order:

const users = [
  { name: 'John', age: 25 },
  { name: 'Jane', age: 27 },
  { name: 'Bob', age: 22 },
];

const sortedUsers = _.orderBy(users, 'name');

console.log(sortedUsers);
// Output: [
//   { name: 'Bob', age: 22 },
//   { name: 'Jane', age: 27 },
//   { name: 'John', age: 25 }
// ]

To sort the array in descending order, you can pass an array as the sorting criteria. The first element of the array is the property to sort by, and the second element is the sort order:

const sortedUsers = _.orderBy(users, ['name', 'desc']);

console.log(sortedUsers);
// Output: [
//   { name: 'John', age: 25 },
//   { name: 'Jane', age: 27 },
//   { name: 'Bob', age: 22 }
// ]

Sorting by Multiple Properties

You can also sort an array by multiple properties by passing an array of sorting criteria. The following example sorts an array of objects by the age property in ascending order, and then by the name property in descending order:

const sortedUsers = _.orderBy(users, ['age', 'name'], ['asc', 'desc']);

console.log(sortedUsers);
// Output: [
//   { name: 'Bob', age: 22 },
//   { name: 'John', age: 25 },
//   { name: 'Jane', age: 27 }
// ]

Sorting by a Custom Function

If you need to sort an array by a custom function, you can pass a function as the sorting criteria. The function should return a value that can be used for sorting. The following example sorts an array of numbers by their absolute value:

const numbers = [-1, 2, -3, 4, -5];

const sortedNumbers = _.orderBy(numbers, Math.abs);

console.log(sortedNumbers);
// Output: [1, 2, 3, 4, 5]

Sorting Nested Objects

The orderBy method can also be used to sort nested objects within an array. You can pass a string with the dot notation as the sorting criteria to specify the nested property to sort by. The following example sorts an array of objects that contain a nested object by the age property of the nested object in ascending order:

const users = [
  { name: 'John', profile: { age: 25 } },
  { name: 'Jane', profile: { age: 27 } },
  { name: 'Bob', profile: { age: 22 } },
];

const sortedUsers = _.orderBy(users, ['profile.age']);

console.log(sortedUsers);
// Output: [
//   { name: 'Bob', profile: { age: 22 } },
//   { name: 'John', profile: { age: 25 } },
//   { name: 'Jane', profile: { age: 27 } }
// ]

You can also sort by multiple nested properties by passing an array of strings as the sorting criteria. The following example sorts an array of objects that contain a nested object by the age property of the nested object in ascending order, and then by the name property of the outer object in descending order:

const sortedUsers = _.orderBy(users, ['profile.age', 'name'], ['asc', 'desc']);

console.log(sortedUsers);
// Output:
// [
//   { name: 'Bob', profile:{ age :22 }},
//   { name:'John', profile:{ age :25 }},
//   { name:'Jane', profile:{ age :27 }}
// ]

Sorting by a Property with Null or Undefined Values

If you need to sort an array by a property that contains null or undefined values, the orderBy method can still be useful. To handle these cases, you can use the _.property function as one of your sorting criteria. The _.property function returns a function that gets the value of a property from an object.

The following example sorts an array of objects by the age property in ascending order, but some objects have a null age value:

const users = [
  { name: 'John', age: 25 },
  { name: 'Jane', age: null },
  { name: 'Bob', age: 22 },
];

const sortedUsers = _.orderBy(users, [_.property('age')]);

console.log(sortedUsers);
// Output:
// [
//   { name:'Bob', age:22 },
//   { name:'Jane', age:null },
//   { name:'John', age:25 }
// ]

As you can see, the objects with null values for the age property are sorted first. You can also sort in descending order by using the 'desc' keyword as another element of the sorting criteria array.

Conclusion

The orderBy method in the lodash library provides a flexible and convenient way to sort arrays in JavaScript. Whether you need to sort by a single property, multiple properties, or a custom function, orderBy has you covered.

Related video