Sorting data of array list in JavaScript

What is sorting?

By sorting, we simply mean to arrange items in a particular order. The items may be placed alphabetically, increasingly or decreasingly. The words can be arranged alphabetically whereas numbers can be arranged in increasing or decreasing order.

The JavaScript language has a built-in sort() method in arrays to arrange items in alphabetical order. Let us now use this method to arrange array elements in alphabetical order.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sorting of an array in JavaScript</title>
</head>
<body>
    <h3>Sorting array elements</h3>
    <script>
        var states=["Haryana", "Maharashtra", "Chennai", "Andhra Pradesh", "Nagaland"];
        var arrange=states.sort();
        document.write("The state names in alphabetical order are </br>", arrange);
    </script>   
</body>
</html>

It results as:

Sorting array elements

The state names in alphabetical order are
Andhra Pradesh,Chennai,Haryana,Maharashtra,Nagaland

How to reverse array elements?

Reversing an array elements mean to reverse the order of array elements. After reversing array elements, the last element becomes first element and first element becomes last element. This can be achieved with the help of built-in reverse() method of array in JavaScript. Let us understand the concept with the help of an example code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sorting of an array in JavaScript</title>
</head>
<body>
    <h3>Reversing array elements</h3>
    <script>
        var states=["Haryana", "Maharashtra", "Chennai", "Andhra Pradesh", "Nagaland"];
        var arrange=states.reverse();
        document.write("The state names in reverse order are </br>", arrange);
    </script>   
</body>
</html>

The result becomes:

Reversing array elements

The state names in reverse order are
Nagaland,Andhra Pradesh,Chennai,Maharashtra,Haryana

How to sort numeric array?

The sort() method used above is helpful in sorting array alphabetically and does not produce desired results when it is used with numbers because the sort() method converts numbers into strings which means 30 becomes “30” and 45 becomes “45”. To fix this problem, we can use compare formula in sort() method as shown below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sorting numerical array</title>
</head>
<body>
    <script>
        var numbers = [2, 9, 4, 25, 74, 66, 21];
        // Sorting an array using compare function
        numbers.sort(function (a, b) {
            return a - b;
        });
        document.write("The sorted array is ", numbers);
    </script>
</body>
</html>

Its output becomes:

The sorted array is 2,4,9,21,25,66,74

Now, let us see how does this sorting method with compare function works. In above example, we have to sort an array [2, 9, 4, 25, 74, 66, 21].

Let us suppose the first element is represented by a and the second element is being represented by b.

First, we will find the difference of a=2 and b=4 by using equation a-b which is in this case is 2-4=-2 which is less than 0. If we find the difference of first two numbers less than 0, then a becomes first and if the difference of these numbers is greater than 0, then b becomes first and if the difference is 0, then numbers will be unaltered and so on.