const - JS | lectureWorking With Arrays

Sorting is a much-discussed topic in computer science, and there are countless algorithms and methods of sorting values, and we might talk about this a little bit later in the course.

For now, though, we'll use JavaScript's built-in sort method. Let's start with an array of strings called owners.

const owners = ['Clara', 'Lucy', 'Harriett', 'Leonard', 'Evelyn'];

All we now need to do is to call the sort method on the array.

console.log(owners.sort()); // [ 'Clara', 'Evelyn', 'Harriett', 'Leonard', 'Lucy' ]

Although it works as expected, the sort method actually mutates the original array. So be careful when using it.

console.log(owners); // [ 'Clara', 'Evelyn', 'Harriett', 'Leonard', 'Lucy' ]

Now let's check how the sort method works with numbers.

const movements = [502, 699, -575, 5000, -489, -225, 32, 1236];
console.log(movements.sort()); // [ -225, -489, -575, 1236, 32, 5000, 502, 699 ]

Hmm 🧐 , that's not really what we expected. These number are not at all ordered in any way. The reason for this is that the sort method does the sorting based on strings. It might sound weird but that is just how it works by default.

So basically, every array elements are converted to strings, then sorted according to each character's Unicode code point value. To fix this, we have to pass in a compare callback function to the sort method.

console.log(movements.sort((a, b) => /* do somethong */));

As you can see from the above syntax, the callback function is called with two arguments, which I named a and b (You can name them whatever you want). These two parameters are essentially the current and next value if we imagine the sort method looping over the array.

However, to understand how the callback function works, let's just think of a and b as two consecutive numbers in the array. And it doesn't matter which ones. So let's say we want to compare the numbers 699and -575.

In our callback function, if we return a negative number, then, value a will be sorted before value b. If we return a positive value, then value b will be sorted before value a. And if we return zero, then the order of the two values will not be changed.

Let apply this to our movements array, and sort the numbers in ascending order. Let's use the two numbers (699and -575) we chose above to make this easier to understand. If we want to sort them in an ascending order, then we need to switch them. Were a and b are 699 and -575 respectively. So what we want is b to be sorted before a. Therefore we need to return something that is greater than zero.

// return < 0, A, B
// return > 0, B, A
// return 0, A, B (Position unchanged)
movements.sort((a, b) => {
  /**
   * The returned number doesn't really matter.
   */
  if (a > b) return 1;
  if (b > a) return -1;
});

console.log(movements); // [ -575, -489, -225, 32, 502, 699, 1236, 5000 ]

If we wanted to do it the opposite, so sorting in descending order, we would simply do it exactly the other way around. So all we would do is to return -1 if a > b and 1 if b > a.

Now, since we are working with numbers, then we can actually simplify this a lot by simply using some simple math. We already know that if a > b, then a - b would always be something positive. And if a < b, then a - b is always something negative. So we can simply return a - b and it will work exactly the same way.

movements.sort((a, b) => a - b);
console.log(movements); // [ -575, -489, -225, 32, 502, 699, 1236, 5000 ]

To finish, this is basically what you need to know about sorting arrays with numbers. If my explanation weren't clear enough, you can either go through the lecture again or check out the MDN documentation.