DEV Community

Cover image for Sorting in JavaScript
Saleh Mubashar
Saleh Mubashar

Posted on • Updated on

Sorting in JavaScript

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"]


Enter fullscreen mode Exit fullscreen mode

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"]


Enter fullscreen mode Exit fullscreen mode
  • 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"]


Enter fullscreen mode Exit fullscreen mode

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"]


Enter fullscreen mode Exit fullscreen mode

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]


Enter fullscreen mode Exit fullscreen mode

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]


Enter fullscreen mode Exit fullscreen mode

Thanks for reading!
Check out the complete in depth Hubpages tutorial on this topic:

Sorting in React JS
Cheers

Top comments (2)

Collapse
 
curiousdev profile image
CuriousDev

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.

Collapse
 
salehmubashar profile image
Saleh Mubashar

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