Static: atributos y métodos estáticos en JavaScript

Platzi chiquito es el besto name que se le pudo haber dado al proyecto
Ahora mi resumen señores

Static: atributos y métodos estáticos en JavaScript

Hasta ahora habíamos aprendido que apara acceder a los métodos o atributos de una clase o prototipo teníamos que crear una instancia del prototipo(Objeto). Pero hay una forma de que podemos saltarnos tener que crear una instancia del prototipo para acceder a los métodos o atributos, esta es la forma Static

Para crear atributos estáticos los cuales podamos acceder sin crear un objeto o una instancia de este prototipo, solo hay que agregar al atributo la palabra **static**

Métodos estáticos de Objetct

const objetito = {
    name: "Carlitos",
    email: "[email protected]",
    age: 16,
}

Object.keys()

Nos devuelve una lista con todos los keys(nombres claves) de nuestro objeto objetito

Object.keys(objetito)
// (3) ["name", "email", "age"]

Object.getOwnPropertyNames()

Hace prácticamente lo mismo que Object.keys con pequeñas diferencias DOCUMENTACION

Object.getOwnPropertyNames(objetito)
// (3) ["name", "email", "age"]

Object.entries()

El método entries nos devolverá un arrays de arrays donde tendremos nuestra palabra clave con su  respectivo valor por cada propiedad del prototipo [key,  value]

Object.entries(objetito)
// [
//     0: (2) ["name", "Carlitos"]
//     1: (2) ["email", "[email protected]"]
//     2: (2) ["age", 16]
// ]

Object.getOwnPropertyDescriptors(objetito)

Nos devuelve todas las propiedades de los objetos, con sus keys y values, y otros atributos. Los atributos
writable, configurable y enumerable
es la forma que tiene JavaScript para limitar el acceso modificar o modificación de nuestros atributos o de nuestros objetos.

Object.getOwnPropertyDescriptors(objetito) 
// {
//     age:{
//         configurable: true
//         enumerable: true
//         value: 16
//         writable: true
//     }
//     email:{
//         configurable: true
//         enumerable: true
//         value: "[email protected]"
//         writable: true
//     }
//     name:{
//         configurable: true
//         enumerable: true
//         value: "Carlitos"
//     }
// }

Encapsulamiento

Si recordamos del curso anterior, el objetivo del encapsulamiento es limitiar quien puede modificar, acceder o ejecutar nuestros metodos o atributos de la clase o prototipo.

Ahora con las propiedades writable configurable enumerable podemos limitar quien tiene acceso, modificar nuestros objetos.

Resumen corto de static.
Si quieres tener acceso a una variable o método sin tener que crear instancias de una clase usa la palabra static antes de crear tu variable o método.

class saludar {
    static saludar =  'hola';
    static metodoSaludar () {
        return 'hola2'
    }
}
console.log(saludar.saludar) //hola
console.log(saludar.metodoSaludar()) //hola2

Static atributos y métodos estáticos en Javascript

Para acceder a los métodos, atributo o clases de un prototipo hay que tener una instancia, pero esto no es necesario para los métodos estáticos.

static

Para crear atributos estáticos a los que podamos acceder sin crear un objeto, le ponemos la palabra reservada static

class Persona {
    static nombre = 'Juan';
}
console.log(Persona.nombre);
// Juan

en los métodos sería así:

class Persona {
    static nombre() {
        return 'Juan';
    }
}
console.log(Persona.nombre());
// Juan

Cuando se llame por fuera, sin crear instancias, también obtendremos el ‘Juan’

Prototipo object

Madre de todos los prototipos.

Object.keys()

const Objeto = {
    nombre: 'Juan',
    email:"[email protected]",
    edad:30,
};
Object.keys(Objeto);
// ["nombre", "email", "edad"]

Nos devuelve un array con los nombres clave de los atributos del objeto

Object.getOwnPropertyNames()

const objeto = {
    name: "Juan",
    email:"[email protected]"
    age:30
};
Object.getOwnPropertyNames(objeto);
// ["name", "email", "age"]

Nos devuelve un array con los nombres de los atributos del objeto

Object.entries()

const objeto = {
    name: "Juan",
    email:"[email protected]",
    age:30
};
Object.entries(objeto);
// [
    0: ["name", "Juan"*],1: ["email","[email protected]"],
    2: ["age",30]
    ]

Nos devuelve un array con los keys y los value del objeto

Object.getOwnPropertyDescriptors()

/*
name: {
    value: "Juan",
    writable: true,
    enumerable: true,
    configurable: true
}
*/

Nos devuelve otros atributos “writable, enumerable, configurable”.
Esta es la forma que tiene javascript por dentro para limitar el acceso o la modificación de nuestros atributos u objetos.

Para que les quede mas claro esa es la diferencia entre la forma habitual y usando static
.

Usando clases con instancias

class pato {
    constructor(sonido, patas){
        this.sound = sonido;
        this.paws = patas;
    }
}

const pato2 = new pato("cuak", 2);
pato2.sound // -> "cuak"
pato2.paws // -> 2

Como se observa la única forma de acceder a los atributos de la clase pato es instanciando la misma, mientras que static lo hace de manera directa
.
Usando Static

class pato {
    static sound = "cuak";
    static paws = 2; 
}

pato.sound // -> "cuak"
pato.paws // -> 2

Hice esos códigos con TypeScript, se los comparto:
(Por cierto, estoy usando es2017 en el tsconfig.json)

Static: atributos y métodos estáticos en JavaScript

Con static podemos ahorrarnos la instanciación de objetos.

class Patito {
  static sonidito: string = 'Cuak! 🦆';

  static hacerSonidito(): string {
    return 'Cuak! 🦆🦆';
  }
}

console.log(Patito.sonidito);
console.log(Patito.hacerSonidito());

const objetito = {
  name: 'Miguel',
  email: '[email protected]',
  age: 22
}

console.table(Object.keys(objetito))
console.table(Object.getOwnPropertyNames(objetito)) //*Hace lo mismo que el método de arriba
console.table(Object.entries(objetito)); //*Devuelve un array, cada posición es otro array con las propiedades del objeto
console.table(Object.getOwnPropertyDescriptors(objetito)); //*Devuelve un objeto con las propiedades del objeto

//* Podemos modificar las propiedades del objeto

El método entries me hubiera sido muy util para una labor que tenía que hacer. Llegó 1 día tarde a mi vida 😦

🥶 Static: atributos y métodos estáticos en JavaScript

Ideas/conceptos claves

Los métodos estáticos son llamados sin instanciar su clase. Son habitualmente utilizados para crear funciones para una aplicación.

Recursos

Object.values() - JavaScript | MDN

Object.entries() - JavaScript | MDN

Object.getOwnPropertyDescriptors() - JavaScript | MDN

Apuntes

• Para acceder a una propiedad ya sea atributo o método de una clase sin necesidad de producir una instancia, la misma se puede crear campos estáticos.

class Patito {
	static sonidito = "cuack!";

	static hacerSonidito(){
		return "cuak!";
	}
}

console.log(Patito.sonidito)
// cuak!
console.log(Patito.hacerSonidito())
// cuak!

• Para poder crear campos estáticos solo debemos usar la palabra reservada static

🍳 Uso en el prototipo madre Object

• El prototipo Object cuenta con diferentes métodos estáticos que nos ayudan con el manejo de objetos.

const obj = {
	name: "Fernando",
	email: "[email protected]",
	age: 19
};

Object.keys(obj);
// ["name", "email", "age"]

Object.getOwnPropertyNames(obj);
// ["name", "email", "age"]

Object.entries(obj);
/* [
		0: ["name", "Fernando"],
		1: ["mail", "[email protected]"],
		2: ["age", 19]
*/

Object.getOwnPropertyDescriptors(obj);
/*
name: {
	configurable: true
	enumerable: true
	value: "Fernando"
	writable: true
}
*/

• Object.keys y Object.getOwnPropertyNames ⇒ Devuelve un array con los nombres llave del objeto mandado.
• Object.entries ⇒ Devuelve un array bidimensional en cada elemento contiene la llave y el valor de cada propiedad del objeto.
• Object.getOwnPropertyDescriptors ⇒ Devuelve un objeto con todas las propiedades del objeto inicial, dentro de este resultado se encuentran otros objetos especificando cada llave del objeto original.
  • Dentro de estos objetos se encuentran propiedades los cuales JavaScript usa para limitar el acceso y la modificación de nuestros objetos.

📌 **RESUMEN:** Un valor estático dentro de una clase, te permite acceder al mismo sin instancia dicha clase. El prototipo `Object` contiene una gran variedad de métodos estáticos que nos permiten la manipulación de objetos.

La palabra static define un método o propiedad estática en una clase. Los métodos estáticos son llamados desde la misma clase.

class Car {
  static brand = 'Tesla';
  static model = 'X'
  
  static printName() {
    return `${this.brand} ${this.model}`
  }
}

console.log(Car.brand) // 'Tesla'
console.log(Car.model) // 'X'
console.log(Car.printName()) // 'Tesla X'

Ni los métodos estáticos o propiedades estáticas pueden ser llamadas en una instancia de la clase.

class Car {
  static brand = 'Tesla';
  static model = 'X'
  
  static printName() {
    return `${this.brand} ${this.model}`
  }
}

console.log(Car.brand) // 'Tesla'
console.log(Car.model) // 'X'
console.log(Car.printName()) // 'Tesla X'

const myCar = new Car()

console.log(myCar.brand) // undefined
console.log(myCar.model) // undefined
console.log(myCar.printName()) // Uncaught TypeError: myCar.printName is not a function

Métodos estáticos de Object:

const person = {
  name: 'Zajith',
  lastName: 'Corro',
  age: 26
}

• Object.keys(): Retorna una array con los nombres de todas las propiedades enumerables del objeto.

Object.keys(person) // [ 'name', 'lastName', 'age' ]

• Object.getOwnPropertyNames(): Retorna un array con los nombres de todas las propiedades enumerables o no enumerables (excepto para las que usan Symbol) de un objeto.

Object.getOwnPropertyNames(person) // [ 'name', 'lastName', 'age' ]

• Object.entries(): Retorna un array con la forma [key, value] de las propiedades enumerables.

Object.entries(person) 

/* [
  [ 'name', 'Zajith' ],
  [ 'lastName', 'Corro' ],
  [ 'age', 26 ]
] */

• Object.getOwnPropertyDescriptors(): Retorna un objeto que contiene todas las propiedades de cada una de los propiedades.

Object.getOwnPropertyDescriptors(person) 
/*
{
  name: {
    value: 'Zajith',
    writable: true,
    enumerable: true,
    configurable: true
  },
  lastName: {
    value: 'Corro',
    writable: true,
    enumerable: true,
    configurable: true
  },
  age: {
    value: 26,
    writable: true,
    enumerable: true,
    configurable: true
  }
}
*/

mi aporte metodo estatico de js keys

//metodos estaticos de js

//objeto literal juan
const pedro = {
  name: 'pedro', //propiedades
  age: 20,
  approvedcourses: ['curso 0'],
  addcourse(newcourse){ //metodos
    this.approvedcourses.push(newcourse);
  }
};
console.log(pedro);

// metodo statico que nos devuelve los nombres de los atributos y metodos del objeto 
// Object.keys(Object a ver);

console.log(Object.keys(pedro));

Acceder a los valores con Object.values

Si con Object.keys podemos acceder a las claves, con Object.values podemos acceder a los valores. 😄

Sería así con el ejemplo que hemos visto:

const objetito = {
  name: "Juanito",
  email: "[email protected]",
  age: 18,
}

Object.keys(objetito);
// [ 'name', 'email', 'age' ]

Object.values(objetito);
// [ 'Juanito', '[email protected]', 18 ]

Documentación de MDN: https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Object/values

¡Espero que sirva! 😃

Mi aporte para la sección de métodos Static

espero les sirva a quienes no entendieron

class Persona1 { //clase 
  nombre() { //metodo
      return console.log('pedro');
  }
}

const saludar = new Persona1(); //instanciando la clase
saludar.nombre(); //llamando el metodo

//propiedades estaticas del los prototipos objetos

//un metodo estatico se pueden ejecutar sin necesidad de instaciar la clase

class Persona { //clase 
  static nombre() { //metodo
      return 'Juan';
  }
}
console.log(Persona.nombre());//llamamos directamente el metodo sin instanciar la clase

me gustan los cursos de Platzi aunque en varias ocaciones me dan dolor de cabeza y cuando entiendo me alegro demasiado

Como los permisos de usuario en unixlike, Interesante!

Asi se vería si se utiliza arrays y objectos como valores:

Y el out put seria algo mas o menos así:

Object methods
  Given: {
    a2: 11,
    b2: 22,
    c2: 33,
    d2: 44,
    e2: { f2: 66, g2: 77 },
    h2: 88,
    i2: [ 99, 1010, 1111 ]
  }
  .keys [
    'a2', 'b2',
    'c2', 'd2',
    'e2', 'h2',
    'i2'
  ]
  .getOwnPropertyNames [
    'a2', 'b2',
    'c2', 'd2',
    'e2', 'h2',
    'i2'
  ]
  .entries [
    [ 'a2', 11 ],
    [ 'b2', 22 ],
    [ 'c2', 33 ],
    [ 'd2', 44 ],
    [ 'e2', { f2: 66, g2: 77 } ],
    [ 'h2', 88 ],
    [ 'i2', [ 99, 1010, 1111 ] ]
  ]
  .getOwnPropertyDescriptors {
    a2: { value: 11, writable: true, enumerable: true, configurable: true },
    b2: { value: 22, writable: true, enumerable: true, configurable: true },
    c2: { value: 33, writable: true, enumerable: true, configurable: true },
    d2: { value: 44, writable: true, enumerable: true, configurable: true },
    e2: {
      value: { f2: 66, g2: 77 },
      writable: true,
      enumerable: true,
      configurable: true
    },
    h2: { value: 88, writable: true, enumerable: true, configurable: true },
    i2: {
      value: [ 99, 1010, 1111 ],
      writable: true,
      enumerable: true,
      configurable: true
    }
  }

// Static => Para crear atributos estáticos en los que podamos acceder sin crear un objeto o instancia de un prototipo se usa esta palabra.
class Patito {
    static sonidito = "cuak!";
}
console.log(Patito.sonidito); // cuak!

// Tambien funciona con los métodos:
class Patito {
    static hacerSonidito() {
        return "cuak!";
    }
}
console.log(Patito.hacerSonidito()); // cuak!

/* Métodos estáticos del super prototipo Object */
const Objetito = {
    name: "Uriel",
    email: "[email protected]",
    age: 23,
}
// El método estático "keys" del prototipo Object, nos devuelve una lista (array) con todos los nombres (keys) de nuestro objeto.
console.log(Object.keys(Objetito)); // [ 'name', 'email', 'age' ]

// Lo mismo pasa con el método estático "getOwnPropertyNames", con unas pequeñas diferencias.
console.log(Object.getOwnPropertyNames(Objetito)); // [ 'name', 'email', 'age' ]

// El método estático "entries" del prototipo Object, nos devuele un array de arrays y en cada uno de esos arrays, vamos a tener en la posición 0 el nombre (keys) y en la posición 1 el valor de esa keys.
console.log(Object.entries(Objetito));
/*
[
  [ 'name', 'Uriel' ],
  [ 'email', '[email protected]' ],
  [ 'age', 23 ]
]
*/

// El método estático "getOwnPropertyDescriptors" del prototipo Object, cuando le enviamos como un argumento a un objeto, nos va a devolver todas las propiedades de nuestro objeto en el nombre de nuestra propiedad que es un objeto que nos muestra varias atributos. Estos atributos es la forma que tiene JavaScript por dentro  para limitar el acceso o la modificación de nuestros atributos u objetos.
console.log(Object.getOwnPropertyDescriptors(Objetito));
/*
{
  name: {
    value: 'Uriel',
    writable: true,
    enumerable: true,
    configurable: true
  },
  email: {
    value: '[email protected]',
    writable: true,
    enumerable: true,
    configurable: true
  },
  age: { value: 23, 
    writable: true, 
    enumerable: true, 
    configurable: true 
  }
}
*/
// Con estas propiedades que obtenemos con este método estático podemos modificar estas propiedades para jugar o limitar quien tiene acceso, incluso quien puede modificar nuestros objetos.

¿Cuál sería la diferencia entre usar atributos estáticos y constructores?

Bueno considerando que los constructores son moldes de atributos predefinidos y los atributos estáticos. Lo más claro es que los constructores reciben valores dinámicos, mientras que los atributos estáticos no. ~Aunque si podría realizarse, creo, asignándole el valor de una variable de scope global~, sin embargo, creo que ese no sería el caso.

continuando con el ejemplo del patito, si quisieramos crear un objeto que se llame animales por ejemplo, creamos un constructor que se llame hablar, con consiguiente creamos una instancia de la clase que se llame patito y le asignamos su nombre hablar. Sin embargo, en el ejemplo que Juan propone no se necesitan más animales, por lo tanto, el patito y su sonidito sería inmutables por necesidad en cualquier situación porque el patito siempre haría el mismo sonido, por eso es mejor usar un atributo estático en lugar de un constructor en la clase patito.

Un método estático se construye simplemente indicando la palabra “static” antes del nombre del método que se está creando. El resto de la definición de un método estático sería igual que la definición de un método convencional, con la excepción de disponer de la variable “this” como habitualmente en los métodos

solo quiere decir que el metodo static no funciona en los prototipos de nuestro prototipos al igual el metodo getOwnPropertiesDescriptors

Mi aporte por los metodos estaticos de JS

//metodos estaticos de js

//objeto literal juan
const pedro = {
  name: 'pedro', //propiedades
  age: 20,
  approvedcourses: ['curso 0'],
  addcourse(newcourse){ //metodos
    this.approvedcourses.push(newcourse);
  }
};
console.log(pedro);

// metodo statico que nos devuelve en un array los nombres de los atributos y metodos del objeto 
// Object.keys(Object a ver);

console.log(Object.keys(pedro));

// metodo statico que nos devuelve en un array los nombres de los atributos y metodos del objeto
// Object.getOwnPropertyNames(Object a ver);

console.log(Object.getOwnPropertyNames(pedro));

// metodo statico que nos devuelve un array dentro de otro array con los atributos y metodos del objeto
// Object.entries(Object a ver);

console.log(Object.entries(pedro));
console.log(Object.entries(pedro)[3]);
console.log(Object.entries(pedro)[3][1]);

//metodo estatico que nos devuelve un objeto con propiedades escondidas de js de los metodos y atributos 
//que nos permite alterar el acceso al objeto.
// Object.getOwnPropertyDescriptors(Object a ver);

console.log(Object.getOwnPropertyDescriptors(pedro));

coloquen todos los videos de este curso a 0.85x

Object.entries() fue introducido cpon el ECMAScript 8, junto con Objet.values(), para referencia este curso

la base de todo lo que vamos hacer en el curso

Resumen de la clase en RunJS!

Al parecer algo no anda bien con los comentarios de la nueva versión:

Antes

Ahora

De los creadores de Object.getOwnPropertyDescriptors() llega Object.getOwnPropertyDescriptor()

const object1 = {
  property1: 42,
};

const descriptor1 = Object.getOwnPropertyDescriptor(object1, 'property1');

console.log(descriptor1.configurable);
// Expected output: true

console.log(descriptor1.value);
// Expected output: 42

Ejemplo tomado de la documentación

Uso bastante el método static y por fin profundizare en este método 😅

En JavaScript, los prototipos son un mecanismo fundamental para lograr la herencia y el reuso de propiedades y métodos en los objetos. Cada objeto en JavaScript tiene un enlace interno hacia otro objeto llamado “prototipo”, del cual hereda propiedades y métodos.

Apuntes de la clase 📝
Static: atributos y metodos
https://mriatorres.notion.site/Static-atributos-y-m-todos-f265f6c7b59346e4bc14a85cf8e8d7bd

Interesante el método

Object.getOwnPropertyDescriptors(obj)

Los métodos estáticos en JavaScript son métodos que pertenecen a una clase en lugar de una instancia individual de la clase. A diferencia de los métodos de instancia, los métodos estáticos no se pueden llamar en una instancia de la clase, sino que se llaman directamente en la clase en sí.

Los métodos estáticos se definen en la clase utilizando la palabra clave static. Estos métodos se pueden utilizar para realizar tareas que no están específicamente relacionadas con una instancia de la clase, como operaciones matemáticas, funciones auxiliares y verificaciones de tipo.

Mi resumen:

/*------------------Métodos y propiedades estáticas-------------------*/

//Una forma para acceder a propiedades y métodos sin instanciar a un prototipo es asignarles "static" antes del nombre de la propiedad y método en el prototitpo.

class Patito {
	static sonidito = "cuak!";

	static hacerSonidito() {
		return "cuak! x2";
	}
}

// Por fuera de clase Patito, podemos acceder a lo siguiente sin crear alguna instancia:
// Al atributo `sonidito`
console.log(Patito.sonidito) //cuak!

// Al método `hacerSonidito`
console.log(Patito.hacerSonidito()); //cuak! x2

// ### Método estático Object.getOwnPropertyDescriptors

//El prototipo padre Object tiene métodos estáticos como Object.keys, Object.entries, Object.getOwnPropertyDescriptors.
//Este último método devuelve un objeto con los atributos de nuestro objeto inicial.
//Cada atributo contiene un objeto con el valor correspondiente a dicha propiedad, además de 3 propiedades adicionales: writable, configurable y enumerable.
//Estas 3 propiedades son usadas por JavaScript internamente para indicar el límite de acceso y modificación que tiene un objeto.

const objetito = {
    name: "Juanito",
    email: "[email protected]",
    age: 18,
}

console.log(Object.getOwnPropertyDescriptors(objetito));

/*
Output:
{
    name: {
        value: 'Juanito',
        writable: true,
        enumerable: true,
        configurable: true
    },
    email: {
        value: '[email protected]',
        writable: true,
        enumerable: true,
        configurable: true
    },
    age: {
        value: 18,
        writable: true,
        enumerable: true,
        configurable: true
    }
}
*/

Como sugerencia, deberían utilizar ejemplos más prácticos y cercanos al ambiente laboral a la hora de realizar y dar ejemplos, pienso que sería más fácil de transmitir la importancia de lo que estamos aprendiendo además de compartir buenas prácticas a la hora de nombrar variables o en este caso objetos, clases, métodos etc.
La verdad me hace perder interes ver ejemplos con patito, cuack … que laboralmente no sirven para nada.

Platzi debería vender su merch a sus alumnos… digo

Quiero compartir este video el cual me ayudo a entender mas, espero que les sirva tanto como a mi.

patito sonidoto juanito objetito … parece que es estandar ponerle ito a todo

¿Por qué hablamos de instancias y metodos estaticos si el ejemplo fue con un Objeto Literario llamado objetito ?
. Se supone que los objetos literarios no se puede instanciar