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.
Stay up to date
Get notified when I publish New Games or articles, and unsubscribe at any time.