No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

No se trata de lo que quieres comprar, sino de quién quieres ser. Invierte en tu educación con el precio especial

Antes: $249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

12 Días
7 Hrs
59 Min
16 Seg

Getters y setters

14/20
Recursos
  • La sintaxis get vincula la propiedad de un objeto con una función que se llamará cuando se busque esa propiedad. [1]
  • La sintaxis set vincula la propiedad de un objeto con una función que se llamará cuando se intente hacer una asignación a esa propiedad. [2]

Cómo funciona Get y Set en JavaScript

Los métodos readName y changeName creados anteriormente serán reemplazados por getters y setters:

  1. Eliminamos o comentamos las funciones readName y changeName, además de las encapsulaciones de estos métodos que hicimos con Object.defineProperty:

    function isObject(subject) {
      return typeof subject == "object";
    }
    
    function isArray(subject) {
      return Array.isArray(subject);
    }
    
    function requiredParam(param) {
      throw new Error(param + " es obligatorio");
    }
    
    function createStudent({
      name = requiredParam("name"),
      email = requiredParam("email"),
      age,
      twitter,
      instagram,
      facebook,
      approvedCourses = [],
      learningPaths = [],
    } = {}) {
      const privateAtributos = {
        "_name": name,
      };
    
      const publicAtributos = {
        email,
        age,
        approvedCourses,
        learningPaths,
        socialMedia: {
          twitter,
          instagram,
          facebook,
        },
        // readName() { 👈👈
        //   return privateAtributos["_name"];
        // },
        // changeName(newName) { 👈👈
        //   privateAtributos["_name"] = newName;
        // },
      };
    
      // Object.defineProperty(publicAtributos, "readName", { 👈👈
      //   writable: false,
      //   configurable: false,
      // });
      // Object.defineProperty(publicAtributos, "changeName", { 👈👈
      //   writable: false,
      //   configurable: false,
      // });
    
      return publicAtributos;
    }
    
  2. Definimos el getter con el cual obtendremos el atributo “privado” name

    function isObject(subject) {
      return typeof subject == "object";
    }
    
    function isArray(subject) {
      return Array.isArray(subject);
    }
    
    function requiredParam(param) {
      throw new Error(param + " es obligatorio");
    }
    
    function createStudent({
      name = requiredParam("name"),
      email = requiredParam("email"),
      age,
      twitter,
      instagram,
      facebook,
      approvedCourses = [],
      learningPaths = [],
    } = {}) {
      const privateAtributos = {
        "_name": name,
      };
    
      const publicAtributos = {
        email,
        age,
        approvedCourses,
        learningPaths,
        socialMedia: {
          twitter,
          instagram,
          facebook,
        },
    		get name() { // 👈👈
          return privateAtributos["_name"];
        },
      };
    
      return publicAtributos;
    }
    
  3. Definimos setter con el cual podremos asignar valores a nuestro atributo ”privado” name:

    function isObject(subject) {
      return typeof subject == "object";
    }
    
    function isArray(subject) {
      return Array.isArray(subject);
    }
    
    function requiredParam(param) {
      throw new Error(param + " es obligatorio");
    }
    
    function createStudent({
      name = requiredParam("name"),
      email = requiredParam("email"),
      age,
      twitter,
      instagram,
      facebook,
      approvedCourses = [],
      learningPaths = [],
    } = {}) {
      const privateAtributos = {
        "_name": name,
      };
    
      const publicAtributos = {
        email,
        age,
        approvedCourses,
        learningPaths,
        socialMedia: {
          twitter,
          instagram,
          facebook,
        },
    		get name() {
          return privateAtributos["_name"];
        },
    		set name(newName) { // 👈👈
    			privateAtributos["_name"] = newName;
        }
      };
    
      return publicAtributos;
    }
    
  4. Agreguemos una pequeña validación para garantizar que al menos la asignación a name sea de al menos una letra y no sea un string vacío.

    function isObject(subject) {
      return typeof subject == "object";
    }
    
    function isArray(subject) {
      return Array.isArray(subject);
    }
    
    function requiredParam(param) {
      throw new Error(param + " es obligatorio");
    }
    
    function createStudent({
      name = requiredParam("name"),
      email = requiredParam("email"),
      age,
      twitter,
      instagram,
      facebook,
      approvedCourses = [],
      learningPaths = [],
    } = {}) {
      const privateAtributos = {
        "_name": name,
      };
    
      const publicAtributos = {
        email,
        age,
        approvedCourses,
        learningPaths,
        socialMedia: {
          twitter,
          instagram,
          facebook,
        },
    		get name() {
          return privateAtributos["_name"];
        },
    		set name(newName) {
          if (newName.length != 0) { // 👈👈
            privateAtributos["_name"] = newName;
          } else {
            console.warn("Tu nombre debe tener al menos 1 caracter");
          }
        },
      };
    
      return publicAtributos;
    }
    

¡Listo! Ya podemos crear objetos y utilizar los getters y setters respectivos del atributo name:

const juan = createStudent({ email: "[email protected]", name: "Juanito" });

console.log(juan.name); // Se ejecuta el GETTER
juan.name = "Rigoberto"; // Se ejecuta el SETTER
console.log(juan.name);

Apliquemos Object.getOwnPropertyDescriptors sobre nuestro objeto juan para visualizar la accesibilidad de sus atributos: el atributo name no tendrá las propiedades value y wriable como tal, en vez de eso nos aparecerán las funciones get y set. Observemos esto en la consola del navegador:

Object.getOwnPropertyDescriptors(juan);
El atributo name no posee la propiedad value y writable como tal, sino que tiene a los métodos get y set en su lugar

Vamos a aprender ahora a identificar objetos. Primero, conozcamos acerca del Duck Typing. 🤔👨‍💻

Fuentes:

[1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set

[2] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set

Contribución creada por: Martín Álvarez (Platzi Contributor) con el aporte de Andrés Felipe Eslava Zuluaga.

Aportes 17

Preguntas 9

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Respondiendo la pregunta del profe 😂 Según la RAE, caracter no existe, solo existe carácter, y hace referencia a varias definiciones, entre ellas, “Signo de escritura”:

Lo cual es raro porque la mayoría de personas lo pronuncian con acento en la e (incluyéndome), y carácter (para mí) hace referencia al conjunto de cualidades que definen la forma de ser de un ser vivo… Pero, para la RAE, ambas cosas se desprenden de la misma palabra, carácter.

Los Getters y setters son métodos de acceso, lo que significa que generalmente son una interfaz publica para cambiar miembros de las clases privadas.

Getters y setters

get name() {
  return private["_name"];
},
set name(newName) {
  newName.length !==0 ? private["_name"] = newName : console.warn("Name can't be empty");
}

GETTERS Y SETTERS

Utilizamos el método estático del prototipo object getOwnPropertyDescriptor().
Una función obtiene un valor de una propiedad se le llama getter y una que setea(establece) un valor de una propiedad se le llama setter
Para crearlos simplemente necesitan los keywords get y set


const obj = {
    get prop(){
        return this.__prop__;
    },
    set prop() {
        this.__prop__ = value * 2 ;
    },
};
obj.prop = 12;

console.log(obj.prop); // 24

Se crea un objeto, con una única propiedad, tiene un getter y un setter. De esta manera cada vz que le establezcamos un alor a la propiedad, el valor se multiplicará por 2.

se puede crear un accessor properties es e manera explćita usando Object.defineProperty()

Object.defineProperty(obj,//objeto target
'prop', //nombre de la propiedad)
 {
    enumerable:true,
    configurable:true,
    get prop(){
        return this.__prop__;
    },
    set prop(value){
        this.__prop__ = value * 2;
    },
};

obj.prop = 12;
var atr = Object.getOwnProperyDescriptor(obj,'prop');
console.log(atr); // {value: 24, writable: true, enumerable: true, configurable: true}

Hay una forma más simple de hacer lo visto en la clase anterior y es usar getters y setters:

  • cambiamos ‘readName’ por
get name(){
	return private._name
}
  • cambiamos ‘changeName’ por
set name(anotherName){
	if(true){ //acá validamos
		private._name = anotherName
	}
}

Las ventajas son:

  • Código reducido y más limpio
  • Permiten hacer validaciones (al contrario de crear un atributo “name”)
  • No creamos una propiedad ‘name’ por error (en vez de cambiar _name)

No hace falta que protejamos los getters y setters, la única forma de redefinir “name” es con Object.defineProperty. Esto elimina las funciones y crea un nuevo atributo name, que aunque no afecta a _name hace imposible acceder a él.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set
La sintaxis get vincula una propiedad de objeto a una función que se llamará cuando se busque esa propiedad.
·
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get
La sintaxis set vincula una propiedad de objeto a una función que se llamará cuando se intente establecer esa propiedad.

Usamos getters y setters para validar también que el cambio de nombre no tenga alguna palabra indebida.

    const blackList = ["nombreProhibido", "nombreProhibido1", "nombreProhibido2"]

    const public = {
        get name(){
            return private._name;
        },
        set name(newName){
	// validamos que el nombre tenga minimo 2 caracteres y no incluya alguna frase prohibida
            if (newName.length <= 1 || blackList.includes(newName)){
                console.warn("No puedes colocar este nombre, intenta otro");
            } else {
                private._name = newName;
            }
        }

Para usar el acento en la ‘a’ ponemos: ‘\u00E1’ dentro de la cadena que vamos a imprimir en pantalla.

Que clase de magia oscura es esta :v … Es broma, excelente eso de Getters y Setters

Primera cosa que me gusta de JS contra otros lenguajes que si realmente parecen orientados a objetos

![](https://static.platzi.com/media/user_upload/get-89f91e8a-66df-4c2f-bffa-9ded756fc671.jpg)

Aaah por fin entendí el porque usamos esta sintaxis y es justamente para ver como funciona por dentro javascript cuando usamos la sintaxis de CLASS

Mi resumen:

// ### Uso de get y set

function createStudent4({
    name,
    age
} = {}) {
    const privateAttributes = {
        "_name" : name,
    }
    const publicAttributes = {
        age,
        get name() { //en vez de los métodos readName y changeName
            return privateAttributes["_name"];
        },
        set name(newName) {
            if (newName.length != 0) { // 👈👈
                privateAttributes["_name"] = newName;
            } else {
                console.warn("Tu nombre debe tener al menos 1 caracter");
            }
        },
    }
    return publicAttributes;
}

const efrain = createStudent4({name : "efrain",age : 20});

console.log(efrain.name); // Se ejecuta el GETTER
efrain.name = "Rigoberto"; // Se ejecuta el SETTER
console.log(efrain.name);

//Si se usa Object.defineProperty si se podrá modificar el nombre

Object.defineProperty(efrain,"name",{
    value:"LOL"
})

console.log(efrain.name); //LOL

En mi caso escribi un array de nombres no permitidos y valide que newName no fuera ninguno de estos, asi:

get name() {
	return private['_name']
},
set name(newName){
	if(!noAcceptNames.some(item => item == newName)){
	private['_name'] = newName;
} 

A mi si me daría pero gracia llamarme ‘Jota’ jaja

Los métodos que permiten acceder al valor de un atributo se denominan “getters” (del verbo inglés “get”, obtener) y los que fijan el valor de un atributo se denominan “setters” (del verbo inglés “set”, fijar).

Configurando el set name para que no pueda recibir un nombre vacío y tampoco acepte espacios en el nombre:

set _name(newName){
            newName.length == 0 ? console.warn('Tu nombre debe contener algún carácter') : newName.split(' ').length > 1 ? console.warn('Tu nombre no puede tener espacios') : private._name = newName;
        }