Getters y setters

apuntes de la clase:

Me parece que aunque se aborda la funcionalidad de los getters y setters, en el contexto en el cual se explica, no facilita su comprensión. Este seria un resumen:

Getters

let person = {
  name:'Miguel',
  last_name:'Soler',
  age:28,
  languages:['js','css','react'],
  get skills(){
    return this.languages
  }
}

console.log(person.skills)

En este caso estoy retornando el valor de languages atraves de un getter llamado skills, pero para ver mejor su uso, mira este ejemplo:

let person = {
  name:'Miguel',
  last_name:'Soler',
  age:28,
  languages:['js','css','react'],
  get fullName(){
    return `${this.name} ${this.last_name}`
  }
}

console.log(person.fullName)

En este caso estoy retornando el nombre completo (fullName), como una propiedad del objeto person. El fullName también lo podría traer a través de un método de la siguiente forma:

let person = {
  name:'Miguel',
  last_name:'Soler',
  age:28,
  languages:['js','css','react'],
  fullName: function (){
    return `${this.name} ${this.last_name}`
  }
}

console.log(person.fullName())

Sin embargo, a traves del getter la semantica es mucho màs transparente y mantiene mejor la integridad de la data.

Setter

let person = {
  name:'Miguel',
  last_name:'Soler',
  age:28,
  languages:[],
  set skills(skills){
    this.languages = skills
  }
}

person.skills = ['ruby','rails','nodejs']

console.log(person.languages)

En suma los getters y setters nos permiten tener el control sobre las propiedades que podemos almacenar o recuperar

No me gusto mucho la explicacion de getters y setters. Me parecio corta y creo que no se dio a entender el uso real de estas funciones

Encontré esto por la red y entendí la importancia de este tema

let persona = {
  nombre: 'Yeison',
  apellido: 'Daza',
  get nombreCompleto() {
    return `${nombre} ${apellido}`
  },
  set nombreCompleto(nom) {
    const palabras = nom.split(' ');
    this.nombre = palabras[0] || '';
    this.apellido = palabras[1] || '';
  }
}

persona.nombreCompleto = 'Camilo Sanchez'

console.log(persona.nombre); //camilo
console.log(persona.apellido); //sanchez

Compañeros les recomiendo ver este vídeo con la explicación del los getters y setters antes de realizar el ejercicio del mediaplayer vídeo . Me saco de muchas dudas

Getters y setters

‌

Son funciones que se usan dentro de objetos para tener propiedades virtuales, podemos establecer valores que no existían en las funciones.

‌

Getter

‌

Enlaza la propiedad de un objeto con una función que será llamada cuando la propiedad es buscada.

‌

A veces es deseable permitir acceso a una propiedad que retorna un valor dinámicamente calculado, o si desea mostrar el estado de alguna variable interna sin requerir el uso de llamadas a métodos explícitos. En JavaScript, esto se puede lograr con el uso de un getter (captador). No es posible tener simultáneamente un getter ligado a una propiedad y que dicha propiedad tenga actualmente un valor, aunque es posible usar un getter junto con un setter para crear un tipo de pseudo-propiedad.

var o = {
  get latest () {
    if (this.log.length > 0) {
      return this.log[this.log.length - 1];
    }
    else {
      return null;
    }
  },
  log: []
}

‌

Setter

‌

La sintaxis set enlaza la propiedad de un objeto con una función que será llamada cada vez que se le asigne un valor.

var historial = {
  set actual(mensaje) {
    this.log.push(mensaje);
  },
  log: []
}
historial.actual='mensaje 1';
console.log(historial.log) //['mensaje 1']

historial.actual='mensaje 2';
console.log(historial.log)//['mensaje 1', 'mensaje 2']

‌

En JavaScript, un setter puede ser usado para ejecutar una función para una propiedad especifica que será ejecutada al cambiar el valor. Los setters se suelen usar con getters para crear un tipo de pseudo-propiedad. No es posible tener un setter para una propiedad que tiene un valor real.Promise.race(iterable)

‌

Devuelve una promesa que se cumple o rechaza tan pronto como una de las promesas del iterable se cumple o rechaza, con el valor o razón de esa promesa.

Creo este tema es un poco complicado de entender, pero espero facilitar un poco las cosas con mi explicación. En lugar de pasar el this pasamos un nuevo objeto player = { ... } el cual contiene los métodos que nos interesa pasar, pero, sigue siendo un objeto. Es por eso que perdemos ciertas características que tiene el this. Gracias a los getters y setters, recuperamos parte de esas características, sin utilizar this lo que nos permite (en este caso) saber si el video esta muted y también alterarlo.

básicamente, la ventaja de los getters es que nos permiten modelar la información antes de mostrarla, y que al codificar en vez de acceder a un método del objeto accedamos a un atributo virtual, y el set nos permite validar lo que se agregara la propiedad del objeto antes de asignarlo

En el ejemplo de esta clase dice que se está restringiendo a los plugins de acceder a ciertas funcionalidades pero en realidad les está pasando el objeto media dentro del objeto player, ahí están todas las funcionalidades.

Lo correcto sería crear una variable con el objeto media antes de definir el objeto player, y que el objeto player acceda a esa variable para definir sus métodos y propiedades. Así media queda por fuera del objeto, sería privado, similar a la clase de Clousures.

const media = this.media;
    const player = {
        play: () => media.play(),
        pause: () => media.pause(),
        get paused() {
            return media.paused;
        },
        get muted() {
            return media.muted;
        },
        set muted(state) {
            media.muted = state;
        }
    };

Un ejemplo simple de como funciona getter and setter:

var person = {
  firstName: "John",
  lastName : "Doe",
  language : "",
  get lang() {
    return this.language.toUpperCase();
  },
  set lang(value) {
    this.language = value.toUpperCase();
  }
};
//
person.lang = "en";
//
console.log(person.lang);//EN

Segun la W3Schools: https://www.w3schools.com/js/js_object_accessors.asp

¿Por qué usar getters y setters?

• Da una sintaxis más simple
• Permite una sintaxis igual para propiedades y métodos
• Puede asegurar una mejor calidad de datos
• Es útil para hacer cosas detrás de escena.

Un ejemplo del uso de getters y setters

//Getters se utilizan para generar una propiedad virtual retornando un valor a traves de una funcion
//Setters permiten mutar o iterar las propiedades virtuales modificando propiedades dentro de una funcion

const person = {
    firstName :'Alessandri',
    lastName : 'Fonseca',
    get fullName(){
       return `${this.firstName} ${this.lastName}`
    },
    set fullName(value){
        const parts = value.split(' ')
        this.firstName = parts[0]
        this.lastName = parts[1]
    }
}
person.fullName = 'Jonh Smith'

console.log(person.fullName)```

Para comprender más:
https://yeisondaza.com/entendiendo-getters-y-setters-en-javascript

esta clase no es muy clara
Aquí les dejo un poco sobre la documentación para que la complemente con la clase y la puedan entender mejor
https://www.w3schools.com/js/js_object_accessors.asp

Este ejemplo que plantean aquí en este link me parece bastante bueno para reforzar esta clase y entender un poco mejor los Getters y Setters: JavaScript Getters and Setters

Recomendaciones para aquellos que se les dificulte entender esta clase , apoyándome de recursos de los comentarios de compañeros

1. Leer la descripción debajo del vídeo
2. Leer detalladamente la siguiente imagen -> visión general
3. Leer paso por paso la siguiente Infografia
4. Volver a ver el video

Pensaras que el camino es un poco largo pero si no resolverá un 100% de tus dudas tendrás una visión muy clara de este para proceder a darle una investigación mas amplia

Esta clase no la vi muy acertada para explicar el uso de getters y setters.

En lenguajes fuertemente tipado se comprende más los setters y getters como en JAVA

No entendí nada de esta clase 😦

Pues siendo honesta, quede algo perdida. Tiene códigos actualizados que no hemos hecho en la clase y que si combinas el tuyo con el de esta clase, tienen muchas diferencias. Tratare de estudiar mas el tema. Gracias!!

Para quienes quedaron un poco inconclusos o con dudas de la explicación de los Getters y Setters recomiendo muuucho éste video https://www.youtube.com/watch?v=TEzu31q9MVA 😄

Entendí mas en los aportes de la clase que al profesor, pero es que el profesor explica de una manera que te revuelve, tienes que regresar el video una y otra vez para entender lo que dice, hace falta una actualización al curso

Después de leer documentación, otros videos y rever esta clase, les dejo el código comentado, puede que les ayude:

    // Ejecuta el plugin AutoPlay
    _initPlugins(){
      const player = {
        // this hace referencia a player que es el
        // objeto que ejecuta esta parte del codigo
        play: () => this.play(), 
        pause: () => this.pause(),
        media: this.media, // debe ser definido media, porque se pierde su referencia

        // get permite acceder a la propiedad muted desde fuera
        // en este caso "if (!player.muted)"" accede desde Autoplay.js
        get muted () {
          return this.media.muted;
        },

        // set permite modificar una propiedad desde fuera
        // en este caso  "player.muted = true" desde Autoplay.js
        // donde true es el valor que se le va dar a la propiedad
        set muted(value) {
          this.media.muted = value;
        },
      };
      
      this.plugins.forEach(plugin => {
        plugin.run(player);
      });
    };

Un poco enrredado el ejemplo para entender el concepto

Yo he estado usando los getters en Vuejs que son un poco más complejos y son realmente útiles.

• reducen la complejidad del código.
• evitan escribir propiedades de mas.
• evita escribir funciones innecesarias.

Estos conceptos me quedaron muy poco claros…
Sería mejor usar ejemplos más sencillos y enfocarse solamente en un concepto.

Mis respetos para este profesor… es demasiado crack programando, pero me toma ver cada clase 3 e incluso más veces para poder entender y comprender lo que hace. ¡es una cosa de locos!

Quería dejar un aporte, explicando la utilidad de todo esto con mis propias palabras, capaz a alguien lo ayuda a entender.

Si por ejemplo dentro de nuestro prototipo tenemos una propiedad “nombre” que no queremos que sea accedida a la ligera, en vez de compartir directamente la variable para que hagan lo que quieran con ella, podemos compartir unicamente un getter para que puedan leer ese valor, pero que no puedan acceder a el y modificarlo.

Tambien podemos hacer uso del metodo setter si por ejemplo queremos que si se pueda modificar esa propiedad “nombre” pero no queremos que pongan numeros ya que no tendria sentido para nuestro programa.

Estos métodos en resumen nos permiten proteger nuestras variables y controlar lo que se puede hacer con ellas. Es muy parecido a lo que son las variables privadas dentro de Java.

En el ejemplo del profesor, en vez de enviar todo el media player, envia un objeto con únicamente las propiedades que quiere que los plugin puedan acceder, y utiliza set y get para controlar la propiedad muted.

Importante Si alguien tiene problemas para continuar con las modificaciones que hizo el profesor, una solucion a medias puede ser:

• [ Ir a la seccion de Archivos y Enlaces de esta clase y descargar el proyecto y adaptar el tuyo a este (Yo lo hice asi) ]. Ahora bien, digo solucion a medias porque el archivo “index.js” como “MediaPlayer.js” tienen un pequehno error. Mas abajo la solucion final. Gracias por leer.

No se si alguien se dio cuenta que en el index hay código que no había puesto antes…

Les comparto un poco del problema que tuve con this en esta clase:
.

Estoy tratando de llevar el curso utilizando las sugar syntax Class la cual nos permite tener una sintaxis más acercada a las clases de otros lenguajes. Por supuesto su definición es diferente a la que usa el profesor, pero a mi gusto, hace más sentido de acuerdo a lo que se está tratando de hacer.
.
Un compañero en otro comentario menciona que se le hace poco intuitivo como se comporta this en está clase y comparto su inquietud, ya que no está cumpliendo del todo la definición de “this es quién ejecuta el código”. Escribí el código lo más parecido posible a lo visto en la clase y tuve un bug.

 _initPlugins () {
    const player = {
      playPause: () => this.playPause(),
      media: () => this.media,
      get muted() {
        return this.media.muted
      },
      set muted(value) {
        this.media.muted = value
      }
    }

    this.plugins.forEach(plugin => plugin.run(player))
  }

Al escribirlo así mi video sí se autoreproducia pero con el sonido activado…
.
Me di cuenta que el comportamiento de los setters y getters cambia cuando se usan dentro de una definición de Class(this fuera del setter/getter funciona igual que en la clase). Cómo resultado de esto, al entrar a un setter o getter, estaba perdiendo el this que hace referencia a MediaPlayer y estaba obteniendo un this con referencia al player. Cuando usamos setter y getter con Class, el this sí se refiere al objeto en cuestión que está ejecutando el código(en este caso al player) y no al MediaPlayer. Por lo tanto usar los setters y getters como se ven en la clase, tenía un bug en mi código ya que this.media daba undefined (porque this en esta caso es el objeto player, el cual no tiene definida una propiedad media). Considero que esto es el comportamiento más lógico, siguiendo con la idea de que this es quien ejecuta el código.
.

Recordé en un curso anterior de JavaScript con Sacha que mencionaba que una práctica común que se utilizaba para poder conservar un this era creando una variable llamada _this. Tuve que implementarlo de esta manera para poder obtener el mismo resultado que en la clase, aquí el código que sí funciona:

 _initPlugins () {
    const _this = this
    const player = {
      playPause: () => this.playPause(),
      media: () => this.media,
      get muted() {
        return _this.media.muted
      },
      set muted(value) {
        _this.media.muted = value
      }
    }

    this.plugins.forEach(plugin => plugin.run(player))
  }

No sé si esto sea una solución óptima, pero lo comparto por si alguien se encuentra en esta misma situación. 😃

por si te cuesta entender la clase : https://www.youtube.com/watch?v=TEzu31q9MVA

Esto es común en Java. así que esto no se hizo tan difícil, por otro lado son poco comunes (creo que con un .prototype se obtiene un resultado mejor y más entendible)

Un poco confuso las asignación por medio del igual, pero con otra revisión quedara claro.

esta es la clase que mas me ha costado entender entre todas las que eh visto

Agradezco el aporte Filiberto Santillán,muy util

Me vi esto 2 veces lei resumenes y vi videos pero siendo sincero cuando veo esta clase me quedo mas perdido, creo que entiendo los getters y setters pero por lo que explicaron la gente en aportes y los videos de youtube lo que vi hoy en aqui no entiendo nada y eso que e llevado los cursos como se tienen que llevar en la ruta de javascript

Hola a todos, alguien mas le ha salido este error

Refused to load the image 'http://localhost:8080/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

Por si tienes dudas acá una documentación muy completa:
get :https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Funciones/get
set: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Funciones/set

esto nunca lo habia escuchado

Genial gracias a esto podemos encapsular nuestro codigo y protegerlo

definitivamente este curso es algo enredado. me cuesta mucho entender.

Basicamente getters y setters son propiedades fantasmas, que podemos llamar para leer o cambiar propiedades de un objeto original manteniendo la privacidad de esas propiedades originales.

Un apunte extra, en esta clase hay un ejemplo para la diferencia entre una función flecha y una función anónima, si se cambia el atributo play o pause por una funcion anónima el código se rompe, debido a que el this que hace referencia en la función flecha es al objeto de MediaPlayer y el caso de la funcion anónima es al objeto de AutoPlugin. Compruébenlo con un console.log al this en ambos casos

Los getters y setters son funciones que podemos usar en un objeto para tener propiedades virtuales. Se usan los keywords set y get para crear estas propiedades. Estas a ser funciones pueden llevar una validación de por medio y ser usadas con el operador de asignación como si fueran una variable más dentro del objeto.

Un poco confundida =(

Excelente expliacion de los getters y setters

Interesantes funciones!!

I share my code!!

function MediaPlayer(config) {
  this.media = config.el;
  this.plugins = config.plugins || [];

  this._initPlugins();
}

MediaPlayer.prototype._initPlugins = function() {
  const player = {
    play: () =>this.play(),
    pause: () => this.pause(),
    media: this.media,
    get muted() {
      return this.media.muted;
    },
    set muted (value) {
        this.media.muted = value;
    }
  };

  this.plugins.forEach(plugin => {
    plugin.run(player);
  });
};

MediaPlayer.prototype.play = function() {
  this.media.play();
};

MediaPlayer.prototype.pause = function() {
  this.media.pause();
};

MediaPlayer.prototype.togglePlay = function() {
  if (this.media.paused) {
    this.play();
  } else {
    this.pause();
  }
};

MediaPlayer.prototype.mute = function() {
  this.media.muted = true;
};

MediaPlayer.prototype.unmute = function() {
  this.media.muted = false;
};

export default MediaPlayer;```

En conclusión los getters and setters son propiedades de un objetos virtuales que parecen como una función " get muted() {} " pero no son funciones son propiedades en este caso del objeto player , en este caso sirven para validar o restringir las funciones(métodos) que puede usar el plugin de la class MediaPlayer…

… Espero entiendan mis explicaciones si no me gustaria que me lo hicieran saber 😄…

rayos lo coloque en preguntas jajaja

Me salvaron los comentarios, no entendía la utilidad con el ejemplo de la clase. Funciona muy similar a trabajar con valores privados dentro de una clase en java usando set y get.

la idea es clara, similar a otros lenguajes solo que estas propiedades son virtuales.

No solamente podemos pasar un valor a un getter, si tenemos que modificar varias propiedades podemos pasar un objeto o array.

const person = {
  name: "Jhean",
  lastname: "Pacheco",
  age: 27,
  job: "Frontend Developer",
  get fullPerson() {
    return console.log(`Hi, it's ${person.name} ${person.lastname}, I have ${person.age} years old and I work as ${person.job}.`);
  },
  set fullPerson(value) {
    person.age = value.newAge;
    person.job = value.newJob;
  }
}

console.log(person.fullPerson);

person.fullPerson = {
  newAge: 30,
  newJob: "FullStack Developer"
};
console.log(person.fullPerson);

valor virtual que podemos usar dentro de objetos que tienen propiedades virtuales

Actualmente se lanza en el 2021 los metodos privado y los atributos privados es2021

Por si alguien tenía la duda de cómo poner las flechas en vez de => y los de equidad estricta (===) y mucho más, chequen Fira Code

En esta clase vamos a retomar el proyecto del reproductor de video.

Recordemos que en este punto nuestra función inicializadora de todos los métodos se ve así:

MediaPlayer.prototype._initPlugins = function () {
	this.plugins.forEach((plugin) => {
		plugin.run(this);
	});
};

Lo que hace es ejecutar la función Run de cada plugin, pasando como parámetro a this, que en este caso es TODO nuestro Media Player

Podemos mejorar nuestro código pasándole a los plugins solamente la información necesaria (la que indiquemos explícitamente). Para hacer esto, solo tenemos que definir una nueva variable (player en este caso), que hará referencia a las funciones del Media Player.

MediaPlayer.prototype._initPlugins = function () {
	const player = {
		play: () => this.play(),
		pause: () => this.pause(),
		media: this.media
	};
	this.plugins.forEach((plugin) => {
		plugin.run(player);
	});
};

Ahora creamos un objeto llamado player y es al que tendrán acceso los plugins. De esta manera limitamos el acceso que tienen los plugins a nuestra clase.

Pese a que ya contamos con una función de muted en this.media o en nuestro prototipo, veremos otra forma de acceder a los valores de mute usando getters y setters en Javascript.

Entendamos un poco de qué son los Getters y Setters.

Getters y Setters son propiedades del lenguaje que nos permiten crear propiedades virtuales y que se usan para obtener y definir variables de un objeto.

Los getters y setters se definen dentro de objetos y su sintaxis es la siguiente:

const obj = {
  get attribute(){
    // Optional validation/transformation
    return this.attribute;
  },
  set attribute(value){
    // Optional validation/transformation
    this.attribute = value
  }
}

Para invocarlos usamos la siguiente sintaxis:

obj.attribute         //ejecutará el getter
obj.attribute = true; //ejecutará el setter

🤔 Hmmmm… su uso es igual. ¿Entonces para qué nos sirven?
Getters y Setters nos permitirán hacer validaciones o transformaciones de los valores que reciben o que envían.

El ejemplo básico de Getters es el de nombre completo: imagina que tu objeto tiene nombre y apellido, sin embargo usas muy frecuentemente el nombre completo. Es a la hora de ejecución que tendrías que concatenar obj.nombre y obj.apellido. Peeeero… qué tal si creamos una propiedad virtual llamada nombreCompleto que hará la concatenación por nosotros. Es aquí donde entran los Getters.

Los Setters también sirven para procesar los datos enviador. Imagina que puedes hacer validaciones una sola vez y no cada vez que mandes un dato.

Volvamos a nuestro Media Player.

Ahora que sabemos para que sirven y cómo se usan los Getters y Setter implementémoslos en nuestro Reproductor:

MediaPlayer.prototype._initPlugins = function () {
	const player = {
		play: () => this.play(),
		pause: () => this.pause(),
		media: this.media,
		get muted() {
			return this.media.muted;
		},
		set muted(value) {
			this.media.muted = value;
		},
	};

En este ejercicio no definimos validaciones, transformaciones ni algún proceso, pero es solo un ejemplo se uso.

Esto me recuerda mucho al estándar que maneja Java con Get y Set como funciones de clases.

Esto también me recuerda las propiedades con decoradores

@property

en python/Django.

Los set y get son propiedades virtuales que no permite hacer cualquier tipo de logica, get no retorna y set atrapa cualquier valor, como los set y get no son funciones no se declara como una funcion si no como una propiedad y se asigna con un =

pero lo setter y getters no son tan nuevos ya que estos se podian utilizar al usar Object.create ademas de que tambien al usar prototype los puedes generar

const EXAMPLE = Object.create({}, {
    name: {
        set: function(name) {
            this.value = name;
        },
        get: function() {
            return this.value;
        }
    },
    datos: {
        value: function (name, age) {
            return `hola ${name} tu edad es ${age} años`;
        }
    }
});

EXAMPLE.name = "Jorge";
console.log(EXAMPLE.name);

// usando el metodo value
const RESULT = EXAMPLE.datos("jorge", 23);
console.log(RESULT);

Yo recuerdo que se pueden usar de esa manera y no solo puedes usar set y get también al generar lo con el Object.create tienes la opción de utilizar value, lo que si entiendo es que actualmente se usa un poco de sugar syntax.

Código del reto

https://tv8d9.csb.app/

También podemos pasar el set del muted de la siguiente manera un poco más simplificada

player.muted = !player.muted;

También se puede asociar directamente las funciones de play, pause y el objeto media, sin utilizar arrow functions y funciona correctamente

MediaPlayer.prototype.initPlugins = function () {
	const player = {
		play: this.play,
		pause: this.pause,
		media: this.media,
		get muted() {
			return this.media.muted;
		},
		set muted(value) {
			this.media.muted = value;
		}
	}
	this.plugins.forEach(plugin => {
		plugin.run(player);
	});
};

Un excelente complemento a esta clase

Un articulo explicando Getters y setters, espero los sirva:
https://yeisondaza.com/entendiendo-getters-y-setters-en-javascript

En este rjemplo se explica muy bien estas propiedades!
https://www.arsys.es/blog/programacion/propiedades-get-set-javascript/

Un poco confundido pero como todo es cuestion de practica

Entendí mucho mejor ésta vez al ver la clase.
Pero leí éste blog (haz click) y me quedó más claro!

Son acciones para poder declarar cosas que el usuario jamás tendrá acceso. Es algo que podemos crear y nos da posibilidades de operar cosas de una manera privada.

let person = {
  name: 'Andrés',
  lastname: 'Eslava',
  get completeName() {
    return `${nombre} ${apellido}`
  },
  set completeName(nam) {
    const words = nam.split(' ');
    this.name = words[0] || '';
    this.lastname = words[1] || '';
  }
}

person.completeName = 'Felipe Zuluaga'

console.log(person.name); //Felipe
console.log(person.lastname); //Zuluaga

Tengo una duda: Por qué debería usar las palabras reservadas get y set si puedo hacer los mismo con una función. ej.

var persona = {
  nombre: 'Arsys',
  apellidos: 'Internet',
  getNombreCompleto: function() {
    return this.nombre + ' ' + this.apellidos;
  }
}```
seria lo mismo qué:


var persona = {
nombre: ‘Arsys’,
apellidos: ‘Internet’,
get nombreCompleto() {
return this.nombre + ’ ’ + this.apellidos;
}
}``````

Interesante como las propiedades virtuales pueden ayudarnos a generar nuevas funcionalidades sin necesidad de declararlas nuevamente, solo tomandolas prestadas.

Esta clase es particularmente util para entender la lógica de los gets y sets junto a las propiedades virtuales, con lo cual podremos ahorrar lineas de codigo y hacer más entendible el mismo.

Encontre un blog con un post muy acorde para complementar esta clase.

Blog

para poder entender a profundidad el uso de get y set, recomiendo el curso de Js POO, y luego el intermedio, alli se explica mucho mejor y de manera practica

Excelente clase, esto es una herramienta buenisima…

Tuve que buscar información adicional al tema.
El mejor ejemplo que encontré para entender mejor estos conceptos:

let person = {
	firstname: 'Yamir',
	lastname: 'Minaya',
	get fullName(){
		return `${this.firstname} ${this.lastname}`;
	},
	set fullName(name){
		let words = name.toString().split(' ');
		this.firstname = words[0] || '';
		this.lastname = words[1] || '';
	}
} 

los setter y getter los logre entender por otro lado ya que aca se hace bolas uno, pasando propiedades de los Media; lo que entedi aca es que sirven para no setear directamente a la funcion/clase y asi usar funciones que solo llamamos para realizar los cambios que queremos o llamar funcionalidades.

Si quieres prepararte un poco previamente a la clase te recomiendo esta otra clase de otro curso que me pareció buena para refrescar y entender mejor el tema y su propósito video

Tarde bastante, pero al fin lo entendí

Me parece que no están tomando en cuenta la serie de comentarios negativos que tiene esta clase, el señor Kaufman tiene una pésima forma de enseñar.
Eh seguido toda la ruta de aprendizaje de la escuela de JavaScript que propone esta plataforma digital pero me parece que he aprendido mas en Youtube que aquí mismo.

Este curso necesita actualizarse, la explicación que nos dan es muy pobre!

Aqui les va mi resumen para entenderlo dentro del contexto.

get se utiliza para acceder a atributos del objeto. Además, puede invocarse como un atributo en sí mismo. Podríamos utilizar player.muted, sin necesidad del paréntesis.

Lo que necesitamos aqui es acceder al valor muted, de la propiedad media de la clase.

Por ello, usamos get y retornamos un this.media.muted. Lo cuál nos permitirá acceder a la propiedad como un atributo.

get muted(){
return this.media.muted
}

Dado que this, está referenciando al nuevo objeto player creado, y no al mediaPlayer.
Definimos media: this.media. Lo cuál asigna la propiedad media del mediaPlayer, al nuevo objeto Player construido.

media: this.media,

Una vez que tenemos acceso, podemos utilizar un setter para modificar el valor de dicha propiedad desde afuera. (desde el plugin autoPlay)

Por ello definimos

set muted(vaule) = {
this.media.muted = value
}

Dado que cambiamos el alcance de los plugins al nuevo objeto creado player; en lugar de llamar a player.muted(), que no existe como método en nuestro nuevo objeto directamente, podemos modificarlo como si fuera una propiedad gracias al getter.

Por ello escribimos dentro de autoPlay,

player.muted = true;

A lo cuál, le añadimos una condición, que va a verificar que el video no esté muteado.

if (!player.muted) {
player.muted = true;
}

Acepto correcciones, apreciaciones o preguntas 😊

Estas son funciones que podemos utilizar dentro de objetos que nos permiten tener propiedades virtuales. No existe directamente en el objeto pero atraves de una funcion podemos calcular estos valores o establecer un nuevo valor.

Los getters y setters son funciones que tenemos dentro de objetos que nos permiten tener propiedades virtuales, es decir, no es un propiedad que existe directamente en el objeto pero a través de un getter o setter podemos correr una función que calculará el valor.

Para complementar, acá se explica con otro ejemplo: Aquí

Ufff esta no me la sabía, está genial, me recuerda mucho a Laravel con Eloquent donde escribes funciones pero las usas como si fueran propiedades jaja

Getters y setters

Los getters y setters son funciones que podemos usar en un objeto. Estas las utilizamos para tener propiedades virtuales.

Para hacer un getters o setters utilizamos las palabras reservadas get y set.

• Getters → Es una función de un objeto que nos trae datos de este.
• Setters → Es una función de un objeto que nos deja meter datos en ese objeto.

get muted() {
   return this.media.muted
}

⚠ Los setters no los llaman como una función, sino que le pasamos un valor

AutoPlay.prototype.run = function (player) {
    if (!player.muted) {
        player.muted = true
    }

Qué otro ejemplo de uso podríamos tener de una buena aplicación de getters and setters? A mi no se me ocurre ninguna ):

Esto es muy parecido a le que en Laravel se llaman Accessors y Mutators. :0

Getter y Setter sirve para cumplir la propiedad de Encapsulamiento del objeto en POO

Los getters y setters son funciones que podemos usar en un objeto para tener propiedades virtuales. Se usan los keywords set y get para crear estas propiedades.

Estas propiedades al ser funciones pueden llevar una validación de por medio y ser usadas con el operador de asignación como si fueran una variable más dentro del objeto.

Como no me enteré realmente del concepto comparto un código muy sencillo ya que quizás a alguien se le haga un poco complejo el tema de plugins, muted y demás. Y lanzo la pregunta junto con el aporte, el código :

var persona = {
  firstName: "Nombre",
  lastName : "Apellido",
  language : "español",
  get lang() {
    return this.language;
  }

set lang(lang) {
    this.language = lang;
  }
};

// Mostrar datos del objeto usando un getter:
document.getElementById("demo").innerHTML = persona.lang;

// Asignar una propiedad usando un setter:
persona.lang = "inglés";

// Mostrar datos del objeto:
document.getElementById("demo").innerHTML = person.language;

Si en lugar de usar VAR para crear el Objeto persona usaramos FUNCTION tal y como se realiza con MediaPlayer, ¿sería incorrecto, funcionaría y sería una mala práctica?

Creería yo entonces que son métodos que podemos usar en un objeto, donde get nos permite acceder a las props del objeto y set nos permite mutar estas props.

creando las propiedades virtuales

Quizá la explicación parezca algo confusa, pero volviendo a ver el video se entiende mejor el tema.

Alguien me puede ayudar con esto, no me permite mover la carpeta plugins dentro de la carpeta assets.
Estoy trabajando con WSL y abriendo desde la terminal VSC con code .

Hola, a qué se refiere en específico con “propiedades virtuales”? Por qué virtuales?

A volver a ver la clase !!

Esta clase me deja muchos sinsabores:

• La declaración de media: this.media es poco intuitiva, (cualquiera podría pensar que saltaría un error, porque dentro del objeto player no existe la propiedad media, así que no podría referenciar a this.media) considero que sería mucho mejor y más claro de esta manera:

_initPlugins() {
    const media = this.media

    const video = {
      play: () => media.play(),
      get mutedStatus() {
        return media.muted
      },
      set muted(value) {
        media.muted = value
      }
    }
    this.plugins.forEach(plugin => {
      plugin.run(video)
    })
  }

• La sobrecarga al tener dos funciones (una get y otra set) del mismo nombre muted, ¿por qué no usar nombres diferentes? Creo que sería más claro (como muestro arriba).

• Dentro de AutoPlay.js no tiene sentido que preguntemos si el vídeo está muted o no, ya que debemos mutearlo antes de darle play. ¿No es mejor de frente mutearlo y ya? Algo así:

class AutoPlay {
  run(video) {
    video.muted = true
    video.play()
  }
}

• Finalmente, es poco práctico usar los getters y setters así, se colige que tendríamos que crear un objeto nuevo con las funciones que necesitemos a cada plugin, aunque quizás sea lo correcto.