JavaScript tutorial - Explaining Array.prototype.sort()

So what is Array.prototype.sort()? As the name suggests, we are using an array and we'll be sorting it. There are also other neat functionalies like converting elements into strings. But for this example, we'll be taking a look on how we can rank our array from the greatest to least.

Let's start with an array. Let's use a simple number integers. For this example we'll use an array of numbers that we want to sort.

Generating numbers...

let nums = [7, 41, 48, 9, 11, 12]

Okay we have our arrary. The next step is to define a variable. Let's name it sortedNums.

let sortedNums

The next step would be adding a spread operator. This neat syntax will allow us to add a copy so that we are able to compare them when we're done.

A spread operator in this example, creates a new array, then extracts all the elements we need from the original array, then plugs it in inside the new one. Essentially cloning the array.

let sortedNums = [...nums]

Next we'll have to add a callback function, so it understands what the logic we want going on. We also need to define two parameters as it requires. So lets name the parameters as A and B.

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

Inside the empty brackets, it'll spit out three posible things. A positive number, negative number, and a zero.

Positive and neagive numbers will each sort very differely. Pos numbers may sort from greatest to least and vice versa. Howevever, if it spits out zero, then no changes were made!

And now onto how it computes the results. If you take a look at the crude diagram, theres a recurring pattern. It's shifting those pairs for comparison one index position at a time on each iteration of the loop.

Don't forget to add console.log(sortedNums) at the end to get results.

'use strict'

let nums = [7, 41, 48, 9, 11, 12]
let sortedNums = [...nums]
sortedNums.sort((a, b => b - a)
console.log(sortedNums)
console.log(nums)

node sort.js
[ 48, 41, 12, 11, 9, 7]

The end result should look something like this.

Conclusion

The logic in this tutorial is very rudimentary and it only serves to introduce sort() with simple numbers integers. You can take it a step further by adding more complex logic.

For a more complex logic, we may say... If A minus B, is greater than zero then return one. Et cetera.

Numbers can also be substituted for months, fruits, or even days of the week. Depending on what suits your needs.