How to sort by object property in JavaScript

May 09, 2023#javascript#how-to

The sort() function in JavaScript is a built-in method that allows you to sort the elements of an array in place. It takes an optional compareFunction as a parameter, which determines the sorting order. If compareFunction is not provided, the elements are sorted in lexicographic order.

sort()
sort(compareFunction)

The default sort order is ascending, based on converting the elements into strings and comparing their sequences of UTF-16 code units values. This default behavior may not work well for sorting numbers or other types of data. For example:

// An array of numbers
const points = [40, 100, 1, 5, 25, 10];

// Sort the array in ascending order
points.sort();

// The array is not sorted correctly
console.log(points); // [1, 10, 100, 25, 40, 5]

When it comes to sorting an array of objects, the sort() function can be used with a custom compareFunction to sort the objects based on a particular property. The compareFunction takes two objects as parameters and returns a value indicating the order of the two objects. If the return value is less than 0, the first object comes before the second. If the return value is greater than 0, the first object comes after the second. If the return value is 0, the order of the two objects is unchanged.

// An array of objects with name and age properties
var people = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 28 },
];

// A compare function that compares the age property of two objects
function compareByAge(a, b) {
  return a.age - b.age;
}

// Sort the array by age in ascending order
people.sort(compareByAge);

// Output the sorted array
console.log(people);
// Outputs: [ { name: 'Alice', age: 25 }, { name: 'Charlie', age: 28 }, { name: 'Bob', age: 30 } ]

To sort by a string property, such as name, you can use the localeCompare() method of the string prototype, which compares two strings according to the current locale and returns a negative number, zero, or a positive number accordingly. For example:

// An array of objects with name and age properties
var people = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 28 },
];

// A compare function that compares the name property of two objects
function compareByName(a, b) {
  return a.name.localeCompare(b.name);
}

// Sort the array by name in ascending order
people.sort(compareByName);

// Output the sorted array
console.log(people);
// Outputs: [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 28 } ]

To sort by multiple properties, you can use a combination of compare functions and logical operators. For example, to sort by age first and then by name if the ages are equal, you can use the following compare function:

// An array of objects with name and age properties
var people = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 28 },
];

// A compare function that compares by age and then by name
function compareByAgeAndName(a, b) {
  // Compare by age first
  var ageDiff = a.age - b.age;
  // If the ages are equal, compare by name
  if (ageDiff === 0) {
    return a.name.localeCompare(b.name);
  }
  // Otherwise, return the age difference
  return ageDiff;
}

// Sort the array by age and then by name in ascending order
people.sort(compareByAgeAndName);

// Output the sorted array
console.log(people);
// Outputs: [ { name: 'Alice', age: 25 }, { name: 'Charlie', age: 28 }, { name: 'Bob', age: 30 } ]