JavaScript Sorting Arrays
Sorting an Array
The sort() method arranges the elements in an array in alphabetical order.
Reversing an Array
The reverse() method changes the order of items in a array so that they go in the opposite direction.
You can use it to arrange an array from highest to lowest.
Numeric Sort
The sort() function, by default, arranges values as if they were words or text.
This is effective with text (Apple appears before Banana).
But, if you sort numbers like they are words, 25 is considered greater than 100 because the digit 2 is greater than 1.
Due to this issue, the sort() method will not give the right outcome when sorting numbers.
You can solve this issue by supplying a comparison function.
Apply the same technique to arrange an array in descending order:
The Compare Function
The compare function is used to create a different way to arrange things.
The compare function needs to give back a number that can be negative, zero, or positive, based on the arguments it receives.
function(a, b){return a - b}
When the sort() function checks two items, it uses a comparison function to decide how they should be ordered based on whether the result is negative, zero, or positive.
When the outcome is less than zero, 'a' is arranged ahead of 'b'.
If the outcome is good, b comes before a in the sorting order.
If the result is 0, it means that the order of the two values remains the same; there are no changes made in their sorting order.
Example:
The compare function looks at pairs of values in the array, two at a time, using (a, b).
When you compare the numbers 40 and 100, the sort() method invokes a comparison function with the parameters 40 and 100.
The operation subtracts (a - b) from 40, which results in a negative value (-60). Therefore, when using the sort function, 40 will be considered lower than 100.
You can try out this piece of code to practice sorting numbers and letters, both numerically and alphabetically.
Sorting an Array in Random Order
The Fisher Yates Method
The code shown above, when using array.sort(), is not entirely correct. It may give preference to certain numbers over others.
One commonly accepted approach is the Fisher Yates shuffle, which was first used in data science way back in 1938!
In JavaScript the method can be translated to this:
Find the Lowest (or Highest) Array Value
No ready-made functions exist to discover the highest or lowest value in an array.
Once you've arranged an array in a particular order, you can use the array's index to find both the largest and smallest values.
Sorting ascending:
Sorting descending:
Sorting an entire array is not very efficient if you just need to find the biggest or smallest number.
Using Math.max() on an Array
You can utilize the Math.max.apply method to locate the largest number within an array.
The code Math.max.apply(null, [1, 2, 3]) does the same thing as Math.max(1, 2, 3).
Using Math.min() on an Array
You can employ the Math.min.apply function to locate the smallest number within an array.
The Math.min.apply(null, [1, 2, 3]) does the same thing as Math.min(1, 2, 3).
Sorting Object Arrays
JavaScript arrays often contain objects:
Example
const cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}
];
Even if things in a list have different types, you can still use the sort() method to arrange them in order.
The solution is to write a compare function to compare the property values:
Comparing text characteristics can be a bit tricky:
Stable Array sort()
In 2019, changes were made to the Array's 'sort()' method, which were revised.
Prior to 2019, the rules allowed for sorting methods that were not very reliable, like QuickSort.
After ES2019, browsers must use a stable sorting algorithm:
When you organize items based on a particular value, it's important to ensure that items with the same value stay in their original order relative to each other.
In the provided example, when we sort items based on their prices, the outcome should not rearrange the names to different positions, like this:
X01 100
X03 100
X00 100
X03 100
X05 110
X04 110
X06 110
X07 110
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>
<p>The sort() method sorts an array alphabetically:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.sort();
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reverse() Method</h2>
<p>The reverse() method reverses the elements in an array:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
// Create and display an array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
// Reverse the array:
fruits.reverse();
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>
<p>Sort the array in ascending order:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo1").innerHTML = points;
points.sort(function(a, b) {
return a - b
});
document.getElementById("demo2").innerHTML = points;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>
<p>Sort the array in descending order:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo1").innerHTML = points;
points.sort(function(a, b) {
return b - a
});
document.getElementById("demo2").innerHTML = points;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</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 points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction1() {
points.sort();
document.getElementById("demo").innerHTML = points;
}
function myFunction2() {
points.sort(function(a, b) {
return a - b
});
document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>
<p>Click the button (again and again) to sort the array in random order.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction() {
points.sort(function() {
return 0.5 - Math.random()
});
document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array Sort</h1>
<h2>The Fisher Yates Method</h2>
<p>Click the button (again and again) to sort the array in random order.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction() {
for (let i = points.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
let k = points[i];
points[i] = points[j];
points[j] = k;
}
document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>
<p>The lowest number is <span id="demo"></span>. </p>
<script>
const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b) {
return a - b
});
document.getElementById("demo").innerHTML = points[0];
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>
<p>The highest number is <span id="demo"></span>. </p>
<script>
const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b) {
return b - a
});
document.getElementById("demo").innerHTML = points[0];
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array Sort</h1>
<p>The highest number is <span id="demo"></span>. </p>
<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMax(points);
function myArrayMax(arr) {
return Math.max.apply(null, arr);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array Sort</h1>
<p>The lowest number is <span id="demo"></span>. </p>
<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMin(points);
function myArrayMin(arr) {
return Math.min.apply(null, arr);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>
<p>Sort car objects on age:</p>
<p id="demo"></p>
<script>
const cars = [{
type: "Volvo",
year: 2016
}, {
type: "Saab",
year: 2001
}, {
type: "BMW",
year: 2010
}];
displayCars();
cars.sort(function(a, b) {
return a.year - b.year
});
displayCars();
function displayCars() {
document.getElementById("demo").innerHTML = cars[0].type + " " + cars[0].year + " <br> " +
cars[1].type + " " + cars[1].year + " <br> " +
cars[2].type + " " + cars[2].year;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>
<p>Click the buttons to sort car objects on type.</p>
<button onclick="myFunction()">Sort</button>
<p id="demo"></p>
<script>
const cars = [{
type: "Volvo",
year: 2016
}, {
type: "Saab",
year: 2001
}, {
type: "BMW",
year: 2010
}];
displayCars();
function myFunction() {
cars.sort(function(a, b) {
let x = a.type.toLowerCase();
let y = b.type.toLowerCase();
if (x < y) {
return -1;
}
if (x > y) {
return 1;
}
return 0;
});
displayCars();
}
function displayCars() {
document.getElementById("demo").innerHTML = cars[0].type + " " + cars[0].year + " <br> " +
cars[1].type + " " + cars[1].year + " <br> " +
cars[2].type + " " + cars[2].year;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Stable Sort</h1>
<p>From ES2019, browsers must use a stable sorting algorithm.</p>
<p>When sorting elements on a key, the elements must keep their relative position to other objects with the same key.</p>
<p id="demo"></p>
<script>
const myArr = [{
name: "X00",
price: 100
}, {
name: "X01",
price: 100
}, {
name: "X02",
price: 100
}, {
name: "X03",
price: 100
}, {
name: "X04",
price: 110
}, {
name: "X05",
price: 110
}, {
name: "X06",
price: 110
}, {
name: "X07",
price: 110
}, {
name: "X08",
price: 120
}, {
name: "X09",
price: 120
}, {
name: "X10",
price: 120
}, {
name: "X11",
price: 120
}, {
name: "X12",
price: 130
}, {
name: "X13",
price: 130
}, {
name: "X14",
price: 130
}, {
name: "X15",
price: 130
}, {
name: "X16",
price: 140
}, {
name: "X17",
price: 140
}, {
name: "X18",
price: 140
}, {
name: "X19",
price: 140
}];
myArr.sort((p1, p2) => {
if (p1.price < p2.price) return -1;
if (p1.price > p2.price) return 1;
return 0;
});
let txt = "";
myArr.forEach(myFunction);
function myFunction(value) {
txt += value.name + " " + value.price + " <br> ";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery