Crear un calculadora con funciones

Hasta ahora hemos visto funciones muy sencillas y sin ningún objetivo. Ha llegado el momento de añadir un poco de dificultad y de realizar algo un poco más útil, una calculadora .

Para realizar este proyecto, podemos crear una única función que realice todas las operaciones de cálculo o bien crear funciones para cada una de las operaciones de suma, resta, multiplicación, etc.

Es más interesante crear una función separada para cada cosa, llamémoslos pequeños módulos. Estos módulos, podrán ser empleados por separado sin depender de los otros módulos. Es decir, si en cualquier parte del código necesitas que se realice una suma, llamas a la función suma y no a todas las operaciones si estuvieran en la misma función. Conseguimos algo más de velocidad a la hora de ejecutarlo. Es cierto que con funciones tan simples no se va a notar, pero es conveniente que te vayas acostumbrando a hacer las cosas lo más óptimas que puedes.

Primero declaramos las variables de la calculadora:

let operacion = prompt("¿Qué operación desea? 1-Sumar 2-Restar 3-Multiplicar 4-Dividir");
let operando1 = parseInt(prompt("Introduce el primer número:"));
let operando2 = parseInt(prompt("Introduce el segundo número:"));
let resultado;

operacion es una variable que contiene un prompt(). Esto lo hago para poder guardar el valor que introduzca el usuario para poder utilizarlo más adelante.

Las variables operando1 y operando2 son los operandos (números) que vamos a utilizar en las diferentes operaciones.

La variable resultado la reservo sin inicializar hasta más adelante.

Te habrás fijado en que el prompt() de operando1 y operando2 está envuelto entre los paréntesis de un parseInt(). Con esto, conseguimos transformar el string que almacena el prompt() en un tipo numérico entero.

Por si no recuerdas lo del prompt(), en el capítulo 17 dije:

prompt() devuelve un tipo de dato string aunque le introduzcas un número. Compruébalo con un typeof().

Palabra del lenguaje nº 46 encontrada.
parseInt es una función de alto nivel que devuelve un valor numérico entero a partir de una cadena (string) siempre que sea posible.

Prosigamos con la creación de las funciones de operaciones.

Funciones de suma, resta, multiplicación y división

Estas operaciones son así de sencillas. Aunque estemos utilizando repetidamente numero1 y numero2, recuerda que por el tema del alcance, no son las mismas variables.

function suma(numero1, numero2){
	return numero1 + numero2;
}

function resta(numero1, numero2){
	return numero1 - numero2;
}

function multiplicacion(numero1, numero2){
	return numero1 * numero2;
}

function division(numero1, numero2){
	return numero1 / numero2;
}

Para finalizar, podemos crear un condicional switch que decida según lo introducido en el prompt(), llamar a una función u otra con los números obtenidos en las variables operando1 y operando2.

En este switch ponemos la condición de la variable operacion. Esto va a devolver el valor del 1 al 4 introducido por el usuario. Mediante estos números se decide qué case ejecutar. En caso de error (no se ha introducido un valor válido), se ejecuta el bloque default

En cada case almacena en la variable resultado que había declarado al principio la llamada a la función correspondiente con los valores de los operandos, también obtenidos del usuario.

Finalmente, se imprime en el documento el resultado.

switch (operacion){
	case "1":
		resultado = suma(operando1,operando2);
		document.write("El valor de la suma es: " + resultado);
		break;

	case "2":
		resultado = resta(operando1,operando2);
		document.write("El valor de la resta es: " + resultado);
		break;

	case "3":
		resultado = multiplicacion(operando1,operando2);
		document.write("El valor de la multiplicación es: " + resultado);
		break;

	case "4":
		resultado = division(operando1,operando2);
		document.write("El valor de la división es: " + resultado);
		break;

	default:
		alert("La opción especificada no es correcta.");
		break;
}

Evitar que se pidan los operandos en caso de error

Todavía no hemos dado el manejo de errores o excepciones, lo daremos más adelante. Es por este motivo, que te voy a enseñar a solucionar el pequeño "fallo" que tiene la calculadora con un condicional if, el cual ya sabes utilizar de sobra si has seguido el curso hasta ahora.

Cuando el usuario introduce un valor no válido (no introduce ningún número del 1 al 4), se ejecuta el bloque default, pero antes, se le piden los dos operandos, algo que aunque no rompe el programa, no tiene ningún sentido.

En este caso, debemos meter los prompt() de los operandos en el if.

//Declaración de variables.
let operacion = prompt("¿Qué operación desea? 1-Sumar 2-Restar 3-Multiplicar 4-Dividir.");
let operando1;
let operando2;
let resultado;

//Impedir que pida los operandos en caso de error.
if (operacion >= 1 && operacion <= 4) {
	operando1 = parseInt(prompt("Introduce el primer número:"));
	operando2 = parseInt(prompt("Introduce el segundo número:"));
}

Esto es todo. En el vídeo puedes ver como pruebo todo esto.

Aún estamos en el curso básico, más adelante utilizaremos y mejoraremos este código para crear una calculadora algo más sofisticada y que funcione con interfaz gráfica en el navegador con botones, algo mucho más interesante.
Lo bueno, es que ahora, ya sabes como hacer el cerebro de una calculadora con JavaScript.