Soy bastante nuevo en Javascript y tengo una pregunta de principiante con respecto a la declaración y el acceso a las variables. ¿Por qué console.log me muestra que el contenido de texto de "texto" se ha cambiado cuando no es así? Puedo hacer que la función funcione si, en lugar de declarar "texto" FUERA de la función, lo declaro dentro, luego el cambio de contenido de texto real
let text = document.querySelector("#text").textContent function changeText() { text = "Goodbye" } changeText() console.log(text) <p id="text">Hi</p>Esta asignación:
let text = document.querySelector("#text").textContent almacena una copia del valor de document.querySelector("#text").textContent en text . No hay una conexión explícita o implícita entre text y document.querySelector("#text").textContent . Sabes que tienes dos lugares que contienen el mismo valor.
Luego procede a actualizar uno de los lugares para que contenga un valor diferente:
text = "Goodbye"Esto no tiene ningún efecto en el otro lugar en absoluto.
Esto tampoco es específico del DOM. Ese es el caso de las variables y/o propiedades en general. Aquí hay algunos ejemplos más:
var a = 1; var b = a; a = 2; console.log('a:', a, 'b:', b); b = 3; console.log('a:', a, 'b:', b); var a = {content: 1}; var b = a.content; a.content = 2; console.log('a:', a, 'b:', b); b = 3; console.log('a:', a, 'b:', b);El término técnico para esto espasar por valor : si asigna/pasa una ubicación de memoria A (variable, propiedad, etc.) a la ubicación de memoria B , entonces a B se le asigna una copia del valor de A , no una referencia o puntero a A.
Consulte también ¿JavaScript es un lenguaje de paso por referencia o de paso por valor?
Cuando inicializa su variable de text en la parte superior, está configurando su valor en "Hola" (porque ese es el contenido de texto de su elemento), pero es una copia del valor, completamente independiente del elemento DOM. Cambiar uno no tiene efecto en el otro.
Entonces, cuando lo actualice (a través de text = “Goodbye” ), solo está cambiando el valor de la variable, no el elemento DOM.