How To Sort Array Elements In JavaScript With Example

Posted By Bajarangi soft , Posted On 25-09-2020

when you want to arrange data in ascending or in descending you can using sort function so that sort function will sort array elements in ascending or descending order but always by default we get data in ascending order. so today we are going to discuss how to sort array elements in javascript.

How To Sort Array Elements In JavaScript With Example

The sort() method sorts the items of an array.

The sort order can be either alphabetic or numeric, and either ascending (up) or descending (down).By default, the sort() method sorts the values as strings in alphabetical and ascending order.

This works well for strings ("A" comes before "B"). However, if numbers are sorted as strings, "25" is bigger than "100", because "2" is bigger than "1".

Syntax and Usage

array.sort(compareFunction)

Parameter Values

compareFunction Optional. A function that defines an alternative sort order. The function should return a negative, zero, or positive value, 
                            depending on the arguments, like:
                            function(a, b){return a-b} -> When the sort() method compares two values,it sends the values to the compare function,
                            and sorts the values according to the returned (negative, zero, positive) value.

Let's Start

Example(1)

1.Create array

var Animals = ["Zebra", "Squirrel","Loin", "Yak","Rhinoceros"];

2.Now we have array elements which is not arranged for that we need implement code to re arrange the array elements.

document.getElementById("demo").innerHTML = Animals;

function animal_lists() {
    Animals.sort();
    document.getElementById("demo").innerHTML = Animals;
}

Example(2)

<script>
    var Number = [20, 50, 1, 7, 85, 100,10];
    document.getElementById("demo").innerHTML = Number;

    function Number_list() {
        Number.sort(function(a, b){return a-b});
        document.getElementById("demo").innerHTML = Number;
    }
</script>

In above example sort numbers in an array in ascending order

Example(3)

<script>
    var Number = [20, 50, 1, 7, 85, 100,10];
    document.getElementById("demo").innerHTML = Number;

    function Number_list() {
        Number.sort(function(a, b){return b-a});
        document.getElementById("demo").innerHTML = Number;
    }
</script>

In above example Sort numbers in an array in descending order

Example(4)

<script>
    var Number = [20, 50, 1, 7, 85, 100,10];
    document.getElementById("demo").innerHTML = Number;

    function Number_list() {
        Number.sort(function(a, b){return b-a});
        document.getElementById("demo").innerHTML = Number[0];
    }
</script>

In above example Get the highest value in an array

Example(5)

<script>
    var Number = [20, 50, 1, 7, 85, 100,10];
    document.getElementById("demo").innerHTML = Number;

    function Number_list() {
        Number.sort(function(a, b){return a-b});
        document.getElementById("demo").innerHTML = Number[0];
    }
</script>

In above example Get the lowest value in an array

Example(6)

<script>
    var Number = [20, 50, 1, 7, 85, 100,10];
    document.getElementById("demo").innerHTML = Number;

    function Number_list() {
        Number.sort();
        Number.reverse();
        document.getElementById("demo").innerHTML = Number;
    }
</script>

In this above example it will sort number but it will return in reverse array element

Complete code for sorting array elements in java script

<!DOCTYPE html>
<html>
<head>
    <title>Sort array elements In Java Script</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <br>
    <br>
    <div class="text-center">
        <h1>Sort Array Elements In Java Script</h1>
    </div>
    <br>
    <div class="well">
        <button class="btn btn-primary" onclick="animal_lists()">Click it</button>
        <h1 id="demo1"></h1>
        <button class="btn btn-primary" onclick="Number_list()">Click it</button>
        <h1 id="demo2"></h1>
    </div>
    <br>
</div>
</body>
</html>

<script>
    var Animals = ["Zebra", "Squirrel","Loin", "Yak","Rhinoceros"];
    document.getElementById("demo1").innerHTML = Animals;

    function animal_lists() {
        Animals.sort();
        document.getElementById("demo1").innerHTML = Animals;
    }
    var Number = [20, 50, 1, 7, 85, 100,10];
    document.getElementById("demo2").innerHTML = Number;

    function Number_list() {
        Number.sort();
        document.getElementById("demo2").innerHTML = Number;
    }
</script>

Related Post