JavaScript Array Sort - JavaScript Sorting Arrays
Sorting an Array
- The sort() method sorts an array alphabetically.
Sample Code
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>The sort() method sorts an array alphabetically:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const names = ["kaashiv", "infotech", "wikitechy", "krishiv"];
document.getElementById("demo1").innerHTML = names;
names.sort();
document.getElementById("demo2").innerHTML = names;
</script>
</body>
</html>
Output
JavaScript Array Sort
The sort() method sorts an array alphabetically:
kaashiv,infotech,wikitechy,krishiv
infotech,kaashiv,krishiv,wikitechy
Reversing an Array
- The reverse() method reverses the elements in an array.
- You can use it to sort an array in descending order.
Sample Code
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>The sort() method sorts an array alphabetically:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const names = ["kaashiv", "infotech", "wikitechy", "krishiv"];
document.getElementById("demo1").innerHTML = names;
names.reverse();
document.getElementById("demo2").innerHTML = names;
</script>
</body>
</html>
Output
JavaScript Array Sort
The sort() method sorts an array alphabetically:
kaashiv,infotech,wikitechy,krishiv
krishiv,wikitechy,infotech,kaashiv
Numeric Sort
- By default, the sort() function sorts values as strings.
- This works well for strings ("Apple" comes before "Banana").
- However, if numbers are sorted as strings, "25" is bigger than "100", because "2" is bigger than "1".
- Because of this, the sort() method will produce incorrect result when sorting numbers.
- You can fix this by providing a compare function.
Sample Code
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Sort the array in ascending order:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const number = [50,30,54,35,26,90];
document.getElementById("demo1").innerHTML = number;
number.sort(function(a, b){return a - b});
document.getElementById("demo2").innerHTML = number;
</script>
</body>
</html>
Output
JavaScript Array Sort
Sort the array in ascending order:
50,30,54,35,26,90
26,30,35,50,54,90
Use the same trick to sort an array descending:
const number = [50,30,54,35,26,90];
number.sort(function(a, b){return b - a});
The Compare Function
- The purpose of the compare function is to define an alternative sort order.
- The compare function should return a negative, zero, or positive value, depending on the arguments.
- When the sort() function compares two values, it sends the values to the compare function, and sorts the values according to the returned (negative, zero, positive) value.
- If the result is negative, a is sorted before b.
- If the result is positive, b is sorted before a.
- If the result is 0, no changes are done with the sort order of the two values.
Sample Code
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Click the buttons to sort the array alphabetically or numerically.</p>
<button onclick="myFunction1()">Sort Alphabetically</button>
<button onclick="myFunction2()">Sort Numerically</button>
<p id="demo"></p>
<script>
const numbers = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = numbers;
function myFunction1() {
numbers.sort();
document.getElementById("demo").innerHTML = numbers;
}
function myFunction2() {
numbers.sort(function(a, b){return a - b});
document.getElementById("demo").innerHTML = numbers;
}
</script>
</body>
</html>
Output
Sorting an Array in Random Order
const numbers = [40, 100, 1, 5, 25, 10];
numbers.sort(function(){return 0.5 - Math.random()});
Find the Highest (or Lowest) Array Value
- There are no built-in functions for finding the max or min value in an array.
- However, after you have sorted an array, you can use the index to obtain the highest and lowest values.
- Sorting ascending.
const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
// now points[0] contains the lowest value
// and points[points.length-1] contains the highest value
Using Math.max() on an Array
- You can use Math.max.apply to find the highest number in an array.
function myArrayMax(arr) {
return Math.max.apply(null, arr);
}
Using Math.min() on an Array
- You can use Math.min.apply to find the lowest number in an array.
function myArrayMin(arr) {
return Math.min.apply(null, arr);
}