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 5/9,
3/7, 1/2
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))/126
= (70, 54, 63)/126
Step 3:
Go ahead and sort the numerators in our order of choice.
⇒ In ascending order:
54/126, 63/126,
70/126
=
3/7, 1/2,
5/9
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
<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>
<!-- This is where the result will be displayed when it is ready.-->
<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
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];
}
}