Sorting JavaScript object by length of array properties.

In JavaScript, you can sort objects by the length of their array properties using the sort() method with a custom comparison function. This is useful when organizing data based on array sizes.

Syntax

array.sort((a, b) => a.property.length - b.property.length);

Example: Sorting Students by Number of Subjects

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sort by Array Length</title>
    <style>
        body {
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            padding: 20px;
        }
        .result {
            margin-top: 20px;
            padding: 10px;
            background: #f5f5f5;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>Sorting JavaScript Objects by Array Property Length</h1>
    <button onclick="sortStudents()">Sort by Subject Count</button>
    <div id="result" class="result"></div>
    
    <script>
        let students = [
            { name: "Rohan", subjects: ["Maths", "Science", "EVS", "SST"] },
            { name: "Mohan", subjects: ["Maths", "Science", "SST"] },
            { name: "Shawn", subjects: ["Maths", "Physics", "Chemistry", "Biology", "German"] },
            { name: "Michael", subjects: ["Biology", "Hindi", "Sanskrit", "SST", "EVS", "Maths"] }
        ];

        function sortStudents() {
            // Sort by array length (ascending)
            let sortedStudents = students.sort((a, b) => a.subjects.length - b.subjects.length);
            
            let output = "<h3>Students sorted by number of subjects:</h3>";
            sortedStudents.forEach(student => {
                output += `<p><strong>${student.name}</strong>: ${student.subjects.length} subjects</p>`;
            });
            
            document.getElementById("result").innerHTML = output;
            console.log("Sorted students:", sortedStudents);
        }
    </script>
</body>
</html>

Sorting Methods

Ascending Order (Smallest to Largest)

let data = [
    { name: "John", hobbies: ["reading", "gaming"] },
    { name: "Alice", hobbies: ["cooking"] },
    { name: "Bob", hobbies: ["sports", "music", "travel"] }
];

// Sort ascending by hobbies array length
data.sort((a, b) => a.hobbies.length - b.hobbies.length);
console.log("Ascending order:");
data.forEach(person => console.log(`${person.name}: ${person.hobbies.length} hobbies`));
Ascending order:
Alice: 1 hobbies
John: 2 hobbies
Bob: 3 hobbies

Descending Order (Largest to Smallest)

// Sort descending by hobbies array length
data.sort((a, b) => b.hobbies.length - a.hobbies.length);
console.log("Descending order:");
data.forEach(person => console.log(`${person.name}: ${person.hobbies.length} hobbies`));
Descending order:
Bob: 3 hobbies
John: 2 hobbies
Alice: 1 hobbies

Comparison Table

Sort Order Comparison Function Result
Ascending a.property.length - b.property.length Smallest arrays first
Descending b.property.length - a.property.length Largest arrays first

How It Works

The sort() method uses a comparison function that returns:

  • Negative value: First element comes before second
  • Zero: Elements are equal
  • Positive value: First element comes after second

By subtracting array lengths (a.length - b.length), we get the proper sorting order based on size.

Conclusion

Sorting objects by array property length is straightforward using sort() with length comparison. Use a.length - b.length for ascending order and b.length - a.length for descending order.

Updated on: 2026-03-15T23:18:59+05:30

515 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements