Sort Fractions in JavaScript | Junior Secondary Math & Coding Tutorial

Why Sorting Fractions Matters in Math and JavaScript

Sorting fractions in JavaScript is a valuable skill for junior secondary students who are learning to connect mathematics with coding. Instead of simply converting fractions into decimals, this tutorial shows you how to compare and arrange fractions step by step using the LCM method. By the end, you'll know how to write a JavaScript program to sort fractions in ascending and descending order, making it easier to solve math problems and strengthen your programming logic.

In this guide, we'll start with the basics of comparing fractions, then move on to a clear JavaScript code example for sorting fractions. You'll see how to rationalise fractions, apply the least common multiple (LCM), and use JavaScript's built-in functions to arrange them correctly. This approach not only improves your understanding of fractions but also builds confidence in writing simple algorithms.

Whether you're a student practicing for class, a teacher preparing classroom exercises, or a beginner looking for a JavaScript fractions tutorial, this lesson is designed to be easy to follow. Let's dive in and learn how to sort fractions step by step with JavaScript.

Rationalise (Canonise) the Fractions before Sorting | Maths Explanation for JavaScript Kids

Just like was shown with Adding Fractions in JavaScript and Subtractinging Fractions in JavaScript, fractional numbers also have to be rationalised before sorting. This means they are put in a form where their denominators become the same. This identical denominator is the LCM of the previous denominators of all the separate fractions.
After this is done, the new numerators can easily be sorted in a preferred order.

Step-by-Step Guide to Sorting Fractions in JavaScript

The following steps will guide us in writing our JavaScript code for sorting fractions.
Let's illustrate the steps to follow with the example case ⁵/₉, ³/₇, ¹/₂

Step 1:

Using the Find LCM in JavaScript class from the Primary Category, find the LCM of the denominators.
⇒ LCM of 9, 7 & 2 = 126

Step 2:

In a turn by turn fashion, divide the found LCM from Step 1 by each denominator, multiplying the quotient by the corresponding numerator.
⇒ ^{((5 x 14), (3 x 18), (1 x 63))}/₁₂₆
= ^{(70, 54, 63)}/₁₂₆

Step 3:

Go ahead and sort the numerators in our order of choice.
         ⇒ In ascending order:
         ⁵⁴/₁₂₆, ⁶³/₁₂₆, ⁷⁰/₁₂₆
         = ³/₇, ¹/₂, ⁵/₉

Create 2 new files; On Notepad++: File, New.
Call them SortFraction.html and SortFraction.js;
Type out the adjoining JavaScript code for sorting fractions in ascending and descending orders.

So! JavaScript Fun Practice Exercise - Sort Fractions

As a fun practice exercise, feel free to try out your own fractions with different numerators and denominators, and see how the JavaScript code sorts those fractions.

JavaScript Code for SortFraction.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Sorting Fractions</title>
        <script src="LCM.js"></script>
        <script src="AddFraction.js"></script>
        <script src="SortFraction.js"></script>
    </head>
    <body>

        <h3>Sort Fractions</h3>
        
        <div id="sort_fraction"></div>

        <script>
            var result = "Solving:<br/>";

            // Print as fraction
            for (var i = 0; i < numerators.length-1; i++) {
                result += "<sup>" + numerators[i] + "</sup> / <sub>" + denominators[i] + "</sub>";
            result += "  ,       ";
            }
            result += "<sup>" + numerators[i] + "</sup> / <sub>" + denominators[i] + "</sub><br/><br/>";

            // Carry out sort
            sortAscending();

            result += "Answer     =      ";

            // Print as fraction
            for (var i = 0; i < final_numerators.length-1; i++) {
                result += "<sup>" + final_numerators[i] + "</sup> / <sub>" + final_denominators[i] + "</sub>";
            result += "  ,       ";
            }
            result += "<sup>" + final_numerators[i] + "</sup> / <sub>" + final_denominators[i] + "</sub><br/><br/>";

            document.getElementById("sort_fraction").innerHTML = result;
        </script>

    </body>
</html>

JavaScript Code for SortFraction.js

numerators = [3, 5, 2, 1];//enter your own numerators
denominators = [4, 4, 4, 4];//enter your own denominators
var final_numerators = [];
var final_denominators = [];

function sortAscending() {
        var copy_numerators = [];

        canonizeFraction();

        // copy numerators of transformed fractions
        for (var i = 0; i < new_numerators.length; i++) {
            copy_numerators[i] = new_numerators[i];
        }

        // sort it
        copy_numerators.sort(function (a, b) {return a - b; });

        // map sorted (transformed) fractions to the original ones
        // STEP 3:
        for (var i = 0; i < copy_numerators.length; i++) {
            index = new_numerators.indexOf(copy_numerators[i]);
            final_numerators[i] = numerators[index];
            final_denominators[i] = denominators[index];
        }
}

function sortDescending() {
        var copy_numerators = [];

        canonizeFraction();

        // copy numerators of transformed fractions
        for (var i = 0; i < new_numerators.length; i++) {
            copy_numerators[i] = new_numerators[i];
        }

        // sort it
        copy_numerators.sort(function (a, b) {return b - a; });

        // map sorted (transformed) fractions the original ones
        // STEP 3:
        for (var i = 0; i < copy_numerators.length; i++) {
            index = new_numerators.indexOf(copy_numerators[i]);
            final_numerators[i] = numerators[index];
            final_denominators[i] = denominators[index];
        }
}

I have a better version / See other versions.