Subtract Fractions in JavaScript | Step-by-Step Guide with Code Examples

subtracting fractions with Different Denominators | Rationalising Fractions in JavaScript

Learning how to subtract fractions in JavaScript is an important step for junior secondary students who are beginning to combine mathematics with coding. In this tutorial, we'll walk through the process of subtracting fractions with different denominators, explain how to use the LCM (Lowest Common Multiple) method, and show you how to rationalise or canonise fractions before subtraction. By the end, you'll be able to write a simple JavaScript program to subtract fractions step by step, giving you both a solid maths foundation and practical coding skills to implement libraries like the built-in JavaScript fractions module.

Like with Adding Fractions in JavaScript, fractional numbers are also rationalised before subtraction. 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 then be subtracted.

Steps for Subtraction of Fractions with Different Denominators - JavaScript Algorithm

The following steps will guide us in writing our JavaScript code for subtracting fractions.
Let's illustrate these steps with the example fractional expression ⁷/₄ - ²/₅

Step 1:

Using the Find LCM in JavaScript class from the Primary Category, find the LCM of the denominators.
⇒ LCM of 4 & 5 = 20

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.
⇒ ^{((7 x 5) - (2 x 4))}/₂₀
= ^{(35 - 8)}/₂₀

Step 3:

Go ahead and subtract the numerators.
⇒ ²⁷/₂₀

Create 2 new files; On Notepad++: File, New.
Call them SubtractFraction.html and SubtractFraction.js;
Type out the adjoining JavaScript code for subtracting fractions.

So! JavaScript Fun Practice Exercise - Add 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 divides those fractions.

JavaScript Code for SubtractFraction.html

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

        <h3>Subtract Fractions</h3>
        
        <div id="subtract_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 subtraction
            doSubtract();

            // Print as fraction
            result += "Answer     =      ";
            result += " <sup>" + answer + "</sup> ";
            result += "/ <sub>" + LCM + "</sub><br/>";

            document.getElementById("subtract_fraction").innerHTML = result;

        </script>

    </body>
</html>

JavaScript Code for SubtractFraction.js

numerators = [1, 1, 1, 1];//enter your own numerators
denominators = [4, 4, 4, 4];//enter your own denominators

function doSubtract() {
    canonizeFraction();

    // subtract all transformed numerators
    // STEP 3:
    answer = new_numerators[0];
    for (var i = 1; i < new_numerators.length; i++) {
        answer -= new_numerators[i];
    }
}

I have a better version / See other versions.