Código JS calculadora

La primera línea del código JavaScript es la declaración de una variable llamada displayValue:

				
					let displayValue = '';

let: let es una palabra clave de JavaScript que se utiliza para declarar una variable. En este caso, estamos declarando una variable llamada displayValue.
displayValue: Este es el nombre de la variable que estamos declarando. En JavaScript, los nombres de variables pueden consistir en letras, dígitos, guiones bajos y signos de dólar, pero no pueden comenzar con un dígito.
=: El signo de igual (=) se utiliza para asignar un valor a la variable. En este caso, estamos asignando un valor inicial a displayValue.
'': Entre los dos símbolos de comillas simples, hay una cadena vacía (''). Esto significa que estamos inicializando displayValue con una cadena vacía. En JavaScript, una cadena vacía representa una cadena sin ningún carácter.
Esta variable se utilizará para almacenar el valor mostrado en el campo de entrada de la calculadora y se actualizará a medida que el usuario interactúe con los botones de la calculadora.

				
					function appendToDisplay(value) {
    displayValue += value;
    document.querySelector('.display').value = displayValue;
}

Función appendToDisplay(value)👉 Esta función recibe un parámetro value, que representa el valor que se desea agregar a la pantalla de la calculadora.
Es como si estuvieras escribiendo en la pantalla de la calculadora cada vez que presionas un botón. Por ejemplo, si presionas el botón ‘5’, luego el botón ‘+’ y luego el botón ‘3’, la pantalla mostrará ‘5+3’.

La función concatena este valor al final de la variable displayValue y luego actualiza el valor del elemento con clase display en el documento HTML con el contenido de displayValue.

👉 El nombre de la función refleja de manera clara y concisa lo que hace: toma un valor como entrada y lo agrega al contenido actual de la pantalla de la calculadora. Entonces, cuando ves el nombre de la función, puedes entender fácilmente qué hace sin necesidad de profundizar demasiado en su código interno.

Es una práctica común en programación dar nombres descriptivos a las funciones para facilitar su comprensión y mantenimiento.

				
					function clearDisplay() {
    displayValue = '';
    document.querySelector('.display').value = displayValue;
}

Función clearDisplay()👉 Esta función se encarga de restablecer el contenido de displayValue a una cadena vacía, lo que borra el contenido de la pantalla de la calculadora. Luego, actualiza el valor del elemento con clase display en el documento HTML para reflejar el cambio.

				
					function calculate() {
    try {
        displayValue = eval(displayValue);
        document.querySelector('.display').value = displayValue;
    } catch (error) {
        displayValue = 'Error';
        document.querySelector('.display').value = displayValue;
    }
}

Función calculate() 👉Esta función se utiliza para calcular el resultado de la expresión matemática almacenada en displayValue.
Utiliza el método eval() para evaluar la expresión y asigna el resultado nuevamente a displayValue.
Si ocurre algún error durante la evaluación de la expresión, captura el error con un bloque try...catch, asigna la cadena 'Error' a displayValue y actualiza el valor del elemento con clase display en el documento HTML con el mensaje de error.

Resumen:

Este código define funciones para agregar valores a la pantalla de la calculadora (appendToDisplay), borrar el contenido de la pantalla (clearDisplay) y calcular el resultado de la expresión matemática en la pantalla (calculate).

Ver calculadora