2

Soy nuevo en JavaScript, quería saber si el aplicarlo de esta manera es correcta, funcionar funciona pero tengo dudas en cuanto tiempo de ejecución o si podría perjudicarme de alguna otra manera más adelante.

La preguntas son:

1.- Quería saber si es correcto pasar en esta línea la referencia de la función que es mi callback en el documento HTML. Como ven yo hago mostrarResultado(obtenerOperacion). Esta bien eso?.

No se si seria mejor dejarlo asi o directamente llamar esa funcion dentro de la otra sin usar el concepto de callback, o sea, no pasarlo como argumento, si no que desde .JS en mostrarResultado() llame a esa funcion y lo guarde el resultado en una variable.

<button class="botonResultado" onclick="mostrarResultado(obtenerOperacion)">Resolver</button>

2.- En mi código de JS. Tengo:

let formulario = document.getElementById('formCalculadoraID');

Esta bien tomar ahora esa variable formulario y pasarla de argumento a mi otra función donde necesito ese formulario o seria mejor en esa otra función volver a llamar a toda esa linea de codigo de let formulario = etc...?.

let obtenerOperacion = (formulario) => {
    //conviene usar ese argumento o redefinir let formulario = document.getElementById('formCalculadoraID');  ?
    let gestion = formulario['selectorID'].value;
    console.log(`Se ha gestionado la operacion: ${gestion}`);
    return gestion;
}

let mostrarResultado = (funcionCallback) => {
    let formulario = document.getElementById('formCalculadoraID');
    let operandoA = parseInt(formulario['operandoA'].value);
    let operandoB = parseInt(formulario['operandoB'].value);
    let operacion = funcionCallback(formulario); //aca paso de argumento el formulario a mi callback
    let resultado = '';
    
    if(operacion == 'Suma') resultado = operandoA + operandoB;
    else if(operacion == 'Resta') resultado = operandoA - operandoB;
    else if(operacion == 'Multiplicacion') resultado = operandoA * operandoB;
    else if(operacion == 'Division') resultado = operandoA / operandoB;

    if(isNaN(resultado)) resultado = 'No hay valores numericos';
    document.getElementById('resultadoObtenidoID').innerHTML = `Resultado: ${resultado}`;
}

1 respuesta 1

2

Esta función me parece bien tal y como está, getElementById es una función súper rápida y optimizada, pero no por eso hay que usarla cada vez. Tu ya buscaste el formulario, así que es mejor pasarlo como argumento

let obtenerOperacion = (formulario) => {
    //conviene usar ese argumento o redefinir let formulario = document.getElementById('formCalculadoraID');  ?
    let gestion = formulario['selectorID'].value;
    console.log(`Se ha gestionado la operacion: ${gestion}`);
    return gestion;
}

Aunque yo no le veo mucho sentido, solo rescata el valor de un input/select,

Esta otra función si tiene detalles:

let mostrarResultado = (funcionCallback) => {
    //implementación
}

El uso de argumentos tiene un sentido de ser variable, crear una función donde siempre ingresarás el mismo argumento no tiene sentido. Y un calback tiene el sentido de devolver un resultado dentro de una función para ti desconocida, tu no sabes que hará dicha función y no te importa.

Por ejemplo, tenemos un input con un valor numérico y queremos sumar +10. Para esto creamos la función sumar. A ti no te importa que se haga con ese resultado, tu sola preocupación es sumar +10. Delegas la responsabilidad de hacer algo con esa suma a un callback

Luego yo puedo querer ocupar tu función sumar y querer mostrar el resultado en un alert o por consola. Ejemplo

let sumar = (funcionCallback) => {
    let suma = Number(input.value) + 10; //preferir usar Number por sobre parseInt()
    funcionCallback(suma);
}
<input id="input" value="13">
<button onclick="sumar(console.log)">Mostrar por consola</button>
<button onclick="sumar(alert)">Mostrar por Alert</button>

En general se ocupan por 2 motivos

  • Para crear procesos genericos, es decir una solución que soluciona todos los caso (no uno en particular), obviamente las librerías de 3ros usan este recursos (Por ejemplo en esta respuesta yo uso callback para sumar y agrupar lista, cualquier lista sin importar que tipo de elementos existan en ellas https://es.stackoverflow.com/a/584557/301324)
  • Llamadas asíncronas, que por su naturaleza tú no sabes cuando terminan, así a través de un callback continuas el proceso

Y todo esto, para decirte que el callback (a primera vista) no lo necesitas, porque siempre llamas a la función obtenerOperacion.

Como lo haría yo:

let mostrarResultado = () => {
    let formulario = document.getElementById('formCalculadoraID');
    let operandoA = Number(formulario['operandoA'].value);
    let operandoB = Number(formulario['operandoB'].value);
    let operacion = formulario['selectorID'].value; 
     
    let result = operaciones[operacion](operandoA,operandoB);

    console.log(result);
}

const operaciones = {
 Suma : (a,b) => a + b,
 Resta : (a,b) => a - b, 
 Multiplicacion : (a,b) => a * b, 
 Division : (a,b) => a / b
}
<form id="formCalculadoraID">
<input id="operandoA" value="0"  type="number">
<select id ="selectorID">
  <option value="Suma">Suma</option>
  <option value="Resta">Resta</option>
  <option value="Multiplicacion">Multiplicación</option>
  <option value="Division">División</option>
</select>
<input id="operandoB" value="0" type="number">
<button type="button" onclick="mostrarResultado()">Resolver</button>

3
  • Perfecto, muy claro la verdad. Muchas gracias :D
    – Alan Stone
    Commented el 3 mar. 2023 a las 3:17
  • 1
    @AlanStone que bueno te haya ayudado, acabo de cambiar el último código por uno que creo que va servir
    – Yussef
    Commented el 3 mar. 2023 a las 3:22
  • La verdad si que simplifica bastante eso, muchas gracias!!
    – Alan Stone
    Commented el 3 mar. 2023 a las 3:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.