Estoy trabajando en un proyecto de calculadora frontal pero realmente no entiendo un comportamiento extraño en Javascript. Este es mi guion:
const keys = document.querySelectorAll(".number"); const screen = document.querySelector("#screen"); let number = screen.value; keys.forEach((key) => { key.addEventListener("click", (event) => { let refresh = (number += key.textContent).toString(); console.log(number); screen.value = refresh; }); });Alguien me puede decir por qué si cambio esta línea
screen.value = refresh;Con este
number = refresh;mi valor en pantalla no se actualiza a pesar de que en mi consola se esta actualizando? ¿No son estos dos nombres diferentes para llamar a la misma cosa?
Gracias
Esto se debe a que a las variables de cadena se les asigna un valor en lugar de una referencia. Esto significa que cuando llamas a let number = screen.value , solo establece el number en el valor que screen.value tiene en ese momento. Pero si cambias uno de ellos, el otro permanece igual.
Esto es cierto para tipos primitivos como números, cadenas y booleanos. Los objetos y las variables de matriz tienen referencias asignadas, lo que significa que cambiar el objeto a través de una variable se reflejará en todas las demás variables que apuntan al mismo objeto.
Esto se debe a que está utilizando esta línea:
console.log(number);Entonces, primero imprimirá la variable 'número' y luego actualizará el valor de esta variable, entonces este es el problema
si quieres resolver esto tienes que invertir el orden de las líneas algo como esto:
screen.value = refresh; console.log(number);Espero haber ayudado ;)