Clases en JavaScript

Classes are only syntactical sugar for constructor functions. Everything still works the same way!

PATRÓN “RORO”

El patrón que menciona JuanDC se llama “RORO” del Inglés “Receive an object, return an object” (Recibe un objeto, devuelve un objeto).

Nos ayuda cuando tenemos muchos parámetros en nuestro constructor, ya que al instanciar la clase debemos acordarnos del orden de los parámetros y, además, no podemos tener parámetros por defecto.

No obstante, si recibimos un objeto, sí podemos poner parámetros por defecto y no recibir un parámetros si fuere el caso, sin que pase nada.
A la hora de enviar los argumentos al instanciar la clase, también debe enviarse un objeto, y otra ventaja es que esos argumentos no hace falta que estén en el mismo orden que están los parámetros del constructor. ¡Prácticamente son todo ventajas! 😃

Me ha encantado aprender este patrón ¡Gracias, profe!

Os dejo un link con documentación sobre le patrón RORO (está en Inglés) -> https://www.freecodecamp.org/news/elegant-patterns-in-modern-javascript-roro-be01e7669cbd/

¡Ánimo y a seguir aprendiendo JavaScript! 😄

Quede asombradísimo en como escribía en 2 partes a la vez y como movía líneas, lo busque y encontré que era así

Escribir en varios lados a la vez
alt + click

Mover una línea hacia arriba y abajo
alt + flecha hacia arriba (o flecha hacia abajo)

Copiar una línea hacia arriba o abajo
alt + shift + flecha hacia arriba (o flecha hacia abajo)

Borrar una línea completa a la vez
shift + supr

Habia escuchado la explicacion de que en javascript no hay clases sino prototipos mil veces y nunca lo entendi, hasta ahora.

Nadie: …🦗
Javascript: Bueno los objetos, prototipos y clases son muy diferentes, acá tienen una foto donde lo pueden ver

Clases

En ES2016, ahora podemos usar la palabra clave Class , así como los métodos mencionados anteriormente para manipular el prototype. Las clases de JavaScript son atractivas para los desarrolladores con experiencia en programación orientada a objetos, pero esencialmente hace lo mismo que el anterior.

class Rectangle {
  constructor(height, width) {
    this.height = height
    this.width = width
  }

  get area() {
    return this.calcArea()
  }

  calcArea() {
    return this.height * this.width
  }
}

const square = new Rectangle(10, 10)

console.log(square.area) // 100

Esto es básicamente lo mismo que:

function Rectangle(height, width) {
  this.height = height
  this.width = width
}

Rectangle.prototype.calcArea = function calcArea() {
  return this.height * this.width
}

Los métodos getter y setter en las clases vinculan una propiedad Object a una función que será llamada cuando se busque esa propiedad. Esto es solo azúcar sintáctico para ayudar a que sea más fácil buscar o establecer propiedades.

Pense en saltarme este curso porque segun yo ya dominaba el tema…NOT.
Gracias JDC, muy buena explicacion!

Entonces eso de usar clases es simplemente sintaxis diferente, interesante 😮

//* Prototipos con sintaxis de clases

class Alumno {
  constructor({
    name,
    age,
    cursosAprobados = [], //* Por defecto el parámetro tiene un valor vacío
    email,
  }) {
    this.name = name
    this.age = age
    this.cursosAprobados = cursosAprobados
    this.email = email
  }

  aprobarCurso(nuevoCursito) {
    this.cursosAprobados.push(nuevoCursito)
  }
};

const patricia = new Alumno({
  name: 'Patricia',
  age: 21,
  cursosAprobados: ['Cocina'],
  email: '[email protected]'
});

Las Clases son una forma mas bonita de crear prototipos. 😄

📮 Clases en JavaScript

Apuntes

• Las clases en JavaScript son una sintaxis muy parecida las clases que utilizaríamos en otros lenguajes
• Si bien recibíamos los parámetros por la función en la sintaxis de clases las recibimos mediante el método constructor

class Student2 {
  constructor(name, age, cursosAprobados) {
    this.name = name;
    this.age = age;
    this.cursosAprobados = cursosAprobados;
  }
}

• En caso de querer agregar un nuevo método podemos agregarlo tanto como si fuera una propiedad y la otra forma es agregar los métodos entre las llaves de la clase

class Student2 {
  constructor(name, age, cursosAprobados) {
    this.name = name;
    this.age = age;
    this.cursosAprobados = cursosAprobados;
  }

  aprobarCurso(nuevoCursito) {
    this.cursosAprobados.push(nuevoCursito);
  }
}

• Para crear una instancia se realiza de la misma manera que una instancia de un prototipo

const obj = new Clase();

📌 **RESUMEN:** Una clase en JavaScript no es más que una sintaxis en algunos casos más cómoda para crear prototipos. Está basada en otros lenguajes los cuales tienen programación orientada a objetos mediante clases.

Wow de verdad antes no entendia esto de que las clases no existen en JS hasta ahora 😃

Patron RORO:

GRACIAS JUAN!! Tus clases son las mejores ❤️

Hay un patrón interesante en todo esto respecto a RORO. Si bien es bastante útil directamente recibir un objeto, el problema termina siendo el mismo a la larga porque imaginate que por cada nueva llave que introduzcas en el objeto tengas que además modificar tu constructor y sus propiedades. La verdad es que es mucho mas interesante si creas un atributo params que sea un Object Literal y lo iteras para hacer una asignación:

class Student2 {
  constructor({ name, age, approved = [] }, params) {
    this.name = name;
    this.age = age;
    this.approvedCourses = approved;

    if (params && Object.keys(params).length) {
      for (const param in params) {
        if (Object.hasOwnProperty.call(params, param)) {
          const item = params[param];
          this[param] = item;
        }
      }
    } 
  }

  approveCourse(course) {
    this.approvedCourses.push(course);
  }
}

const natalia = new Student2({
  name: 'Natalia',
  age: 20
}, {
  sexo: 'F',
  twitter: 'twitter.com/natalia',
  foo: 'bar'
});

Y listo, ahora tenemos una serie de parámetros básicos que podemos definir con algún default, y luego una serie de parámetros opcionales que podemos definir libremente dentro de un objeto que serán asignados a nuestra instancia.

La clase recibe un solo parámetro, un objeto. En nuestro objeto declaramos un array vacío por defecto para la lista de cursos aprobados.

class Student {
    constructor({name, age, email, approved = []}){
        this.name = name;
        this.age = age;
        this.email = email;
        this.approved = approved;
    }
    addApproved(curso){
        this.approved.push(curso);
    } 
}
const alexander = new Student({
    name: "Alexander", 
    age: 21, 
    email: "[email protected]",
});

Con ES6 + en vez de escribir

this.name = name;

se puede utilizar solo

name

Personalmente me agrada mucho la sintaxis con clases, ya que se parece mucho a la de otros lenguajes como Java o Python. A pesar de que son solo sugar syntax de los prototipos.

The feynman technique: Explicale a un nene de 5 años y crea metaforas para guardar la inforamcion a largo plazo.

Supongamos que queremos hacer 🍪, El molde es Circular pero sin la base.

• constructor({}) El constructor es el molde circular sin la base nos permite ingresar las propiedades para hacer las galletitas(como la pasta)
• this.name = name; Esta seccion es aun mas importante, esta es la base es decir, nos dimos cuenta que no podemos hacer las galletitas sin la base porque se nos cae la pasta****.**** Entonces la base = almacenamiento. Esto es el almacenamiento de las propiedades(pasta) de la instancia(galletitas).

Hay una diferencia entre prototipos normales y clases. Si tu tratas de instanciar un objeto Student con una clase antes que es esta clase sea declarada, te saldrá el siguiente error:

ReferenceError: Cannot access 'Student' before initialization

Eso no pasa con prototipos. El hoisting se aplica diferente

JavaScrip es tan potente que puede trabajar tanto con prototipos como clase

JavaScript por naturaleza trabaja con prototipos

Las clases en Java (Java Class) son plantillas para la creación de objetos. Como tal, la clase forma la base para la programación orientada a objetos en Java, la cual es una de los principales paradigmas de desarrollo de software en la actualidad.

que bonito conocer como funciona este lenguaje a fondo.

Buenas a todos, Esto es para aquellos que se quedaron con la duda de como aplicar el RORO:

Pasos a seguir dentro de los parentesis del constructor de la clase:
1.Poner las llaves que representan a un objeto dentro de los parentesis del constructor.
2.Dentro de las llaves del objeto que estan adentro del constructor pondremos los parametros.

ejemplo:
class Student{ constructor({ name, age, etc.. }) }

Razon de porque estamos haciendo esto:

  Se hace de esta manera ya que asi tendriamos un solo 		parametro dentro del constructor y lo que antes eran los parametros se convertiran en propiedades del objeto. 

Pasos a seguir en la nueva intancia:
1.Pondremos las llaves que representan a un objeto en los parentesis de la nueva instancia
2.Escribiremos los argumentos dentro de las llaves del objeto, se deben de escribir como propiedades del objeto.

	ejemplo: 
			```
			const miguelito = new Student({
			name: 'Miguel',
			age: 20,
			etc..
			})
			```

Beneficios de esta tecnica:
No importara el orden en que pongamos los valores de la nueva instancia. De esta manera evitaremos muchos errores posibles.

Diferencia entre Argumento y parametros:
Los parametros son el valor general de lo que podrias mandar mientras que el argumento seria el valor mandado .

ejemplos: 
	parametro(nombre) = argumento(Miguel)
	parametro(metas) = argumento(Alcanzar la cima del exito, por multiples razones)
	parametro(edad) = argumento(20)
	parametro(cantidad de tiempo que estudia en platzi) = argumento(8 hrs, los 7 dias)
	parametro(estudia) = argumento(ingenieria en software)

Ojala que a alguien le sea util y recuerden ustedes pueden, solo es que necesitamos disciplina y no desesperarnos. Se lo dice alguien que fue tan ingenuo que penso acabaria en tres meses y ya llevo mas de dos años. animoooooo

Los prototipos dominarán el mundo

Lo que entiendo es que esta implementación nueva con class viene para ser un poco mas amigable con las funciones constructoras pero todo sigue funcionando de la misma forma. 😮

Juan es un capo explicando. Muy bien

Clases en JavaScript
Las clases son en realidad prototipos de JavaScript, azúcar sintáctica para hacer más amigable para trabajar con prototipos.

class studentWithClass {
    constructor (name, age, approvedCourse) {
        this.name = name;
        this.age = age;
        this.approvedCourse = approvedCourse;
    }

    passCourse () {
        this.approvedCourse.push(newCourse);
    }
}
// Instanciar objeto a partir de una clase 
const arthur = new studentWithClass (
    'Arthur Licona',
    38,
    [
    'Introducción a la POO', 'POO con JavaScript', 'JavaScript Practico', 'Manupulación de DOM'
    ],
)

Les dejo mi código de la clase:

class Student {
  constructor({ name, age, approvedCourses, email }) {
    this.name = name;
    this.age = age;
    this.email = email;
    this.approvedCourses = approvedCourses;
  }

  approveCourse(course) {
    this.approvedCourses.push(course);
  }
}

const JUAN = new Student({
  name: 'Juan David Castro',
  age: 18,
  email: '[email protected]',
  approvedCourses: [
    'Cómo Conseguir Trabajo en Programación',
    'Curso Básico de Programación Orientada a Objetos con JavaScript',
  ],
});

console.log(JUAN);

Tambien les dejo mi repositorio del curso: https://github.com/UltiRequiem/oop-js-platzi 😃

El profe juan es increíblemente bueno explicando, sabe como hacer para que no te aburras

AQUÍ EL RESUMEN:

CREAR PORTOTIPOS CON LA SEINTAXIS DE CLASES

La sintaxis de clases en JavaScript se introdujo en ECMAScript 2015 (también conocido como ES6) y es una forma más conveniente de definir clases y trabajar con herencia en comparación con la antigua forma de prototipos

class student2 {
  constructor (name, age, cursosAprovados ){
    this.name = name;
    this.age = age;
    this.cursosAprovados = cursosAprovados;
  }

  aprovarCursos(nuevoCursito){
    this.cursosAprovados.push(nuevoCursito)
  }
}

const  miguelito = new student2("miguel", 22 , "ni el bachillerato aprovó")

1. Constructor:
   • El método constructor es un método especial dentro de una clase que se ejecuta automáticamente cuando se crea una nueva instancia de la clase.
   • En tu clase student2, el constructor acepta tres parámetros (name, age, y cursosAprovados) y asigna esos valores a las propiedades correspondientes de la instancia actual (usando this).
2. Método aprovarCursos:
   • Has definido un método llamado aprovarCursos en tu clase student2.
   • Este método acepta un parámetro (nuevoCursito) y lo agrega al array cursosAprovados de la instancia actual.
3. Instancia de la clase:
   • Al final, has creado una instancia de la clase student2 llamada miguelito mediante const miguelito = new student2("miguel", 22, "ni el bachillerato aprovó").
   • Le has proporcionado valores iniciales para name, age, y cursosAprovados durante la creación de la instancia.

En cuanto a tu pregunta sobre por qué el método no se hace como un prototipo, en realidad estás utilizando la sintaxis de clases, que proporciona una manera más declarativa de definir métodos y propiedades. Sin embargo, internamente, todavía se están utilizando los prototipos de JavaScript.

En la antigua forma de trabajar con prototipos, el método aprovarCursos se habría agregado al prototipo de la función constructora, y todas las instancias compartirían ese mismo método desde el prototipo. Con la sintaxis de clases, esto se maneja de manera más legible y orientada a objetos.

En resumen, tu código utiliza la sintaxis de clases de JavaScript para definir una clase student2 con un constructor y un método. La instancia miguelito se crea utilizando esta clase, y puedes acceder y manipular sus propiedades y métodos de manera más clara y estructurada.

CREANDO LO SPARAMETROS DE CON OBJETOS

Lo que estás viendo en el código es una técnica llamada “desestructuración de objetos” utilizada en el constructor de la clase student2. La desestructuración de objetos es una característica de JavaScript que permite extraer propiedades específicas de un objeto y asignarlas a variables individuales.

class Student2 {
  // Constructor de la clase que utiliza la desestructuración de objetos como parámetro
  constructor({
    name,  // Extraer la propiedad 'name' del objeto
    age,   // Extraer la propiedad 'age' del objeto
    cursosAprovados  // Extraer la propiedad 'cursosAprovados' del objeto
  }) {
    // Asignar las propiedades extraídas a las propiedades de la instancia
    this.name = name;
    this.age = age;
    this.cursosAprovados = cursosAprovados;
  }
}

// Ejemplo de creación de una instancia de la clase utilizando un objeto como argumento
const miguelito = new Student2({
  name: "Miguel",
  age: 22,
  cursosAprovados: ["Curso1", "Curso2"]
});

// Ahora, miguelito tiene las propiedades asignadas según el objeto proporcionado
console.log(miguelito.name); // "Miguel"
console.log(miguelito.age);  // 22
console.log(miguelito.cursosAprovados);  // ["Curso1", "Curso2"]

En este caso, el constructor de la clase Student2 espera un objeto como parámetro. Este objeto debe tener propiedades llamadas name, age, y cursosAprovados. Al crear una instancia de la clase, proporcionas un objeto con estas propiedades. La desestructuración de objetos en el constructor extrae automáticamente esas propiedades del objeto proporcionado y las asigna a las variables correspondientes en el contexto del constructor.

En resumen, esta técnica hace que la creación de instancias sea más flexible y legible, ya que puedes proporcionar propiedades en cualquier orden y no estás limitado al orden en que se definen en el constructor.

La desestructuración de objetos utilizada en el constructor de la clase ofrece varias ventajas:

1. Claridad y legibilidad del código:
   • Al utilizar la desestructuración de objetos, el código se vuelve más claro y legible, ya que puedes ver claramente qué propiedades se esperan en el objeto sin tener que revisar la implementación del constructor.
2. Flexibilidad en el orden de los argumentos:
   • Puedes proporcionar las propiedades en cualquier orden al crear una instancia de la clase. Esto es útil cuando tienes objetos con muchas propiedades y no quieres depender del orden en que se definen en el constructor.
3. Facilita la omisión de propiedades:
   • Si alguna propiedad es opcional, puedes omitirla en el objeto proporcionado al crear la instancia. Esto permite una creación de instancias más flexible, ya que no es necesario proporcionar todas las propiedades si algunas de ellas tienen valores predeterminados o son opcionales.
4. Compatibilidad con valores predeterminados:
   • Puedes asignar valores predeterminados a las propiedades del objeto directamente en la firma del constructor, lo que proporciona un manejo sencillo de los casos en los que algunas propiedades pueden no estar presentes en el objeto proporcionado.
5. Mejora la mantenibilidad:
   • Cuando la estructura de la clase cambia y se agregan o eliminan propiedades, no es necesario modificar todos los lugares donde se crean instancias de la clase. La desestructuración de objetos permite que el código siga siendo válido incluso si la estructura interna de la clase cambia.

Recomendaciones

1. Orden

Tan bonito que es el orden y en los cursos el profe Juan se lo pasa por los 🥚🥚🐣😥 una verdadera lástima. Para mí, al explicar algo se debe tener muy en cuenta el orden para tener mayor comprensión de cada tema. Si metes todo en un mismo archivo, todo se hace engorroso, tedioso, aburrido, estresante…

2. Ajuste de líneas

Es incómodo ver un curso cuando tiene líneas que sobrepasan el espacio del editor, esto oculta la información que se está mostrando o tratando de explicar, esto lo veo incluso en cursos actuales, tal parece que aún no conocen el "editor.wordWrap": "on", en los settings de VSC, bueno, se los presento 😅.

"editor.wordWrap": "on", 👈👀

Provengo del lenguaje Java, por lo que la idea de clases y objetos no es extraña para mí. Pero esta forma de crear el constructor, con el patrón RORO, me recuerda a los parámetros nombrados del lenguaje Dart.

Una clase también puede tener parámetros por defecto sin aplicar RORO

La sintaxis utilizada en el constructor de la clase Student se conoce como “destructuring assignment” o “asignación por desestructuración” en español.

Se utiliza esta sintaxis para permitir que el objeto que se pasa como argumento al constructor se pueda desestructurar y asignar los valores de sus propiedades a variables individuales. Esto hace que el código sea más legible y fácil de entender.

Además, al utilizar esta sintaxis se pueden establecer valores predeterminados para las propiedades del objeto que se pasa como argumento. En el ejemplo, se establece el valor predeterminado de cursosAprobados como un array vacío.

Lo cool es que puedes utilizar la misma sintaxis de los prototipos para añadir métodos a las instancias:
\

class Dog {
	constructor(name, power) {
		this.name = name;
		this.power = power;
	}
	miau() {
		console.log(`I'm ${this.name} and I'm a dog and I don't "miau". I have the power of ${this.power}`);
	}
}

const skill = new Dog("Skill", "The Force");
console.log("Class:", Dog, "instance:", skill);
skill.notFromProto = "Not from .prototype";
console.log(skill);

skill.miau();
Dog.prototype.withProto = function () {
	console.log("Now class with proto,", this.name);
}
skill.withProto();

Dog.prototype.notRecommended = function () {
	console.log(`Now, I will be referencing something that only exist in Skill: ${this.notFromProto}`);
}
const value = new Dog("Value", "Super bark");
skill.notRecommended();
value.notRecommended();

Mi mundo se iluminó!!! ❤️

Las clases son una sintaxis mas amigables para trabajar con prototipos, es decir las clases por dentro son prototipos en Javascript con una sintaxis muy parecida a los lenguajes basados en programacion orientada a objetos

Según la definición de la tecnología, esta es utilizada para satisfacer las necesidades de las personas, incluyendo facilitar el trabajo.
Entonces si bien la sintaxis de clase es lo mismo que la sintaxis original, que es como trabaja JS, esta ayuda a facilitar la forma de trabajar con objetos.
Por lo que a mi punto de vista es mejor trabajar de esta manera, pero también es necesario comprender cómo funciona realmente algo.
Sin embargo no importa la forma en que lo hagas, lo importante es que sepas cómo funciona y hacerlo bien.

class Materia{
    constructor({
        nombre,
        maxEstudiantes,
        listaEstudiantes=[],
        profesor = null,
    }){
        this.nombre= nombre;
        this.maxEstudiantes= maxEstudiantes;
        this.listaEstudiantes = listaEstudiantes
        this.profesor=profesor;
    }

    inscribirEstudiante(estudiante){
    
        if (this.listaEstudiantes.length<this.maxEstudiantes && this.listaEstudiantes.includes(estudiante)==false){
            this.listaEstudiantes.push(estudiante);
        }else{
            console.log("El estudiante ya esta inscrito");
        }
    }

    retirarEstudiante(estudiante){
        let posicion;
       for (const estudiante in this.listaEstudiantes) {
           if(estudiante==this.listaEstudiantes[estudiante]){
            posicion=parseInt(estudiante);
           }
           
        }

        this.listaEstudiantes.splice(posicion,1);
    }
}

Excelente clase, se aprende un montón y más con la forma en que Juan hace ver las cosas.

Aqui esta mi codigo de esta clase:

// Little Platzi
class AnotherStudent {
	constructor(namer, ager, coursesApproved, email = '@social') {
		this.name = namer;
		this.age = ager;
		this.coursesApproved = coursesApproved;
		this.email = email;
	}

	approveCourse(course) {
		this.coursesApproved.push(course);
	}
}

class Student {
	constructor({namer, ager, coursesApproved, email = '@social'}) {
		this.name = namer;
		this.age = ager;
		this.coursesApproved = coursesApproved;
		this.email = email;
	}

	approveCourse(course) {
		this.coursesApproved.push(course);
	}
}

const anotherWalker = new AnotherStudent('Walker', 24, ['Are you ok, Annie', 'Smooth Criminal']);
const walker = new Student({ email: "[email protected]", namer: 'Walker', ager: 33, coursesApproved: ['Are you ok, Annie', 'Smooth Criminal']});

ayuda mucho mandar en objeto como parámetro a nuestra clase XD

Esto es una característica relativamente nueva de JS, ¿No?

Excelente profesor, muy esmerado en explicar al detalle!

Buen dia campeon… excelente explicacion, gracias…

el patron de programacion, no se si lo escribi bien, si alguien sabe la correcta escritura por twitter.

class Student2 {
    constructor({
        name,
        age,
        approvedCourses,
        email,
        facebook = "",
        twitter = "",
        instagram = "",
    }) {
        this.name = name
        this.age = age
        this.approvedCourses = approvedCourses,
        this.email =  email
        this.facebook = facebook
        this.twitter = twitter
        this.instagram = instagram
    }
    approveCourse(newCourse) {
        this.approvedCourses.push(newCourse)
    }
}

// Creando una nueva instancia de la clase Student2
const miguel = new Student2({
    name: "Miguel",
    age: 20, 
    email: "[email protected]",
    approvedCourses: [
        "Curso 1",
        "Curso 2",
        "Curso 3",
        "Curso 4",
    ],
})

miguel.approveCourse("Curso 5")

Class

estara todo ese codigo en github

¡Pequeño cambio! 😊

__proto__

[[Prototype]]

Luego de conocer RORO en esta clase:

Les dejo mi resumen de las clases
https://www.notion.so/Curso-B-sico-POO-JS-8b1ae724db364a06b5cac3055526c7b1