Métodos estáticos del prototipo Object

Entre más navegas dentro de Javascript, más oscuro se vuelve, jaja

console.log(Object.entries(juan)[3][1].bind(juan)("curso 2"));

Curiosamente si escribimos bind(juan), que hace que se enlace this al objeto juan, permite añadir un curso nuevo

Empieza el show…

Una de las propiedades que es relavante es el object.entries.

Esta se puede utilizar para entrar a los objectos y trabajar de una manera similar que lo hacemos con la instancia, la diferencia es que una vez ejecutado el objec.entries, este cmabiara TODO el objecto y lo movera a ser un array, por lo tanto el THIS dejara de pincharle donde lo hacia por defecto…

const juan = {
  name: "jaunito",
  age: 18,
  approvedCourses: ["curso 1"],
  addCourse(newCourse) {
    console.log("this sera", this);
    console.log("this.approvedCourses sera", this.approvedCourses);
    this.approvedCourses.push(newCourse);
    
  }
}

console.group();
  console.log(Object.keys(juan));
  console.log(Object.getOwnPropertyNames(juan));
  console.log(Object.entries(juan));
console.groupEnd();

//manera normal de encarar un metodo, juan.addCourse("chino");

//con el object.entries => 
// Object.entries(juan)[3][1]("curso 2");
//lo que hago es entrar a juan,al elemtno 3, y luego dentro de otro array[1], todo esto se como encararlo gracias a 
// console.log(Object.entries(juan)); y de aca me fui moviendo hasta llegar a esto Object.entries(juan)[3][1]("curso 2");
//de manera a simple vista paecelo mismo, perooo como escribi ates, el objecto cambia la manera de apuntar con el this, y lo que responderala consola es:
//this sera (2) ["addCourse", ƒ] => como se puede ver, cambio ya no apunta a juan.
// this.approvedCourses sera undefined

Otro metodo estatico es:

[Object.defineProperty()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)

El método estático Object.defineProperty() define una nueva propiedad(con propiedad me refiero a crear ejemplo un age: 18, de manera super manuel ) sobre un objeto, o modifica una ya existente, y devuelve el objeto modificado.

Sintaxis

Object.defineProperty(obj, prop, descriptor)

Parámetros

objEl objeto sobre el cual se define la propiedad.

propEl nombre de la propiedad a ser definida o modificada.

descriptorEl descriptor de la propiedad que está siendo definida o modificada

const juan = {
  name: "jaunito",
  age: 18,
  approvedCourses: ["curso 1"],
  addCourse(newCourse) {
    console.log("this sera", this);
    console.log("this.approvedCourses sera", this.approvedCourses);
    this.approvedCourses.push(newCourse);
    
  }
}

Object.defineProperty(juan, "pruebaNASA", {
  value: "extraterrestres",
  writable: true,
  enumerable: true,
  configurable: true,
})

//juan es el obj, prop es "pruebaNASA", "descriptor" son todos los atributos
//como value,writable, etc etc 

Al “desconponer” el objeto con Object.entries y al producir una array de arrays con los atributos y metodos del objeto, el ambito lexico cambia y por ende la palabra reservada this funciona en un contexto diferente al inicial.

Object.defineProperty()
El método estático Object.defineProperty() define una nueva propiedad sobre un objeto, o modifica una ya existente, y devuelve el objeto modificado.

Sintaxis
Object.defineProperty(obj, prop, descriptor)

Parámetros
obj: El objeto sobre el cual se define la propiedad.

prop: El nombre de la propiedad a ser definida o modificada.

descriptor: Podremos definir las propiedades nativas del objeto ```
No estoy seguro de mi respuesta por lo que espero su feedback

Mi madre me dio la vida, y JavaScript las ganas de vivirla

Acabo de empezar el curso de POO intermedio y ya me dio algo de miedo, pero a darle con todo

Métodos estáticos del prototipo Object

Código Clase

const carlos = {
    name: 'carlito',
    age: 18,
    approvedCourses: ["Curso 1"],
    
    addCourse(newCourse) {
        console.log("This", this);
        console.log("This.approvedCourses", this.approvedCourses);
        this.approvedCourses.push(newCourse); // this hace referencia al objeto carlos
    },
};

// console.log(Object.keys(carlos));
// console.log(Object.getOwnPropertyNames(carlos));

// console.log(Object.entries(carlos));

    // console.log(Object.entries(carlos)[1][0]); // Codigo probado en consola
    // console.log(Object.entries(carlos)[1][1]); // Codigo probado en consola
    // console.log(Object.entries(carlos)[3][1]); // Codigo probado en consola
    // console.log(Object.entries(carlos)[3][1]("Curso 2")); // Error
     
console.log(Object.getOwnPropertyDescriptors(carlos));

Object.defineProperty(carlos, "pruebaNasa", {
    value: "extraterrestres",
    writable: true,
    enumerable: true,
    configurable: true
})

Object.defineProperty()

El método estático Object.defineProperty() define una nueva propiedad sobre un objeto, o modifica una ya existente, y devuelve el objeto modificado.

Sintaxis

Object.defineProperty(obj, prop, descriptor)

Parámetros

objEl objeto sobre el cual se define la propiedad.

propEl nombre de la propiedad a ser definida o modificada.

descriptorEl descriptor de la propiedad que está siendo definida o modificada

Resumen corto:

con Object.key() y Object.getOwnPropertyName() obtienes en un arreglo todas las claves del objeto en cuestión, sin importar si son métodos o atributos, ej:

["name", "email", "age"]

con Object.entries() obtienes un array de array con todas las propiedades del objeto, tener cuidado si tienes un método dentro de el, pues this cambia al usar esta propiedad, ej:

[ 0: ["name", "javier"] 1:[...], ...]

con Object.getOwnPropertyDescriptors() obtienes en un objeto las propiedades del objeto con otros cosas que nos permitirán poder hacer encapsulamiento, ej:

{
 name: {
    value: 'javier',
    writable: true,
    enumerable: true,
    configurable: true
  },
  ...
}

Interesante este nuevo approach, ir de lo mas general en el curso básico a lo mas especifico en los niveles, siguientes, I like it!

const person = {
  userName: 'zajithcorro',
  age: 26,
  approvedCourses: ['Curso Profesional de Git y Github'],
  addApprovedCourse (course) {
    this.approvedCourses.push(course);
  }
}

Object.keys()

Object.keys(person) // [ 'userName', 'age', 'approvedCourses', 'addApprovedCourse' ]

Object.getOwnPropertyNames()

Object.getOwnPropertyNames(person) // [ 'userName', 'age', 'approvedCourses', 'addApprovedCourse' ]

Object.entries()

Object.entries(person) 
/*
	[
	  [ 'userName', 'zajithcorro' ],
	  [ 'age', 26 ],
	  [
	    'approvedCourses',
	    [ 'Curso Profesional de Git y Github' ]
	  ],
	  [ 'addApprovedCourse', ƒ addApprovedCourse() ]
	]
*/

Si nosotros quisiéramos ejecutar la función desde el array que nos devuelve Object.entries, no podríamos ya que el this no hace referencia al objeto person.

 Object.entries(person)[3][1]('Nuevo Curso') // TypeError: Cannot read property 'push' of undefined

Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors(person)
/*
	{
	  userName: {
	    value: 'zajithcorro',
	    writable: true,
	    enumerable: true,
	    configurable: true
	  },
	  age: {
	    value: 26,
	    writable: true,
	    enumerable: true,
	    configurable: true
	  },
	  approvedCourses: {
	    value: [ 'Curso Profesional de Git y Github' ],
	    writable: true,
	    enumerable: true,
	    configurable: true
	  },
	  addApprovedCourse: {
	    value: ƒ addApprovedCourse(),
	    writable: true,
	    enumerable: true,
	    configurable: true
	  }
	}
*/

Object.defineProperty()

Define una nueva propiedad en un objeto. Retorna el objeto modificado

Object.defineProperty(*object, property, descriptor*)

• Object - El objeto en el cual será definida la propiedad
• Property - El nombre o el Symbol de la propiedad que será definida
• Descriptor - El objecto con las propiedades que tendrá

Object.defineProperty(person, "mail", {
    value: "[email protected]",
    writable: true,
    enumerable: true,
    configurable: true
})

/*
	{
	  userName: 'zajithcorro',
	  age: 26,
	  approvedCourses: [ 'Curso Profesional de Git y Github' ],
	  addApprovedCourse: ƒ addApprovedCourse(),
	  mail: '[email protected]'
	}
*/

Tenemos lo pilares: Abstracción - Herencia - Encapsulamiento - Polimorfísmo
·
En el encapsulamiento encontramos la forma de cómo se accede y mirar, ejecutar, usar las propiedades del objeto. Con getOwnPropertyDescriptors podemos modificar las propiedades para limitar el acceso y modificación de nuestros objetos
·
Object.entries() cambia la referencia de this: el objeto que ejecuta este método, tiene cómo salida un array. Por consiguiente, this cambia su referencia a este array. Esto se debe tener en cuenta cuando trabajamos con más funciones.

• Listar las diferentes propiedades del super prototipo Object se puede lograr con estos métodos.
  La más interesante es getOwnPropertyDescriptors, nos permite ver diferentes atributos de los objetos para crear y modificar sus propiedades.

Yo soy el Juan de la clase 🤓

Object.keys( ) vs Object.getOwnPropertyNames( )
La diferencia es muy sencilla:

• Object.keys( ) traerá en un array sólo los keys propios cuyo atributo enumerable sea true.
• Object.getOwnPropertyNames( ) traerá un array con todos los keys propios, sin importar el valor de su atributo enumerable.

.
Enumerable: Una propiedad enumerable en JavaScript es una propiedad que puede ser vista si es iterada usando un loop for...in.
Las propiedades que asignamos a un objeto por defecto tienen este campo en true a menos que indiquemos lo contrario.

const obj = {};
Object.defineProperties(obj, {
  one: {enumerable: true, value: 1},
  two: {enumerable: false, value: 2},
});
Object.keys(obj); // ["one"]
Object.getOwnPropertyNames(obj); // ["one", "two"]

for (const key in obj) {
    console.log(key);
} // "one"

Para ver en consola los valores de un objeto, me gusta usar mejor el “console.table” que el .log.

Pruébenlo.

Ejemplo con el método entries

const juan = {
    name: "Juanito",                          //[0]
    age: 18,                                  //[1]
    approvedCourses: ["Curso 1"],             //[2]
                  
    addCourse(newCourse) {     //[3] 
                              // [3][0] nomrbe de la funcion,
                             // [3][1] la funcion como tal
        console.log("This", this);
        console.log("this.approvedCourses",this.approvedCourses); 
        this.approvedCourses.push(newCourse);
    }
};


console.log(Object.keys(juan));
console.log(Object.getOwnPropertyNames(juan));
console.log(Object.entries(juan));//nos arroja un array de arrays

//Si por ejemplo tenemos

console.log(Object.entries(juan))[3] [1]("nuevo curso"); 
// accedemos a la funcion "addCourse"
// Sin embargo, cuando encuntre la palabra 'this' 
   (this.aprovedCourses.push(newCourse));
// 'this' Ya no será el this del objeto juan
// sino el 'this' del array que nos arroja el metodo entries

Una forma de ejecutar la funcion usando Object.entries es utilizando call o bind:

// Using call
Object.entries(juan)[3][1].call(juan,'curso 2');
// Or with bind 
Object.entries(juan)[3][1].bind(juan)('curso 2'); 

Pueden leer mas sobre estos metodos 👇:

• When to Use Bind(), Call(), and Apply() in JavaScript

• Javascript: call(), apply() and bind()

Recordar y entender el concepto de contexto de ejecución es importante para entender esto, espero sirva 😄

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Object Recomiendo este link para ver todas las funciones del object

const juan = {
    name: 'Juanito' ,
    age: 18 ,
    approvedCourses : ["Curso 1"] ,

    addCourses(newCourse) {
        this.approvedCourses.push(newCourse);
        // Con el this, estamos haciendo referencia al aproved courses de juan
    }
};

/* Métodos con el super objeto Object */

// para usar las propiedades estáticas del super objeto OBJECT.

console.log(Object.keys(juan))
// Cada una de las propiedades.
console.log(Object.getOwnPropertyNames(juan))
// Nos muestra un array con cada una de las propiedades del objeto juan.
console.log(Object.entries(juan))
// Es un array que nos muestra por medio de array cada uno de los atributos o propiedades.
    Object.entries(juan)[3];
    // nos muestra el array de add Course

    Object.entries(juan)[3][1]('Curso 3');
    // Ahora va a hacer referencia al array, esto porque o está mostrando como un array, es decir this ya no es el objeto juan, sino el array donde está guardada la función.
    // Importante ver a donde se envian los datos d ela función.


console.log(Object.getOwnPropertyDescriptors(juan));
// Aqui nos va a mostrar un objeto con cada una de las propiedades del objeto Juan
// Además nos va a arrojar, lo que es configurable, enumerable y, writable. ¿Que són?


// la misma manera de agregar un nuevo valor es decir hacer asignación
Object.defineProperty(juan, "prueba" , {
    value : "Aqui va el valor del anuevo atributo lalmada prueba" ,
    writable : true ,
    enumerable : true ,
    configurable : true 
})
// Recibe tres parámetros 1. el nombre del objeto 2. el nombre del nuevo atributo o propiedad que queremos definir y, 3. la lista de atributos con un {}

Wow todo lo que se puede seguir aprendiento en JS ❤️

Excelente!

Métodos estáticos del prototipo Object

Podemos definir nuestros propiedades estáticas:

const Miguel = {
  name: "Miguel",
  age: 22,
  approvedCourses: ['Curso 1'],
  addCourse(newCourse: string) {
    console.log('This:', this);
    console.log('This.approvedCourses:', this.approvedCourses);
    this.approvedCourses.push(newCourse);
  }
};

Object.defineProperty(Miguel, "prueba-NASA", {
  value: "👽",
  enumerable: true,
  writable: true,
  configurable: true
});

console.table(Object.getOwnPropertyDescriptors(Miguel));

considero que el ultimo método estático no quedo muy claro que fin tenia, pero solo basta con imprimir juan para darse cuenta de que se logro agregar un nuevo atributo con el key PruebaNasa y su valor es extraterrestres.
otra cosa en lo del entries es que el escope cambio y para acceder a uno anterior se puede utilizar el método .bind este nos permite: El método bind() crea una nueva función, que cuando es llamada, asigna a su operador this el valor entregado, con una secuencia de argumentos dados precediendo a cualquiera entregados cuando la función es llamada.

comenzamos #nuncaparesdeaprender