Sorting a list or array has many uses in web applications, from lists to tables, it is very useful. Let's look at some of the ways data can be sorted in JavaScript
For sorting data in javascript, we make use of the sort() function and its parameters.
Sorting an Array of Strings
The most common application of sorting is when a list or table needs to be sorted alphabetically. There are a number of ways to achieve this.
Sorting A-Z
This is quite simple and the sort() function will automatically sort and array of strings A-Z. No other parameter is required in this case.
const data = ["Banana", "Orange", "Apple", "Mango"];
const sort = data.sort()
console.log(sort)
// ["Apple","Banana","Mango","Orange"]
Sorting Z-A
This is a little longer to achieve but quite simple. We will pass a function within the sort() that will sort the array into descending order.
There are a number of ways to achieve this.
- 1. Reversing the sorted Array To sort the array into descending order, we can simple reverse the array we sorted in ascending order
const data = ["Banana", "Orange", "Apple", "Mango"];
const sort = data.sort().reverse()
console.log(sort)
//["Orange","Mango","Banana","Apple"]
- 2. Manually comparing using parameters
You can also run a function within the sort function that checks two items for the greater one and returns a value
const data = ["Banana", "Orange", "Apple", "Mango"];
const sort = data.sort((a, b) => (a > b ? -1 : 1))
console.log(sort)
//["Orange","Mango","Banana","Apple"]
We are using inline conditional statements here.
- 3. The localCompare function
The localeCompare() method returns sort order -1, 1, or 0 (for before, after, or equal).
const data = ["Banana", "Orange", "Apple", "Mango"];
const sort = data.sort((a, b) => b.localeCompare(a))
console.log(sort)
//["Orange","Mango","Banana","Apple"]
Sorting an Array of Numbers
Sorting numbers in javascript is pretty simple and can be done by running a compare function within the sort()
Sorting numbers in Ascending order
const data = [5,1,6,9,3];
const sort = data.sort((a, b) => a-b)
console.log(sort)
//[1,3,5,6,9]
Sorting numbers in Descending order
const data = [5,1,6,9,3];
const sort = data.sort((a, b) => b-a)
console.log(sort)
//[9,6,5,3,1]
Thanks for reading!
Check out the complete in depth Hubpages tutorial on this topic:
Sorting in React JS
Cheers
Top comments (2)
While there are some good solutions for comparing strings and numbers, I think the possibility to customize the sort function is the most important part. With this you could for example sort a list of records depending on two or more properties.
yes, the possibilities are endless if one understands the use of comparison functions, however I wanted to keep this post simple and give the common and easy to understand solution for sorting strings and numbers, which are more commonly used.
thanks