Variables de Función en Javascript.

Una característica muy interesante en javascript es la posibilidad de asignar una función a una variable, esta es una forma sencilla de implementar el patrón de diseño "estrategia" con lo cual simplificamos la lógica de nuestro programa al eliminar grandes cantidades de if o de switch, con este ejemplo pretendo hacer una demostración de su uso.

Ejemplo Paso a Paso.

La idea atrás de este ejmplo es un tanto absurda pero espero que sea ilustrativa, realizaremos las 4 operaciones fundamentales de la matemática de una manera uniforme tratando de no usar ningún if, el resultado funcionando de lo que haremos es el siguiente: (se puede probar).

Primero que nada declaramos nuestras 4 funciones.

function sumar(a,b) {
//suma de enteros, para no confundirla con la concatenacion
return parseInt(a)+parseInt(b);
}
function restar(a,b) {
return a-b;
}
function multiplicar(a,b) {
return a*b;
}
function dividir(a,b) {
return a/b;
}

Luego de esto, definimos la variable de nuestra función y le agregaremos un valor por defecto.

//definir la funcion por default
var funcion_actual = sumar;

Ahora definimos una función setter, no es obligatoria pero conviene que esté por claridad.

//una funcion que sirve para establecer la operacion a usar
function setFuncion(funcion) {
funcion_actual = funcion;
}

Ahora la función que hace la magia, lee la función a utilizar de la variable y simplemente la evalúa sin mas ni mas, completamente transparente y no sabe qué es lo que está evaluando realmente, sólo sabe que requiere 2 operandos. Además de esto leemos los valores de unos campos de texto y colocamos el resultado adentro de la etiqueta cuyo id se le pasa a la función evaluar a través de id_destino.


//una funcion para evaluar la operacion
function evaluar(id_destino) {

//leer los operadores
op1 = document.getElementById("campo_op1").value;
op2 = document.getElementById("campo_op2").value,

//evaluar la funcion
valor_evaluacion = funcion_actual(op1, op2);

//mostrar los resultados
document.getElementById(id_destino).innerHTML = valor_evaluacion;
}

Finalmente coloco un fragmento de html donde podemos probar el código tal cual.


<p>
<input type="button" value="Suma" onclick="setFuncion(sumar)" />
<input type="button" value="Resta" onclick="setFuncion(restar)" />
<input type="button" value="Multiplic" onclick="setFuncion(multiplicar)" />
<input type="button" value="Division" onclick="setFuncion(dividir)" />
<br/>
<input type="text" id="campo_op1" />
<input type="text" id="campo_op2" />
<input type="button" value="Evaluar" onclick="evaluar('resultado_operacion')" />
</p>
<p id="resultado_operacion"></p>


El html de arriba contiene 4 botones mediante los cuales el usuario especifica lo que desea, 2 campos de entrada de texto de donde la función leerá los valores, un botón que llamará a la función evaluar y finalmente el párrafo adonde mostraremos el resultado de todo.

Espero que les sea de utilidad y cualquier cosa posteen preguntas.


Saludos!