Hey there my fellow devs😀, In today’s article, we’ll be talking about sort() method. So let’s dive right in 😉

⛵ What is sort() method?

The sort() method is a method of the Array object in JavaScript, and it can be used to sort the elements of an array in place. The default sort order is built upon converting the elements into strings and comparing their UTF-16 code unit value sequences. Let’s see an example 👇🏾

const numbers = [2, 100, 3, 1, 8];

numbers.sort();

console.log(numbers); // [1, 100, 2, 3, 8]

As you can see in the example above, you will think that the expected result suppose to be [1, 2, 3, 8, 100] but what the sort method does is that it converts these numbers into strings and then compare their sequences of UTF-16 code units values that is why the expected result is different.

Now you might wonder how we can rearrange these numbers in ascending or descending order even though they are converted as strings. That’s when the comparefuc() comes into play.

You can also use the sort() method with a compare function as its argument to specify the sort order. The compare function should return a negative, zero, or positive value, depending on the arguments, like:

1. If return is < 0, a comes first

2. If return is 0, nothing changes

3. If return is > 0, b comes first

Let’s see how it works using the first example 👇🏾

In the example above, we created a fucntion called compareNumbers() and we also wrote an if statement (using the ternary operator) ****which says that if a is less than b then return a negative value else return a positive value and when then .sort() the numbers based on the fucntion

If you also observed, the results are in ascending order. But if you want to make them be descending order. This is how the code should be 👇🏾

const numbers = [2, 100, 3, 1, 8];

function compareNumbers(a, b) {
  return a > b ? -1 : 1; // reversed the equality sign
}

const newSort = numbers.sort(compareNumbers);

console.log(newSort); // [100, 8, 3, 2, 1]

Let’s also see a little advanced example of using the .sort() method. We’ll use an array of objects 👇🏾

const gadgets = [
  { name: 'Hp laptop', price: 5000 },
  { name: 'Mac laptop', price: 20000 },
  { name: 'Dell laptop', price: 1000 },
  { name: 'Lenovo', price: 4000 },
  { name: 'Toshiba Laptop', price: 500 },
];

function laptopName(a, b) {
  return a.name < b.name ? -1 : 1;
}

const sortName = gadgets.sort(laptopName);

console.log(sortName);

// outputs
//{name: 'Dell laptop', price: 1000}
//{name: 'Hp laptop', price: 5000}
// {name: 'Lenovo', price: 4000}
// {name: 'Mac laptop', price: 20000}
// {name: 'Toshiba Laptop', price: 500}

This example is kind of the same as the previous one. The only difference is that we decided to .sort() only a single property( which is the name property) in the array and we .sort() them in ascending order. so if you take a look at the output you will notice that only the name property order is changed.

If you like to see a real-world example where this sort method is applied, Here is a link to the small website I built and you can also get the source code from there too. 👇🏾

Sort array in real time

That’s all guys 😀, I hope you now know the basics of how the sort method works. See you next week.