¿Cómo tener una referencia dinámica de una variable en JavaScript como en C++?

31289

Si has programado alguna vez en C++, sabrás que en este lenguaje existe algo llamado punteros, que básicamente son variables que guardan la referencia en memoria de otra variable. Ya sé, suena complicado, pero es más fácil de lo que crees.

Imagina que tienes a una persona:

let nombre = "Pepito";
let apellido = "Junior";

Y quieres tener el nombre completo de esta persona:

let nombreCompleto = nombre + " " + apellido;

Ahora, de repente a tu persona se le ocurrió ir a cambiarse de nombre a Juan porque dice que Pepito suena a nombre de meme (y lleva razón):

nombre = "Juan";

Ahora queremos ver como sonaría el nombre completo de nuestra nueva persona:

console.log(nombreCompleto);
// output -> Pepito Junior

Pero nos topamos con la sorpresa de que nombreCompleto sigue siendo “Pepito Junior”. ¿Por qué no cambio a “Juan Junior”? La respuesta es fácil, JavaScript ya ha guardado en memoria el valor de la variable nombreCompleto con los valores que tenía en el momento en el que inicializamos esta variable (en let nombreCompleto = nombre + " " + apellido;). Sin embargo, ¿qué pasa si queremos que JavaScript siempre tenga la referencia del nombre **de nuestra personita para este tipo de casos como problemas de identidad? En otras palabras, ¿cómo hacemos para que cuando Pepito quiera cambiarse de nombre a Juan entonces nombreCompleto cambie automáticamente?

La respuesta rápida es que en JavaScript no se puede hacer eso 😥, porque JavaScript es un lenguaje de alto nivel que utiliza un modelo de memoria gestionada automáticamente. A diferencia de C++ y otros lenguajes de bajo nivel, no podemos acceder directamente a la memoria, por lo que no podemos obtener una referencia permanente para mantenerla actualizada cuando cambie de valor.

Sin embargo, no todo está perdido. Investigué (y sí, lo admito, en mi investigación tuvo algo que ver mi mejor amigo ChatGPT) y encontré dos formas en las que podemos “emular” este comportamiento:

1. Con funciones:

La forma es intentarlo con funciones. Como sabemos, las funciones permiten encapsular un bloque de código para volverlo a utilizar. Así que, podríamos intentar encapsular ese bloque de código en una función para que se obtenga nuevamente la referencia de las variables nombre y apellido con su nuevo valor.

Primero, creamos la función:

functionobtenerNombreCompleto() {
  return nombre + " " + apellido;
}

Ahora, para usarla, simplemente llamamos a esta función cada vez que cambiemos la variable nombre:

nombre = "Juan";
let nombreCompleto = obtenerNombreCompleto();

Sé lo que estás pensando: no estamos automatizando completamente ese cambio. Aunque hemos simplificado un poco el proceso, realmente es más de lo mismo pero con menos líneas de código. Y bueno, en parte tienes razón, pero al menos volvemos un poco menos manual este cambio. Ahora sí voy con la que hace que se vuelva completamente automático:

2. Con objetos:

Creo que los dos sabíamos que la solución estaría en los objetos, pero, ¿como lo logramos?

Bueno, la respuesta es con algo llamado getters, que básicamente son funciones especiales que nos ayudan a obtener o “recuperar” el valor de una propiedad de un objeto. Utilizaremos este recurso para hacer que nos dé el nombre completo automáticamente cambiado para no tener que hacer este trabajo manualmente. Pero primero, convirtamos a nuestra personita en un objeto:

let persona = {
	nombre: "Pepito",
	apellido: "Junior"
};

Ahora creemos el getter para obtener el nombre completo de nuesta personita:

get nombreCompleto() {
	returnthis.nombre + " " + this.apellido;
}

Ya sé, ya sé, ¿Qué es eso de get?, y ¿Eso de this?, Bueno, la primera, simplemente hay que aceptarlo como sintaxis para definir un getter. Y la segunda, bueno, esta es un poco más complicada, pero para no darle muchas vueltas, por ahora solo míralo como que le estamos diciendo a nuestro código que nos estamos refiriendo a la propiedad de este objeto. Es decir, estamos indicando que nos referimos a las propiedades de este objeto en particular, usando this para evitar confusiones con otras variables que podrían existir en otro contexto.

Ahora agreguemos el getter a nuestra personita:

let persona = {
	nombre: "Pepito",
	apellido: "Junior"
	get nombreCompleto() {
		returnthis.nombre + " " + this.apellido;
	}
};

Ahora que hemos convertido a nuestra personita en un objeto, podemos probar con el cambio de nombre de Pepito a Juan nuevamente:

persona.nombre = "Juan";
console.log(persona.nombreCompleto);
// output -> Juan Junior

Quizás ya te diste cuenta de que no necesitamos llamar a persona.nombrecompleto con paréntesis. Esto se debe a que no es una función normal, sino una función especial que se llama en el código como si fuera una propiedad. Sé que esto puede resultar un poco confuso, ya que al declarar el getter en nuestro objeto lo hacemos entre paréntesis y llaves, lo que normalmente indicaría una función y su posterior llamada. Sin embargo, para evitar confusiones, simplemente debes recordar que cuando veas la palabra clave get antes de la declaración de una función en un objeto, estás frente a un getter que se llama en el código como una propiedad.

Ahora ya sabes como mantener una referencia de una variable en JavaScript de manera similar a como se hace en C++.

Ahora tú puedes crear tu propio carro, definir un getter que obtenga toda la información de este nuevo carro, y luego cambiarle la placa para ver si el getter también se actualiza, No sé, prueba, rompe código, y comprueba si todo lo que te estoy diciendo es cierto o me lo he inventado todo.

Nos vemos pronto.

hace 2 años