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)

Default behavior: sorts elements as strings alphabetically.
Works well for strings, but may not work as expected for numbers.

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 a
a - b < 0 → a comes before b
a - b == 0 → no change

3️⃣ Sorting Strings in Reverse Order

let fruits = ["Banana", "Apple", "Cherry"];
fruits.sort().reverse();
console.log(fruits); 
// ["Cherry", "Banana", "Apple"]

reverse() reverses the order after sorting

Compilation of Entire Code

Explanation:

fruits.slice().sort() → creates a sorted copy of the array
numbers.sort(function(a, b){return a-b}) → sorts numbers ascending
numbers.sort(function(a, b){return b-a}) → sorts numbers descending
join(", ") → 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>

Sorting JavaScript Array

Compilation of Entire Code

Test Your Understanding

All Courses

Java Script