Andrés Felipe Eslava Zuluaga
Juan Sebastian Espínola
Jajajajajaja es buenísimo
Julio Loarte Huerto
jajajajaj preciso
¿Qué son las clases en JavaScript?
JavaScript, a pesar de ser un lenguaje orientado a objetos, no utiliza clases como la mayoría de los lenguajes orientados al mismo paradigma. De hecho, está basado en prototipos. Las clases en JavaScript son una sintaxis más amigable para manejar prototipos, adaptándose así a las costumbres de otros lenguajes con clases tradicionales.
Funciones de las clases de JavaScript
Cuando creamos una clase en JavaScript, usamos la palabra reservada class. En su interior, utilizamos el método constructor para inicializar los atributos del objeto. Este método se ejecuta automáticamente cuando creamos una instancia de la clase. Las clases nos permiten definir métodos que podemos utilizar con nuestras instancias, lo que facilita el trabajo con objetos.
class Student2 { constructor(name, age, approvedCourses) { this.name = name; this.age = age; this.approvedCourses = approvedCourses || []; } aprobarCurso(nuevoCurso) { this.approvedCourses.push(nuevoCurso); } }
Creación y manipulación de instancias
Para crear una instancia de una clase en JavaScript, utilizamos la palabra clave new, tal como lo haríamos en otros lenguajes de programación orientada a objetos. Esto nos permite instanciar y manipular objetos de manera intuitiva y estructurada.
const miguelito = new Student2("Miguel", 28, ["Curso de análisis de negocios", "Principios de visualización de datos"]); miguelito.aprobarCurso("Tablón");
¿Cómo usar objetos en los parámetros de funciones?
En la programación en JavaScript, existe un patrón llamado "ROR" (recibir un objeto, retornar un objeto). Este enfoque facilita la manipulación y la expansión de parámetros en nuestras funciones, enviando un único objeto con diversas propiedades en vez de múltiples parámetros.
Parámetros como objetos
Al usar objetos como parámetros, se simplifica la extensión de las funcionalidades al no depender del orden de los argumentos. Esta técnica también permite establecer valores por defecto para ciertos atributos.
class Student2 { constructor({name, age, email, approvedCourses = []}) { this.name = name; this.age = age; this.email = email; this.approvedCourses = approvedCourses; } aprobarCurso(nuevoCurso) { this.approvedCourses.push(nuevoCurso); } } const miguelito = new Student2({ name: "Miguel", age: 28, email: "miguelito@platico.com" });
Al emplear esta estructura, se obtiene la flexibilidad de definir el orden de propiedades como se desee y añadir nuevas sin alterar el funcionamiento del código existente.
Ventajas del uso de clases en JavaScript
El recorrido de JavaScript con respecto a las clases expande nuestra comprensión del lenguaje al proporcionar herramientas potentes y flexibles para trabajar con objetos. Explorando estas funcionalidades, se pueden crear aplicaciones más eficientes y adaptables a diversos entornos de programación. ¡Sigue explorando el mundo de JavaScript y descubre las infinitas posibilidades que te brinda este versátil lenguaje!
Andrés Felipe Eslava Zuluaga
Juan Sebastian Espínola
Jajajajajaja es buenísimo
Julio Loarte Huerto
jajajajaj preciso
Obed Paz
Classes are only syntactical sugar for constructor functions. Everything still works the same way!
Fabian Gutierrez
best gift!!!
Reinaldo Mendoza
Tremendo resumen de la clase
Mario Barceló Sospedra
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! 😄
Ricardo Alfonso Chavez Vilcapoma
Observación: Si podemos tener parametros por defecto en una clase sin RORO.
Fredy Gutiérrez Vazquez
Gracias por la info
Sebastián Andrés Sanhueza Tapia
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
Diego Ojeda Rivera
mesirve.jpg
Dario Paladines
Otro dato mas para poder alargar tu cursor las líneas que quieras ctrl + alt + flecha (arriba o abajo) pruébenlo antes que explicarles jeje
Carlos Mazzaroli
Nadie: ...🦗 Javascript: Bueno los objetos, prototipos y clases son muy diferentes, acá tienen una foto donde lo pueden ver
Erik Emmanuel Navarrete Reyes
jajajaja
Beder Danilo Casa Condori
clase goku
José Gregorio Estrada Meneses
Anfernee Valera
Gracias por tu aporte. Es Importante acotar que la Introducción de las clases fue en ES6, o en ECMAScript 2015, que viene siendo lo mismo.
Hector Jimenez
Pense en saltarme este curso porque segun yo ya dominaba el tema…NOT. Gracias JDC, muy buena explicacion!
Eliaz Bobadilla
Sabia elección xD
Beder Danilo Casa Condori
siempre se aprende algo nuevo
Miguel Angel Reyes Moreno
Entonces eso de usar clases es simplemente sintaxis diferente, interesante :o
//* 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: 'patricia@gmail.com' });
Jesús Briceño
Si, son las cosas que llaman "sugar sintax", así como el async y await para las promesas, son lo mismo pero usando una sintaxis más amigable.
📮 Clases en JavaScript
Apuntes
constructorclass Student2 { constructor(name, age, cursosAprobados) { this.name = name; this.age = age; this.cursosAprobados = cursosAprobados; } }
class Student2 { constructor(name, age, cursosAprobados) { this.name = name; this.age = age; this.cursosAprobados = cursosAprobados; } aprobarCurso(nuevoCursito) { this.cursosAprobados.push(nuevoCursito); } }
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.
Jeffer Steven Nuñez Aragon
Las Clases son una forma mas bonita de crear prototipos. :D
Gustavo Adolfo Perez Ramos
Wow de verdad antes no entendia esto de que las clases no existen en JS hasta ahora :)
Andres Alvarez Becerra
Hola, una pregunta, ¿Por buenas pracitcas es mejor usar la sintaxis de clase o la de prototipo?
Carlos Zabala Roqueme
Como se comento en los videos, la sintaxis de clase es mucho más amigable de implementar, así que es más utilizada, es una forma de "emular" por decirlo así, el manejo de las clases que se da en otros lenguajes de programación.
Juan Castro
ProfesorSolo son dos sintaxis diferentes a nuestra disposición. No es una buena ni mala práctica usar ninguna de las dos. Podemos seguir buenas o malas prácticas con cualquiera de las dos.
Stiven Andres Medina Lopez
Patron RORO:
edgar zambrano
gracias muy claro el ejemplo y de mucha utilidad
Rocio Salgado
GRACIAS JUAN!! Tus clases son las mejores <3
Javier Marin
Juan Castro
ProfesorMe gusta :clap:
Jesús Velázquez Jiménez
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: "alexander@mail.com", });
Carlos Dugarte
Con ES6 + en vez de escribir
this.name = name;
se puede utilizar solo
name
Sebastián Olaya Escobar
No se porqué, pero no me funciona :(
Ricardo Alfonso Chavez Vilcapoma
Eso solo es en objetos literales, cuando una propiedad tiene el mismo nombre que su valor. Por ende no funciona en clases.
Pedro Alvarado Garcia
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.
Ariel Ezequiel Biazzo Genua
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).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.
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.