Sorting an array means arranging its elements in a specific order, usually ascending (smallest to largest) or descending (largest to smallest). JavaScript provides built-in methods to sort arrays, making it easy to organize data.
1️⃣ Using sort() Method
The simplest way to sort an array is the sort() method.
let fruits = ["Banana", "Apple", "Cherry"]; fruits.sort(); console.log(fruits); // Output: ["Apple", "Banana", "Cherry"] (alphabetical order)
2️⃣ Sorting Numbers
JavaScript treats numbers as strings by default in sort(), so we need a compare function.
let numbers = [40, 100, 1, 5, 25];
// Ascending order
numbers.sort(function(a, b) {
return a - b; // Sorts numbers from smallest to largest
});
console.log(numbers); // [1, 5, 25, 40, 100]
// Descending order
numbers.sort(function(a, b) {
return b - a; // Sorts numbers from largest to smallest
});
console.log(numbers); // [100, 40, 25, 5, 1]
Explanation of Compare Function:
a - b > 0 → b comes before aa - b < 0 → a comes before ba - b == 0 → no change3️⃣ Sorting Strings in Reverse Order
let fruits = ["Banana", "Apple", "Cherry"]; fruits.sort().reverse(); console.log(fruits); // ["Cherry", "Banana", "Apple"]
reverse() reverses the order after sortingExplanation:
fruits.slice().sort() → creates a sorted copy of the arraynumbers.sort(function(a, b){return a-b}) → sorts numbers ascendingnumbers.sort(function(a, b){return b-a}) → sorts numbers descendingjoin(", ") → displays array as a comma-separated string<!DOCTYPE html>
<html>
<head>
<title>JavaScript Array Sorting</title>
<style>
body { font-family: Arial; padding: 20px; }
button { padding: 10px 20px; margin: 5px; cursor: pointer; }
p { font-size: 18px; color: darkred; }
</style>
</head>
<body>
<h1>JavaScript Array Sorting Demo</h1>
<p id="demo">Click the buttons to sort arrays</p>
<button onclick="sortStrings()">Sort Fruits Alphabetically</button>
<button onclick="sortNumbersAsc()">Sort Numbers Ascending</button>
<button onclick="sortNumbersDesc()">Sort Numbers Descending</button>
<script>
let fruits = ["Banana", "Apple", "Cherry", "Mango"];
let numbers = [40, 100, 1, 5, 25];
function sortStrings() {
let sortedFruits = fruits.slice().sort(); // slice() avoids modifying original
document.getElementById("demo").innerHTML =
"Fruits sorted alphabetically: " + sortedFruits.join(", ");
}
function sortNumbersAsc() {
let sortedNumbers = numbers.slice().sort(function(a, b) { return a - b; });
document.getElementById("demo").innerHTML =
"Numbers ascending: " + sortedNumbers.join(", ");
}
function sortNumbersDesc() {
let sortedNumbers = numbers.slice().sort(function(a, b) { return b - a; });
document.getElementById("demo").innerHTML =
"Numbers descending: " + sortedNumbers.join(", ");
}
</script>
</body>
</html>