How to sort an array of objects in JavaScript?

In this article, we will see how to use JavaScript’s sort() method to sort arrays of numbers, strings, and objects.

I. How to use the sort() method?

The sort() method in JavaScript allows us to sort the elements of an array in ascending order.

It sorts an array alphabetically. It changes the positions of the elements in the original array and returns the array itself.

By default, the sort() function sorts values as strings.

const months = ["March", "Jan", "Feb", "Dec"];
months.sort();

console.log(months);
// Output: ["Dec", "Feb", "Jan", "March"]

II. Sort array of numbers with sort()

The sort() method converts the elements to strings and compares the strings to determine the order.

Let’s take a look at an example.

Example:

const numbers = [40, 100, 1, 5, 25, 10];
numbers.sort();
console.log(numbers); // [1, 10, 100, 25, 40, 5]

The result is not as expected, right?

In this example, the sort() method puts 100 before 25 because sort() converts the elements to strings and compares them.

And since the string “100” precedes the “25” when making a string comparison, we have the above result.

To fix this, we need to pass a comparison function to the sort() method. The sort() method will base on the return results of the comparison function (negative, positive) to determine the order of the elements.

array.sort((a,b) => {});

In it, the comparison function accepts two arguments, a and b.

The sort() method will sort the elements based on the return value of the function with the following rules:

• If a > b, the sort() method will sort a before b.
• If a < b, the sort() method sorts b before a.
• If a = b, the sort() method considers a equal to b and preserves their positions

Example

const numbers = [40, 100, 1, 5, 25, 10];

numbers.sort((a, b) => {
  if (a > b) return 1;
  if (a < b) return -1;
  return 0;
});

console.log(numbers);

1. Sort the array of numbers in ascending order

We can also write it cleaner:

const numbers = [40, 100, 1, 5, 25, 10];

numbers.sort((a, b) => a - b);

console.log(numbers)
// [1, 5, 10, 25, 40, 100]

2. Sort an array of numbers in descending order

const numbers = [40, 100, 1, 5, 25, 10];

numbers.sort((a, b) => b - a);

console.log(numbers)
// [100, 40, 25, 10, 5, 1]

Note: Because the sort() method sorts and modifies the array itself, we don’t need to create additional variables to store the results.

III. Sort a string array with sort()

The sort() method is also used to sort arrays of strings.

1. Sort a string in ascending order

const programming = ["java", "php", "python", "javascript", "full stack"];

programming.sort();

console.log(programming);
// ["full stack", "java", "javascript", "php", "python"]

2. Sort a string in descending order

To sort the array in descending order, you need to pass the comparison function to the sort() function as follows:

const programming = ["java", "php", "python", "javascript", "full stack"];

programming.sort((a, b) => {
  if (a > b) return -1;
  if (a < b) return 1;
  return 0;
});

console.log(programming);
// ["python", "php", "javascript", "java", "full stack"]

3. Sort a string array including capitalized words

The sort() function is case-sensitive.

So, to get the correct result, we must first convert the elements to the same lowercase string (or the same uppercase string).

const programming = ["javascript", "php", "java", "PHP"];

programming.sort(function(a, b) {
    let x = a.toLowerCase();
    let y = b.toLowerCase();

    return x == y ? 0 : (x > y) ? 1 : -1;
});

console.log(programming);
// ["java", "javascript", "php", "PHP"]

IV. Sorts array of objects by the specified attribute

For example, we have an array:

const people = [
  {
    name: "John Smith",
    age: 28,
  },
  {
    name: "Aio Doe ",
    age: 25,
  },
  {
    name: "Anna Lou",
    age: 32,
  },
  {
    name: "Peter Justin",
    age: 45,
  },
];

Sort by age:

people.sort((a, b) => a.age - b.age);

console.log(people);

Sort by name:

people.sort((a, b) => {
    let x = a.name.toLowerCase();
    let y = b.name.toLowerCase();
    return x === y ? 0 : x > y ? 1 : -1;
});

console.log(people);