6

Estoy aprendiendo la sintaxis básica de clases en Javascript y me ha surgido una duda importante. Usando el constructor pretendo crear y darle valor a la propiedad this.name, mientras que usando los getters y setters pretendo obtener y modificar this._name suponiendo que _name es una propiedad 'interna' del objeto y por lo tanto no debería poder modificarse sin el uso del set. Lo que no logro comprender es lo siguiente:

"use strict";

class Admin {
    constructor(name) {
        this.name = name;
    };

    get name() {
        return this._name;
    };

    set name(value) {
        if (value.length < 4) {
            console.log('Nombre demasiado corto!');
            return;
        };
        this._name = value
    };
};

let admin = new Admin('Julio');

//Por qué _name === name si todavía no he ejecutado el set?
//_name no debería existir, debería ser undefined

console.log(admin._name);
console.log(admin.name);
console.log(admin);

admin.name = 'Roberto';

//Por qué _name === name si el set no afecta a name, sino a _name?
//admin.name debería ser 'Julio' y admin.name 'Roberto'

console.log(admin._name);
console.log(admin.name);
console.log(admin);

//otra duda que tengo es porqué al mandar admin a consola, se muestra _name pero no name dentro del objeto

Como pueden ver, mi principal duda es con respecto al set y el constructor, quienes agregan _name aunque yo no haya ejecutado el set.

3 respuestas 3

3

Vamos a analizar las asignaciones paso a paso y cómo se recorren dentro de la función y el porque:

Después de definir la función ejecutas esto:

let admin = new Admin('Julio');

Lo cual primero pasa por el constructor:

class Admin {
    constructor(name) {
        this.name = name;
    };

Hasta ahí todo correcto, si la clase no tuviera más métodos podriamos acceder a la propiedad de la clase mediante:

console.log(admin.name)

Pero ocurre que tenemos otro método que afecta a lo que acaba de suceder, que es el set, que pones a más abajo:

    set name(value) {
        if (value.length < 4) {
            console.log('Nombre demasiado corto!');
            return;
        };
        this._name = value
    };

¿Y porqué afecta? Pues si nos vamos a este enlace, verás que dicen lo siguiente:

La sintaxis set asocia la propiedad de un objeto a una función que será llamada cuando haya un intento de asignar valor a esa propiedad.

Quedémonos con esta frase: una función que será llamada cuando haya un intento de asignar valor a esa propiedad.

Es decir, el set actua también porque ¿dentro del constructor que hemos hecho? Pues eso, hemos intentado asignar valor a esa propiedad name mediante el this.name = name, lo cual ha disparado la función set.

¿Y que hace set? Pues al final de la función realiza esto:

        this._name = value

Es decir, acaba de crear una nueva propiedad _name con el mismo valor de la asignación que hemos visto en el contructor, porque lo que vemos en el paréntesis como parámetro value viene a ser equivalente a lo asignado mediante this.name=, es decir, el parámetro name del constructor.

Hasta aquí la primera pregunta: ¿Por qué _name === name si todavía no he ejecutado el set? y la respuesta corta seria: Sí, has ejecutado el set al asignarle un valor a la propiedad name en el constructor.

Ahora vamos con la segunda pregunta: ¿Por qué _name === name si el set no afecta a name, sino a _name?

Bueno, si repasas el código que has puesto de ejemplo al asignar Roberto, verás tu confusión. Fíjate bien en la línea de la asignación:

admin.name = 'Roberto';

Así, a salto de mata, sin pensar que hay una clase detrás, ¿que ves? Yo veo una asignación a la propiedad name de un objeto denominado admin. Luego resulta que es una instancia de una clase, vale, pues entonces deduzco que viene a ser lo mismo pero para una instancia de clase, es decir, una asignación a la propiedad name de una instancia de clase representada por el objeto admin. Del mismo modo que antes, sin saber que más hace la clase, ni si tiene setters y getters, si ahora hicieramos esto:

console.log(admin.name)

nos devolveria Roberto. Pero resulta que sí que tiene un set name establecido, por lo tanto tiene que ejecutarse por la misma definición dada antes:

La sintaxis set asocia la propiedad de un objeto a una función que será llamada cuando haya un intento de asignar valor a esa propiedad.

Y voilà, vuelve a suceder exactamente lo mismo que he explicado antes, y se le asigna el valor a _name establecido a name, pues así lo dice el set al final:

        this._name = value

Y así queda respondida también tu segunda duda: ¿Por qué _name === name si el set no afecta a name, sino a _name? , que brevemente la respuesta seria: ¡Tienes razón! El set no afecta a name, pero es que es admin.name= quien afecta al set name y lo dispara causando esta segunda equivalencia de valores entre name y _name.

No se si ahora lo ves o no, yo lo he puesto como lo entiendo y me cuadra :-)

Ya nos diras si ahora tu también compartes este planteamiento.

4
  • Vale, entiendo casi todo, me queda solo una duda. la asignación this.name = name dentro del constructor hace que se ejecute el set de name(), correcto? dentro del set se hace la asignación de this._name = value, por lo que suponiendo que value = 'Julio' entonces this._name === 'Julio'; Ahora, el set, como ya lo citaste, es una función que será llamada cuando haya un intento de asignar valor a esa propiedad. Al terminar de ejecutar el set, no retorna nada, por lo que: ¿No se supone que this.name debería ser igual a undefined? o sea this.name === undefined, ya que set name() no retorna nada. el 3 feb. 2022 a las 18:40
  • 1
    Dos preguntas, dos respuestas: 1ra) Sí, es correcto, la respuesta breve a todo lo que planteas es El set name(value) se ejecuta automáticamente al asignar un valor a la propiedad name, sea como sea, desde dentro o desde fuera de la clase. Y 2da) Si se ejecuta el set name(value) es porque hay alguna asignación a la propiedad name en alguna parte, por lo tanto se va a producir la asignacion previa al set name(value) y luego lo que contenga ese método set. Ahora, si le pasas un value de undefined entiendo que se quedará con el ¿Se me entiende así?
    – masterguru
    el 3 feb. 2022 a las 18:50
  • 1
    @AndrésArrieche Y eso que dices que no retorna nada es normal, pues queda asignado en la instancia de la clase en el objeto admin que has establecido, aunque si quieres que retorne algo tan solo debes ponerle un return loquequierasretornar al final de la función, pero no tendria demasiado sentido en este contexto. (Te aconsejo que no me leas literalmente ni analices mis palabras una a una, pues me puedo equivocar en las expresiones y hacerte un lio con ellas. Intenta más bien pillar la idea y conceptos de lo que digo y abstraerlo todo para que tenga lógica para ti)
    – masterguru
    el 3 feb. 2022 a las 18:56
  • 1
    @AndrésArrieche Digo esto de las expresiones literales porque los comentarios a veces son escritos demasiado rápido y puedo equivocarme, y una vez pasados 5 minutos ya no podré repasarlos más y pueden quedar mal descritos para siempre a pesar que haya visto los errores (pues no podré modificarlos, solo borrarlos pero se perderia contexto y el hilo de lo que vamos diciendo)
    – masterguru
    el 3 feb. 2022 a las 19:04
1

Simplemente, para saber por qué hace referencia a _name, hay que entender para qué se utiliza la barrabaja ( _ ) en JavaScript:

El signo dólar ($) y barrabaja (_) son identificadores JavaScript, lo cual significa que identifican un objeto de la misma forma que haría un nombre. Los objetos que identifica incluyen variables, funciones, propiedades, eventos y objetos. La barrabaja es utilizada normalmente en programación para hacer referencia a métodos y variables privados.

Por tanto, significa que no deberías usar estos métodos (que empiezan por "_") fuera de tu objeto. Técnicamente puedes, pero " _ " significa que no deberías. Hará referencia a la variable, función, método, etc. que tenga el mismo nombre con el que lo creaste.

3
  • 1
    Entiendo que no es recomendable usar propiedades 'privadas'(con barrabaja) fuera del objeto. Pero la cuestión es que, según lo que entiendo, _name y name deberían tener contenidos distintos, cosa que no sucede el 3 feb. 2022 a las 16:52
  • Claro, deberian tener contenidos distintos si se hiciera referencia a algo fuera del objeto; al llamar al objeto desde fuera con los console.log(admin.name) y console.log(admin._name), el valor que envías al objeto es el mismo (Entiende como si le enviaras 2 veces admin.name), y entiende que haces referencia a lo mismo, por eso el console.log te devuelve el mismo nombre el 3 feb. 2022 a las 16:59
  • No creo que ses sea el caso, porque probé lo siguiente: let obj = {}; obj.name = 'Francisco'; obj._name = 'Bernardo'; console.log(obj.name); console.log(obj._name); Y me muestran Francisco y Bernardo respectivamente el 3 feb. 2022 a las 17:24
1

La respuesta @DarklceDust no esta mal, pero no es la razon por la que tu codigo se comporta de esta manera. Tu getter y setter se llaman igual que tu propiedad: name. De alguna manera javascript (tratare de buscar alguna fuente/documentacion donde respalde esto) crea una propiedad _name esto para evitar una recursion infinita.

Al tener esto:

class Admin {
    constructor(name) {
        this.name = name;
    };

    get name() {
        return this.name;
    };

    set name(value) {
        if (value.length < 4) {
            console.log('Nombre demasiado corto!');
            return;
        };
        this.name = value
    };
};

const admin = new Admin('Julio')

Si hace esto: admin.name estaria llamando al getter name que a su vez ejecuta return this.name esto estaria llamando al mismo getter otra vez y asi hasta el infinito. Algunos IDE's o editores de texto como vscode arrojan un error al tener el codigo como en el ejemplo de arriba. La convencion es que en el metodo get y set uses la barra baja para referirte a la propiedad y no al metodo get o set.

class Admin {
    constructor(name) {
        this.name = name;
    };

    get name() {
        return this._name;
    };

    set name(value) {
        if (value.length < 4) {
            console.log('Nombre demasiado corto!');
            return;
        };
        this._name = value
    };
};

const admin = new Admin('Julio')

// imprime 'Julio'
// se ejecuta el metodo get que se llama 'name'
console.log(admin.name)

// Imporime 'Julio'
// JS crea esta propiedad al crear la instancia
console.log(admin._name)

De hecho a lo metodos get y set los puedes nombrar diferente a la propiedad y asi evitar la barra baja:

class Admin {
    constructor(name) {
        this.name = name;
    };

    get otraCosa() {
        return this.name;
    };

    set otraCosa(value) {
        if (value.length < 4) {
            console.log('Nombre demasiado corto!');
            return;
        };
        this.name = value
    };
};

const admin = new Admin('Julio')

// Imprime 'Julio'
// ya que el metodo get se llama 'otraCosa' y este
// retorna el valor de 'name'
cosole.log(admin.otraCosa) 

// Imprime 'Julio'
// ya que la propiedad asi se llama
console.log(admin.name)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.