Javascript .sort Method

Sorting Out the Confusion

The Javascript .sort method is one that I have struggled with for quite some time. I always found myself looking it up and fighting with it until one day I decided to save it in a file somewhere, and copy and paste it into my project whenever I needed to sort an array. This is clearly not the best way to code because you do not truly know how to use all of your tools.

Below we have an array of objects where each object holds a person’s first name, last name, and age. We can use the sort method to sort these people by any of these fields.

let people = [{
  firstName: "Travis",
  lastName: "Prol",
  age: 24
},{
  firstName: "Christiana",
  lastName: "Alicante",
  age: 22
},{
  firstName: "Zach",
  lastName: "Love",
  age: 26
},{
  firstName: "Rachel",
  lastName: "Valocin",
  age: 25
}]

The .sort function allows the passing in of a callback function, which then accepts two parameters. These two parameters are two of the elements from the array.

people.sort((a, b) => {})

When .sort is called, it cycles through the array and returns a negative number, a positive number, or 0. These returns are based on which element (a or b) you want to appear before the other one. Let’s take a look at these returns:

1. If return is < 0 ... a comes first
2. If return is 0 ... nothing changes
3. If return is > 0 ... b comes first

If you are trying to sort by a field that is a number, this function will work by subtracting b.age from a.age. Make sure to return it!

people.sort ((a, b) => {
return a.age - b.age
})

This function properly sorts that array by everyone’s age!

let people = [{
  firstName: "Christiana",
  lastName: "Alicante",
  age: 22
},{
  firstName: "Travis",
  lastName: "Prol",
  age: 24
},{
  firstName: "Rachel",
  lastName: "Valocin",
  age: 25
},{
  firstName: "Zach",
  lastName: "Love",
  age: 26
}]

Let’s break down what the sort function did to the original array. Since Travis was first in the array, he becomes the a parameter, and since Christiana was second, she becomes the b parameter. When Christiana’s age of 22 is subtracted from Travis’ age of 24, 2 is returned. Since 2 is greater than 0, the sort function changes the order of the array, and puts the b element before the a. The function then reassigns what a and b are. Since Travis was moved to the second spot, he is now a, and Zach who is next in the array is now b. This continues until the entire array as been sorted.

If you try to do this with any other field, however, it will not work because if you try to subtract a string from a string, it does not return a number, and the order cannot change. In order to fix this, we need to explicitly tell the function what to return.

The Javascript comparison operators let us compare strings and will return booleans based on the comparison.

We can see here in that in a Javascript console, that “apple” is less than “banana”. This is looks backwards of what you might expect it to be because B is the second letter of the alphabet (2), while A is the first (1).

Bringing this concept into our sort function, we can tell the function what value we want it to return based on the comparison of two strings.

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

Here, we are telling the function that if a < b, return -1 which, according to the rules of the function, will keep a first. When we return 1, b will be put first, and if they are the same, return 0, which will not change anything.

This function will sort the array correctly!

let people = [{
  firstName: "Christiana",
  lastName: "Alicante",
  age: 22
},{
  firstName: "Zach",
  lastName: "Love",
  age: 26
  
},{
  firstName: "Travis",
  lastName: "Prol",
  age: 24  
},{
  firstName: "Rachel",
  lastName: "Valocin",
  age: 25
}]