En este post de programación en JavaScript (que cubre el lado del cliente con los navegadores y también el lado del servidor con Node) veremos cómo manejar fracciones o quebrados para realizar operaciones con los mismos.

Es decir, vamos a implementar la clase Fracción y manejar con ella las operaciones de suma, resta, división, multiplicación, simplificación, inversa, exponente y conversión a mixta o a impropia desde JavaScript.

Al final vas a poder realizar cualquier operación matemática con las fracciones usando programación orientada a objetos y JS.

Explicación del funcionamiento

Para solucionar este problema y abstraer lo que es una fracción vamos a implementar una clase que representará a la fracción en JavaScript y dentro de ella existirán métodos que realizarán las operaciones matemáticas.

Recuerda que cada fracción tiene un numerador y un denominador, y solo con ello necesitamos operar.

La clase Fracción

Comencemos viendo la clase, que básicamente es la encargada de todo lo que vamos a ver en el post.

Tiene todos los métodos de las operaciones pero también cuenta con funciones ayudantes.

Las funciones ayudantes son las que sirven para calcular el Mínimo común múltiplo y el Máximo común divisor ya que funcionarán para la simplificación de fracciones y para la suma y resta.

class Fraccion {
    /*
        https://parzibyte.me/blog
    */    constructor(numerador, denominador) {
        this.setNumerador(numerador);
        this.setDenominador(denominador);
    }

    setNumerador(numerador) {
        this.numerador = numerador;
    }
    setDenominador(denominador) {
        if (denominador === 0) {
            throw "El denominador debe ser distinto de 0";
        }
        this.denominador = denominador;
    }
    // Ayudantes

    maximoComunDivisor(a, b) {
        let temporal;//Para no perder b
        while (b != 0) {
            temporal = b;
            b = a % b;
            a = temporal;
        }
        return a;
    }

    minimoComunMultiplo(a, b) {
        return (a * b) / this.maximoComunDivisor(a, b);
    }
    // Operaciones

    suma(otra) {
        const mcm = this.minimoComunMultiplo(this.denominador, otra.denominador);
        const diferenciaFraccionActual = mcm / this.denominador;
        const diferenciaOtraFraccion = mcm / otra.denominador;
        const resultado = new Fraccion();
        resultado.setNumerador(
            (diferenciaFraccionActual * this.numerador) + (diferenciaOtraFraccion * otra.numerador));
        resultado.setDenominador(mcm);
        return resultado;
    }

    resta(otra) {
        const mcm = this.minimoComunMultiplo(this.denominador, otra.denominador);
        const diferenciaFraccionActual = mcm / this.denominador;
        const diferenciaOtraFraccion = mcm / otra.denominador;
        const resultado = new Fraccion();
        resultado.setNumerador(
            (diferenciaFraccionActual * this.numerador) - (diferenciaOtraFraccion * otra.numerador));
        resultado.setDenominador(mcm);
        return resultado;
    }

    producto(otra) {
        return new Fraccion(this.numerador * otra.numerador, this.denominador * otra.denominador);
    }

    cociente(otra) {
        return new Fraccion(this.numerador * otra.denominador, this.denominador * otra.numerador);
    }

    inversa() {
        return new Fraccion(this.denominador, this.numerador);
    }

    potencia(exponente) {
        return new Fraccion(Math.pow(this.numerador, exponente), Math.pow(this.denominador, exponente));
    }

    simplifica() {
        const mcd = this.maximoComunDivisor(this.numerador, this.denominador);
        return new Fraccion(this.numerador / mcd, this.denominador / mcd);
    }

    aMixta() {
        return FraccionMixta.desdeImpropia(this);
    }

    toString() {
        return `${this.numerador}/${this.denominador}`;
    }

    equals(otra) {
        return this.numerador === otra.numerador && this.denominador === otra.denominador;
    }
}

Si te fijas tenemos lo común de una clase y todas las operaciones matemáticas que no explicaré porque aquí solo te muestro cómo implementar las fracciones en JavaScript para resolverlas.

Pero además, tenemos algunos métodos como aMixta que convierte la fracción impropia a mixta usando una clase que veremos a continuación, así como la función toString (que si vienes de Java se te hará conocida) y la función equals que compara fracciones.

Ahora veamos la siguiente clase que es la que va a manejar las fracciones mixtas.

Fracción mixta con JavaScript

Esta clase es un poco más simple e igualmente trabaja con la clase vista anteriormente. Recuerda que una fracción mixta tiene un entero y una fracción.

Justamente eso hemos logrado con esta clase, misma que tiene un entero y una propiedad fracción que es una instancia de la clase Fracción, aunque suene repetitivo.

class FraccionMixta {

    /*
        https://parzibyte.me/blog
    */    constructor(entero, fraccion) {
        this.entero = entero;
        this.fraccion = fraccion;
    }
    aImpropia() {
        let numerador = this.fraccion.numerador;
        if (this.entero) {
            numerador = numerador + (this.fraccion.denominador * this.entero);
        }
        return new Fraccion(numerador, this.fraccion.denominador);
    }

    static desdeImpropia(fraccion) {
        let entero = 0;
        if (fraccion.numerador >= fraccion.denominador) {
            entero = Math.floor(fraccion.numerador / fraccion.denominador);
            const residuo = fraccion.numerador % fraccion.denominador;
            if (residuo > 0) {
                fraccion = new Fraccion(residuo, fraccion.denominador);
            } else {
                fraccion = null;
            }
        }
        return new FraccionMixta(entero, fraccion);
    }

    toString() {
        let resultado = "";
        if (this.entero) {
            resultado = resultado.concat(this.entero);
            if (this.fraccion) {
                resultado = resultado.concat(" + ");
            }
        }
        if (this.fraccion) {
            resultado = resultado.concat(this.fraccion.toString());
        }
        return resultado;
    }
}

Esta clase sirve principalmente para encapsular varios métodos, pues no tiene tantas operaciones como la otra.

Lo más interesante a mi parecer está en la función desdeImpropia que convierte una fracción impropia a mixta, revisando si puede extraer la parte entera y simplificarla.

Poniendo todo junto

Ya te mostré las clases. Este código puede ser usado en el navegador web del lado del cliente o con Node del lado del servidor, así como en frameworks de cualquier tipo.

Ahora veamos cómo usar estas clases y métodos que acabamos de ver. Queda a tu criterio cómo incluir la clase (si usas HTML simplemente importa el script que contiene las clases), en mi caso he hecho justamente eso.

Entonces el archivo HTML queda así, aunque recuerda que igualmente puedes implementar el código en el backend:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fracciones en JavaScript - By Parzibyte</title>
</head>

<body>

</body>
<script src="Fraccion.js"></script>
<script>
    const f = new Fraccion(5, 6);
    const f2 = new Fraccion(7, 24);
    console.log(`${f.toString()} + ${f2.toString()} = ${f.suma(f2).toString()}`);
    console.log(`${f.toString()} - ${f2.toString()} = ${f.resta(f2).toString()}`);
    console.log(`${f.toString()} * ${f2.toString()} = ${f.producto(f2).toString()}`);
    console.log(`${f.toString()} / ${f2.toString()} = ${f.cociente(f2).toString()}`);
    console.log(`Inversa de ${f.toString()} = ${f.inversa().toString()}`);
    const exponente = 3;
    console.log(`Potencia de ${f.toString()} con exponente ${exponente} = ${f.potencia(exponente).toString()}`);
    const fraccionParaSimplificar = new Fraccion(80, 120);
    console.log(`Simplificar ${fraccionParaSimplificar.toString()}  = ${fraccionParaSimplificar.simplifica().toString()}`);
    const f3 = new Fraccion(1, 5);
    const f4 = new Fraccion(1, 3);
    const f5 = new Fraccion(1, 5);
    console.log(`${f3.toString()} es igual a ${f4.toString()}? ${f3.equals(f4)}`);
    console.log(`${f3.toString()} es igual a ${f5.toString()}? ${f3.equals(f5)}`);
    console.log(`${f4.toString()} es igual a ${f5.toString()}? ${f4.equals(f5)}`);

    const fraccionesParaMixta = [
        new Fraccion(7, 3),
        new Fraccion(2, 3),
        new Fraccion(5, 5),
        new Fraccion(10, 5),
        new Fraccion(1, 5),
        new Fraccion(7, 5),
        new Fraccion(71, 5),
    ];
    fraccionesParaMixta.forEach(fraccion => {
        console.log(`${fraccion.toString()} a mixta es: ${fraccion.aMixta().toString()}`);
    });

    const fraccionesParaImpropia = [
        new FraccionMixta(1, new Fraccion(3, 5)),
        new FraccionMixta(0, new Fraccion(3, 5)),
        new FraccionMixta(2, new Fraccion(3, 5)),
        new FraccionMixta(1, new Fraccion(2, 5)),
        new FraccionMixta(14, new Fraccion(1, 5)),
        new FraccionMixta(0, new Fraccion(1, 1)),
    ];
    fraccionesParaImpropia.forEach(fraccionMixta => {
        console.log(`${fraccionMixta.toString()} a impropia es: ${fraccionMixta.aImpropia().toString()}`);
    });

</script>

</html>

Como puedes ver estoy incluyendo un script en mi HTML y es en donde estoy probando todos los métodos de las fracciones.

La salida es correcta al abrir la consola de desarrollo en el navegador web con la tecla F12:

Te repito que en este caso lo he hecho de esa manera pero bien podrías copiar y pegar el código de la clase directamente, o usarlo en el lado del servidor con Node.

Al final lo único que importa es contar con la clase y usarla. Si te gusta JavaScript aprende más en mi blog.

Si quieres puedes ver un vídeo para explicaciones adicionales: