Perform Numeric Sort in JavaScript

In this tutorial, we will learn how to perform the numeric Sort in JavaScript.

We can arrange the given numerical values by numerical sorting into ascending or descending order

In JavaScript, we use the sort () method to sort numerical values. This method sorts the arrays of numbers, strings, and objects. It sorts the elements of an array and changes the order of the original array's elements.

The array elements are cast to strings to determine the order and then compared and sorted.

arr.sort()

Where arr is the array of numeric elements that need to be sorted, this method returns an array sorted ascendingly, with the smallest numerical value first and the largest value last..

Example 1

Using the sort() method without compare Function

In the given an example, we will see the numeric sorting using the sort() method. Wee don't use any compare function.


<html>
<body>
   <div id = "str1" > </div>
   <script>
      let my_array = [61,34,54,2,12,67,89,97,39, 87,40];
      let sort_array = my_array.sort();
      var output = document.getElementById("str1");
      output.innerHTML += "Original Array: "+ my_array+"<br>";
      output.innerHTML += "Sorted Array: " + sort_array;
   </script>
</body>
</html>

Using the sort() with compare functions

When we use Sort () without the compare function, we will likely not get accurate values. For instance, in the above example, the Sort () method returned "12" before "2" since the numbers are converted into strings before the comparison in Unicode order. To solve this problem, we create a compare function that returns positive, zero, and negative values. The compare functions allow us to perform both ascending and descending sorting effectively.

When the compare function is provided to the Sort () method, all non-undefined array elements will be sorted using the defined sorting order.

The Sort () method returns a sorted array in ascending or descending order based on the provided comparable functions. For instance?

  • If a negative value (a>b), then a comes before b

  • If zero value (a == b), then there is no change in the array

  • If a positive value (a

Syntax

To implement the sorting() method with the compare function, follow the syntax below?

arr.sort(function(a, b){return a - b})

where arr is the array to be sorted, compare function defines the sort order.

Parameters

  • The compare function accepts the two arguments a and b.

Example 2

Sorting the elements in ascending order

In the below example, we perform the numeric sort using the sort() method along with a compare function.


<html>
<body>
   <h3> The sort() method with compare function</i> </h3>
   <div id="str2"> </div>
   <script>
      let my_array = [61,34,54,2,12,67,89,97,39, 87,40];
      var output = document.getElementById("str2");
      output.innerHTML += "Original Array : "+ my_array+"<br>";
      let sort_array = my_array.sort(function(a, b){return a - b});
      output.innerHTML += "Sorted Array : "+ sort_array;
   </script>
</body>
</html>

The array is sorted in ascending order starting with 2, the smallest, to 97, the largest

Example 3

Sorting the elements in descending order.

In the given example, we are going to use sort(function(a, b){return b - a}); to output a descending order


<html>
<body>
   <div id="str1"> </div>
   <script>
      let my_array = [61,34,54,2,12,67,89,97,39, 87,40];
      var output = document.getElementById("str1");
      output.innerHTML += "Original Array: " + my_array+ "<br>";
      let sort_array = my_array.sort(function(a, b){return b - a});
      output.innerHTML += "Sorted Array: " + sort_array;
   </script>
</body>
</html>

The array is sorted in descending order starting with 97, the largest, to 2, the smallest.

You have learned how to conduct numerical sorting in JavaScript in this lesson. First, we used the sort() function to sort the number of components. However, this approach involves converting array elements to strings and then comparing the strings in the order of the URF-16 code units, which results in ineffective sorting. This problem has been solved using the compare functions, which perform ascending and descending sorting.

Updated on: 2022-09-14T13:39:30+05:30

12K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements