JavaScript Sort by Multiple Fields

To sort an array of objects by multiple fields, use the sort() method with a custom comparison function.

let data = [
  { name: 'John', age: 25 },
  { name: 'Jane', age: 22 },
  { name: 'John', age: 22 },
  { name: 'Jane', age: 25 }
];

data.sort((a, b) => a.name.localeCompare(b.name) || a.age - b.age);
console.log(data);

Sorting by multiple fields is a common requirement when dealing with complex data structures. This guide will cover various methods to achieve this in JavaScript.

Using the sort() Method with a Custom Comparison Function

The sort() method can be customized to sort by multiple fields using a comparison function.

Example 1: Using the sort() Method

let data = [
  { name: 'John', age: 25 },
  { name: 'Jane', age: 22 },
  { name: 'John', age: 22 },
  { name: 'Jane', age: 25 }
];

data.sort((a, b) => a.name.localeCompare(b.name) || a.age - b.age);
console.log(data);

Explanation:

• data.sort((a, b) => a.name.localeCompare(b.name) || a.age - b.age); Sorts the array first by name using localeCompare(). If the names are the same, it then sorts by age.

• console.log(data); Logs the sorted array.

Using Array Destructuring

Array destructuring can simplify the process of sorting by multiple fields.

Example 2: Using Array Destructuring

let data = [
  { name: 'John', age: 25 },
  { name: 'Jane', age: 22 },
  { name: 'John', age: 22 },
  { name: 'Jane', age: 25 }
];

data.sort(([a, b] = [a.name.localeCompare(b.name), a.age - b.age]));
console.log(data);

Explanation:

• data.sort(([a, b] = [a.name.localeCompare(b.name), a.age - b.age])); Uses array destructuring within the sort function to achieve the same sorting logic as above.

• console.log(data); Logs the sorted array.

Using Lodash for Sorting

Lodash provides a convenient orderBy method for sorting by multiple fields.

Example 3: Using Lodash

First, include Lodash in your project:

<script src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>

Then use Lodash to sort the array:

let data = [
  { name: 'John', age: 25 },
  { name: 'Jane', age: 22 },
  { name: 'John', age: 22 },
  { name: 'Jane', age: 25 }
];

let sortedData = _.orderBy(data, ['name', 'age'], ['asc', 'asc']);
console.log(sortedData);

Explanation:

• _.orderBy(data, ['name', 'age'], ['asc', 'asc']); Uses Lodash’s orderBy method to sort the array by name and age in ascending order.

• console.log(sortedData); Logs the sorted array.

Handling Edge Cases

When sorting by multiple fields, it’s essential to handle edge cases such as missing fields or different data types.

Example 4: Handling Edge Cases

let data = [
  { name: 'John', age: 25 },
  { name: 'Jane', age: 22 },
  { name: 'John', age: undefined },
  { name: 'Jane', age: 25 },
  { name: 'Jake' }
];

data.sort((a, b) => {
  if (a.name !== b.name) {
    return a.name.localeCompare(b.name);
  }
  return (a.age || 0) - (b.age || 0);
});

console.log(data);

Explanation:

• data.sort((a, b) => { ... }); Custom sort function handles cases where age might be undefined.

• if (a.name !== b.name) { ... } Checks if names are different and sorts accordingly.

• return (a.age || 0) - (b.age || 0); Sorts by age, treating undefined as 0.

• console.log(data); Logs the sorted array.

Conclusion

Sorting by multiple fields in JavaScript can be accomplished using various methods. Whether using the built-in sort() method with a custom comparison function, array destructuring, or leveraging the Lodash library, JavaScript provides robust tools for sorting complex data structures. Understanding these techniques allows you to choose the most appropriate method for your specific needs, ensuring your code is efficient and effective.