Sort Array of objects by two properties in JavaScript

Sorting an array of objects by multiple properties is a common task in JavaScript. This involves first sorting by the primary property, then by the secondary property when the primary values are equal.

Understanding the Problem

When working with arrays of objects, we often need to sort by multiple criteria. For example, sorting employees by department first, then by salary within each department. JavaScript's Array.sort() method with a custom comparator function makes this possible.

The key is to create a comparison function that first checks the primary property, and only compares the secondary property when the primary values are identical.

Method 1: Multiple If Statements

This approach uses separate if statements to handle each property comparison step by step.

// Define array of people
const people = [
  { name: 'Preeti', age: 25 },
  { name: 'Aman', age: 30 },
  { name: 'Shekhar', age: 20 },
  { name: 'Preeti', age: 22 },
  { name: 'Aman', age: 25 },
  { name: 'Anjali', age: 28 }
];

const sortedPeople = people.sort((first, second) => {
  // First sort by name
  if (first.name < second.name) return -1;
  if (first.name > second.name) return 1;
  
  // If names are equal, sort by age
  if (first.age < second.age) return -1;
  if (first.age > second.age) return 1;
  
  return 0; // If both properties are equal
});

console.log(sortedPeople);

[
  { name: 'Aman', age: 25 },
  { name: 'Aman', age: 30 },
  { name: 'Anjali', age: 28 },
  { name: 'Preeti', age: 22 },
  { name: 'Preeti', age: 25 },
  { name: 'Shekhar', age: 20 }
]

Method 2: Conditional (Ternary) Operator

This approach uses the ternary operator for more concise code, checking the primary property first, then the secondary.

// Define array of programming languages
const languages = [
   {name: "Python", difficulty: "Easy"},
   {name: "Java", difficulty: "Hard"},
   {name: "JavaScript", difficulty: "Medium"},
   {name: "JavaScript", difficulty: "Easy"},
   {name: "Python", difficulty: "Medium"},
   {name: "HTML", difficulty: "Easy"}
];

const sortedLanguages = languages.sort((a, b) => {
  if (a.name === b.name) {
    // If names are equal, sort by difficulty
    return a.difficulty < b.difficulty ? -1 : 1;
  } else {
    // Sort by name first
    return a.name < b.name ? -1 : 1;
  }
});

console.log("Sorted languages:");
console.log(sortedLanguages);

Sorted languages:
[
  { name: 'HTML', difficulty: 'Easy' },
  { name: 'Java', difficulty: 'Hard' },
  { name: 'JavaScript', difficulty: 'Easy' },
  { name: 'JavaScript', difficulty: 'Medium' },
  { name: 'Python', difficulty: 'Easy' },
  { name: 'Python', difficulty: 'Medium' }
]

Method 3: Subtraction for Numeric Properties

When sorting numeric properties, you can use subtraction for cleaner code.

const students = [
  { grade: 'A', score: 85 },
  { grade: 'B', score: 92 },
  { grade: 'A', score: 78 },
  { grade: 'B', score: 88 }
];

const sortedStudents = students.sort((a, b) => {
  // Sort by grade first
  if (a.grade !== b.grade) {
    return a.grade < b.grade ? -1 : 1;
  }
  // Then by score (descending)
  return b.score - a.score;
});

console.log(sortedStudents);

[
  { grade: 'A', score: 85 },
  { grade: 'A', score: 78 },
  { grade: 'B', score: 92 },
  { grade: 'B', score: 88 }
]

Comparison Table

Time Complexity

All methods use JavaScript's built-in Array.sort(), which typically uses TimSort (a hybrid stable sorting algorithm). The time complexity is O(n log n) where n is the number of elements. Space complexity is O(log n) for the sorting algorithm's stack space.

Conclusion

Sorting arrays of objects by multiple properties is achieved using custom comparator functions with Array.sort(). Choose the method that best fits your use case: if statements for clarity, ternary operators for conciseness, or subtraction for numeric properties.