Wanna sort() things out in JavaScript ?
Tags: javascript, webdev, 100daysofcode
Published: 2020-09-18 14:39:00

We all have our life priorities, sometimes we stick to them and others we let loose. JavaScript doesn't, especially if you use the `sort()` method properly.

In a nutshell, the `sort()` method sorts the elements of an array in place and returns the sorted array.

**How does it really work?** 

Let's first have a quick look at sort() basic syntax (*from [mdn](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort))*

Syntax

```jsx
arr.sort([compareFunction])
```

The compareFunction is optional and can be set if we want to define a the sort order. **If compareFunction is not supplied**, all non-undefined array elements are sorted by converting them to strings and comparing strings in UTF-16 code units order.

If compareFunction is supplied, all non-undefined array elements are sorted according to the return value of the compare function. If a and b are two elements being compared, then:

- If `compareFunction(a, b)` returns less than 0, sort `a` to an index lower than `b` (i.e. `a` comes first).
- If `compareFunction(a, b)` returns 0, leave `a` and `b` unchanged with respect to each other, but sorted with respect to all different elements. Note: the ECMAscript standard does not guarantee this behavior, thus, not all browsers (e.g. Mozilla versions dating back to at least 2003) respect this.
- If `compareFunction(a, b)` returns greater than 0, sort `b` to an index lower than `a` (i.e. `b` comes first).

```jsx
function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;
}
```


Not convinced? 🤔 Let's try sorting these numbers 

```jsx
const numbers = [1, 2, 100, 3, 200, 400, 155];
const numbersSorted = numbers.sort(function(firstItem, secondItem) {
	if(firstItem > secondItem) {
		return 1;
	} else if (firstItem < secondItem) {
		return -1;
	} else {
		return 0;
	}
})

console.log(numbersSorted); // [1, 2, 3, 100, 155, 200, 400]
```

We can shorten this function to 

```jsx
const numbersSorted = numbers.sort((firstItem, secondItem) => firstItem - secondItem);
console.log(numbersSorted); // [1, 2, 3, 100, 155, 200, 400]
```

This time, let's not set a compare function and rely on the default one as mentioned earlier. Let's sort the following toppings array alphabetically

```jsx
const toppings = ["Mushy Boi", "Chili", "Pickles", "Avocado", "Onions", "Cheese", "Chiles","Hot Sauce", "Bacon", "Lettuce", "Tomatoes", "Mushy Boi", "Eggs"]
console.log(toppings.sort()); //["Avocado", "Bacon", "Cheese", "Chiles", "Chili", "Eggs", "Hot Sauce", "Lettuce", "Mushy Boi", "Onions", "Pickles", "Tomatoes
```

Let's push it a little more and sort the prices

```jsx
const productsSortedByPrice = Object.entries(prices).sort(function (a, b) {
  const aPrice = a[1];
  const bPrice = b[1];
  return aPrice - bPrice;
});
console.table(Object.fromEntries(productsSortedByPrice));
```

1. We use the `Object.entries` to get everything as we need to display both keys and values.
2. We call our sort and set a function with (a, b) which will hold the first and second item of each success pairs.
3. We set 2 variables that will hold the values of the entries. In our case the price.
4. We return the difference which will set the order of prices by returning (-1, 1 or 0)
5. We log the result by converting our result array into an object using `Object.fromEntries`, and we return our function result inside of it. Here we're using `console.table` for a better display of the result.

I hope you learned a thing or 2 from the above post. If you liked it, hit any of those nicely designed buttons, and let's connect! 🚀