Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to perform numeric sort in JavaScript?
In JavaScript, the sort() method can be used to sort numeric arrays, but it requires a compare function for proper numeric ordering. Without it, numbers are sorted as strings, leading to unexpected results.
The Problem with Default sort()
When using sort() without a compare function, JavaScript converts numbers to strings and compares them lexicographically (alphabetically). This causes "10" to come before "2" because "1" comes before "2" in string comparison.
<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>
Original Array: 61,34,54,2,12,67,89,97,39,87,40 Sorted Array: 12,2,34,39,40,54,61,67,87,89,97
Notice how "12" comes before "2" - this is incorrect numeric ordering.
Syntax
To perform proper numeric sorting, use a compare function:
// Ascending order
arr.sort(function(a, b) { return a - b });
// Descending order
arr.sort(function(a, b) { return b - a });
// ES6 arrow function syntax
arr.sort((a, b) => a - b); // ascending
arr.sort((a, b) => b - a); // descending
How the Compare Function Works
The compare function takes two parameters (a, b) and returns:
Negative value if a should come before b
Zero if a and b are equal
Positive value if a should come after b
Ascending Order Sort
<html>
<body>
<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>
Original Array: 61,34,54,2,12,67,89,97,39,87,40 Sorted Array: 2,12,34,39,40,54,61,67,89,97
Descending Order Sort
<html>
<body>
<div id="str3"></div>
<script>
let my_array = [61, 34, 54, 2, 12, 67, 89, 97, 39, 87, 40];
var output = document.getElementById("str3");
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>
Original Array: 61,34,54,2,12,67,89,97,39,87,40 Sorted Array: 97,89,87,67,61,54,40,39,34,12,2
Comparison
| Method | Result | Use Case |
|---|---|---|
arr.sort() |
String-based sorting | Text sorting only |
arr.sort((a,b) => a - b) |
Numeric ascending | Numbers: smallest to largest |
arr.sort((a,b) => b - a) |
Numeric descending | Numbers: largest to smallest |
Conclusion
Always use a compare function when sorting numeric arrays in JavaScript. Use (a, b) => a - b for ascending order and (a, b) => b - a for descending order to ensure proper numeric sorting.
12K+ Views
