Introduction
This is the third article in the JavaScript Array Methods series — a series created to introduce beginners to array methods, their syntax, and usage. In this article, We will discuss the two array methods that are used for sorting arrays; reverse() and sort()
Prerequisites
It'll be great to read the introductory article. It gives a quick overview of array methods and why they're important. It's not mandatory, though :)
reverse()
The reverse() array method as the name suggests is used to reverse the order of items in an array. The method modifies the original array. To reverse the order of items in an array, simply call the reverse() method, without arguments.
Syntax:
array.reverse()
Usage:
const medals = ["bronze", "silver", "gold"]
medals.reverse()
// the original array is modified
console.log(medals) // ["gold", "silver", "bronze"]
sort()
The sort() method is used for sorting an array. It can be used to sort an array in ascending, descending, or random orders.
Syntax:
array.sort()
array.sort(compareFunction)
Sorting strings
The sort() method converts items in the array to strings and sorts them in alphabetical order. This means when you sort numbers, 300 will come before 50 because “3” as string comes before “5”.
To sort an array in ascending order, simply call the sort() method on the array without passing any arguments.
To sort an array in descending order, call the sort() method first, then the reverse() method.
Usage:
// ascending order
const weekDays= ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
weekDays.sort()
console.log(weekDays) // ["Friday", "Monday", "Thursday", "Tuesday", "Wednesday"]
// descending order
const numbers = [40, 10, 100, 50, 2000, 10000]
numbers.sort()
numbers.reverse()
console.log(numbers) // [50, 40, 2000, 10000, 100, 10]
Sorting numbers
To numerically sort numbers in ascending order in an array, call the sort() method on the array and pass in a compare function like this: function(a, b) {return a - b} as an argument.
The compare function takes two items at a time and compares them. It returns a positive, negative, or zero value.
A zero value indicates that a and b may have the same order value, so their order will be maintained.
A positive value indicates that b is less than a. For instance, 3 - 2 = 1 implies that 2 is less than 3, thus it should come before 3.
A negative value indicates that a is less than b. For instance, 8 - 9 = -1 implies that 8 is less than 9, thus it should come before 9.
Sorting in descending order requires flipping a and b in the function like this: function(a, b) {return b - a}
Usage:
// ascending order
const numbers1 = [40, 10, 100, 50, 2000, 10000]
numbers1.sort(function(a, b) {return a - b})
console.log(numbers1) // [10, 40, 50, 100, 2000, 10000]
// descending order
const numbers2 = [4, 8, 1, -3, 25]
numbers2.sort(function(a, b) {return b - a})
console.log(numbers2) // [25, 8, 4, 1, -3]
Random sorting
Now you know how to sort items in an array in ascending and descending orders. How about randomly sorting the items?
To randomly sort items in an array using sort(), call the method on the array and pass in a compare function that returns both negative and positive values. The most popular syntax used is:
array.sort(function(a, b) {return 0.5 - Math.random()}
The function will return random numbers between -0.5 and 0.5. Recall that the return values of the function will indicate whether a is less than b or vice versa and then sort them accordingly. The random sort function returns both negative and positive values and will therefore shuffle the items in the array.
Usage:
// randomly sorting numbers
const numArr = [2, 5, 3, 1, 12, 6, 4]
numArr.sort(function(a,b) {return 0.5 - Math.random()})
console.log(numArr) // [1, 3, 12, 5, 2, 6, 4]
// randomly sorting strings
const strArr = ["Two", "three", "four", "five"]
strArr.sort(function(a,b) {return 0.5 - Math.random()})
console.log(strArr) // ['three', 'Two', 'five', 'four']
You can use any integer in place of 0.5 to obtain random numbers that are positive and negative. Sorting items in an array randomly with the sort() method can be biased. The Fisher-Yates Method is a more accurate way of randomly sorting array items.
Conclusion
In this article, we discussed the two array methods that can be used to sort items in an array, i.e. reverse() and sort().
We explained how they both work and provided examples for better understanding.
Thanks for reading!