Sort Array Of Objects By Boolean Value Javascript

Sort Array Of Objects By Boolean Value Javascript

5 min read Jun 20, 2024
Sort Array Of Objects By Boolean Value Javascript

Sorting an Array of Objects by Boolean Value in JavaScript

In JavaScript, sorting arrays of objects by a boolean value is a common task. This guide will illustrate different methods to achieve this, providing you with a clear understanding of how to sort your data effectively.

Understanding the Problem

We'll focus on sorting an array of objects where each object has a boolean property, such as isActive. Our goal is to arrange the objects based on the isActive property, placing all objects with true values before those with false values.

Sorting Methods

1. Using the sort() Method with a Custom Comparator

The sort() method in JavaScript provides a powerful way to reorder array elements. To sort by a boolean property, we need to define a custom comparator function.

const data = [
  { name: 'Alice', isActive: false },
  { name: 'Bob', isActive: true },
  { name: 'Charlie', isActive: true },
  { name: 'David', isActive: false },
];

data.sort((a, b) => {
  if (a.isActive === b.isActive) {
    return 0; // If both have the same value, no need to change the order.
  }
  return a.isActive ? -1 : 1; // Move active objects to the front.
});

console.log(data); // Output: [{ name: 'Bob', isActive: true }, { name: 'Charlie', isActive: true }, { name: 'Alice', isActive: false }, { name: 'David', isActive: false }] 

Explanation:

  • The sort() method takes a comparator function as an argument.
  • The comparator function compares two objects (a and b) based on their isActive property.
  • If both objects have the same isActive value, it returns 0, maintaining their relative position.
  • If a.isActive is true, it returns -1, moving a to an earlier position.
  • If a.isActive is false, it returns 1, moving a to a later position.

2. Using the filter() Method

Another approach is to use the filter() method to separate objects based on their boolean property and then combine the resulting arrays.

const data = [
  { name: 'Alice', isActive: false },
  { name: 'Bob', isActive: true },
  { name: 'Charlie', isActive: true },
  { name: 'David', isActive: false },
];

const activeData = data.filter(item => item.isActive);
const inactiveData = data.filter(item => !item.isActive);

const sortedData = [...activeData, ...inactiveData];

console.log(sortedData); // Output: [{ name: 'Bob', isActive: true }, { name: 'Charlie', isActive: true }, { name: 'Alice', isActive: false }, { name: 'David', isActive: false }]

Explanation:

  • We use filter() to create two new arrays: activeData containing objects with isActive: true and inactiveData containing objects with isActive: false.
  • Finally, we concatenate the two arrays using the spread operator (...) to obtain the sorted result.

Conclusion

Both methods effectively sort an array of objects by a boolean property. The sort() method offers in-place sorting, while the filter() approach provides a more readable and potentially faster solution for larger arrays. Choose the method that best suits your needs and coding style. Remember to adapt the code to match your specific data structure and boolean property name.