¿Cómo crear objetos literales en JavaScript y qué ventajas ofrecen?
Cuando comienzas a programar en JavaScript, una de las primeras estructuras de datos que aprendes a manejar son los objetos literales. Un objeto literal es una simple lista de pares clave-valor que crea un objeto con ciertas propiedades directamente, sin la necesidad de una clase.
Simplicidad: Proporcionan una forma rápida y fácil de encapsular datos y comportamientos relacionados, lo cual es ideal para objetos que no requieren mucha funcionalidad.
Accesibilidad: Con un objeto literal, todo está en un solo lugar, lo que hace más sencillo acceder y modificar propiedades directamente.
Estructura de datos versátil: Los objetos literales pueden contener strings, números, arrays o incluso otros objetos.
Ejemplos de creación de objetos literales
Consideremos este ejemplo básico para crear un estudiante en Platzi:
const juan1 ={nombre:"JuanDC",username:"juandc",platziRank:100,socialMedia:{twitter:"fjuandc",instagram:"fjuandc",facebook:undefined},approvedCourses:["Curso Definitivo de HTML y CSS","Curso Práctico de HTML y CSS"],learningPaths:[{nombre:"Escuela de Desarrollo Web",courses:["Curso Definitivo de HTML y CSS","Curso Práctico de HTML y CSS","Curso de Responsive Design"]},{nombre:"Escuela de Videojuegos",courses:["Introducción a la Producción de Videojuegos","Curso de Unreal Engine","Curso de Unity 3D"]}]};
¿Cuáles son las limitaciones de los objetos literales?
Si bien los objetos literales son efectivos para estructuras simples de datos, presentan ciertas limitaciones cuando el proyecto crece o se vuelve más complejo:
Redundancia de código: Cuando se requiere crear múltiples objetos similares, es necesario repetir mucho código.
No escalabilidad: A medida que crece el número de estudiantes, gestionar cambios se vuelve complicado y propenso a errores. Por ejemplo, si se agrega un nuevo curso a una ruta de aprendizaje, debes cambiar cada objeto manualmente.
Falta de encapsulamiento y reutilización: Los objetos no permiten el uso de herencia, encapsulamiento o reutilización de comportamiento, lo que significa que no pueden aprovechar completamente los principios de la Programación Orientada a Objetos (POO).
¿Cómo se usan las clases para crear instancias en JavaScript?
Para solucionar las limitaciones de los objetos literales, JavaScript ofrece las clases, una característica más reciente que permite la reutilización y escalabilidad de código mediante la creación de múltiples instancias a partir de una plantilla de clase.
Ejemplo de clase Student
Crear clases te permite definir una estructura de datos y comportamiento funcional para objetos similares. Aquí tienes un ejemplo de cómo crear una clase Student:
Reutilización del código: Solo es necesario definir una estructura de clase una vez, y luego instanciarla las veces que sea necesario.
Facilidad de expansión: Permite agregar y modificar propiedades o métodos, aplicando el concepto de herencia.
Código limpio y mantenible: Al simplificar la creación de objetos, se mejora la legibilidad y mantenibilidad del código.
¿Por qué usar programación orientada a objetos?
La programación orientada a objetos (OOP) es más que solo escribir menos líneas de código; permite estructurar tus datos de una manera que es más cercana a cómo piensas sobre modelos del mundo real.
Abstracción: Oculta los detalles complejos y expone solo lo necesario.
Encapsulamiento: Protege los datos del acceso desde el exterior de la clase mediante la definición de métodos públicos y privados.
Herencia: Permite la creación de nuevas clases basadas en clases existentes.
Polimorfismo: Habilidades para usar métodos multiusos en diferentes contexts.
Animo a que sigas explorando más sobre este poderoso paradigma de programación, adoptando mejores prácticas que comparten las industrias de tecnología actuales y haciéndote un programador más eficiente y efectivo.
classCourse{constructor({ id, name, teacher, lessons =[],}){this.id= id;this.name= name;this.teacher= teacher;this.lessons= lessons;}}classLearningPath{constructor({ id, name, courses =[],}){this.id= id;this.name= name;this.courses= courses;}addCourse(course){this.courses.push(course);}replaceCourse(oldCourse, newCourse){const oldCourseIndex =this.courses.findIndex(course=> course.id=== oldCourse.id);if(oldCourseIndex !==-1){this.courses[oldCourseIndex]= newCourse;}returnthis.courses;}deleteCourse(oldCourse){const courseIndex =this.courses.findIndex(course=> course.id=== oldCourse.id);this.courses.splice(courseIndex,1);returnthis.courses;}}const reactNativeLearningPath =newLearningPath({id:'react-native',name:'Desarrollo de Apps con React Native',courses:[newCourse({id:'basico-javascript',name:'Curso Básico de JavaScript',teacher:'Diego De Granda',}),newCourse({id:'ecmascript-6',name:'Curso de ECMAScript 6+',teacher:'Orlando Naipes',}),// etc...]})
Muy bueno tu código, lo utilicé como referencia.
Excelente código, también me sirvió de inspiración para hacer mi código. :fri
Alguno de los atajos de teclado son estos
.
++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
Thanks, this is very useful!
amigo pero en MACBook como son los atajos...cuando se le pone this a varios...en el min 9:27 como es?...muchas gracias de antemano
classLearningPath{constructor({ name, courses =[],}){this.name= name;this.courses= courses;}}const escuelaWeb =newLearningPath({name:"Escuela de Desarrollo Web",courses:[ cursoJS, cursoReact, cursoNextJS,],});const escuelaData =newLearningPath({name:"Escuela de Data Science",courses:[ cursoPython,CursoMatematicas,CursoExcel,],});
Todo perfecto, José. El único detalle es que los nombres de los cursos deben de ser strings y estar encerrados entre comillas. Pero el resto excelente. 💚
y yo les agregué un ID también.
Para los que no conocen el atajo que uso es: Alt + shift y seleccionar al principio de cada linea.
Muchas Gracias por su aporte.
También se puede usar las flechas del teclado si la otra línea está inmediatamente debajo o encima.
¿Quién usa Facebook hoy en día? xD el bullying a los de Facebook. Yo dejé de usarlo hace como un año, es una perdedera de tiempo, a menos que sea para marketing 😋
Yo nunca lo llegue a usar porque no me gusta su Interfaz xD
Prácticamente todo el mundo xd, mas bien nosotros somos la minoría que dejamos de usar
Cuando dicen que nadie usa Facebook...
Pueden hacer un "console.table(Student)" y miren como les explota la cabeza con eso xD
Uffffff
Como proyecto personal estoy haciendo algo relacionado con Platzi, por lo que quise aprovechar el curso para ir un poco más allá. La clase LearningPath la creé considerando la información que aparece en la presentación de las rutas. Dejo mi código.
no se si este en lo correcto pero teachers no seria un atributo de LearningPath sino de los cursos como tal no?
Esta bien tu proyecto, pero debes hacer modular tu codigo, como lo haces? usas la herencia POO, y ahi no se esta aplicando... Podrias hacer un:
classteacherextendslearningPath{}
Ventajas de la Programación Orientada a Objetos
Reusabilidad. Cuando hemos diseñado adecuadamente las clases, se pueden usar en distintas partes del programa y en numerosos proyectos.
Mantenibilidad. Debido a las sencillez para abstraer el problema, los programas orientados a objetos son más sencillos de leer y comprender, pues nos permiten ocultar detalles de implementación dejando visibles sólo aquellos detalles más relevantes.
Modificabilidad. La facilidad de añadir, suprimir o modificar nuevos objetos nos permite hacer modificaciones de una forma muy sencilla.
Fiabilidad. Al dividir el problema en partes más pequeñas podemos probarlas de manera independiente y aislar mucho más fácilmente los posibles errores que puedan surgir.
La programación orientada a objetos presenta también algunas desventajas como pueden ser:
Cambio en la forma de pensar de la programación tradicional a la orientada a objetos.
La ejecución de programas orientados a objetos es más lenta.
La necesidad de utilizar bibliotecas de clases obliga a su aprendizaje y entrenamiento.
Bro, muchas gracias
Chale, yo uso Facebook por los memes :c
Hola a todos, les comparto mi aporte:
// cursosclassCourses{constructor({ name, teacher, ranking, level }){(this.name= name),(this.teacher= teacher);this.ranking= ranking;this.level= level;}}const basicoJS =newCourses({name:"Curso Practico de JavaScript",teacher:"Juan David Castro",ranking:4.7,level:"medium",});const practicoJS =newCourses({name:"Curso Basico de JavaScript",teacher:"Diego De Granda",ranking:4.6,level:"medium",});const basicoPython =newCourses({name:"Curso Basico de Python",teacher:"Oscar Manuel",ranking:3.7,level:"beginer",});const avanzadoPython =newCourses({name:"Curso Avanzado de Python",teacher:"Freddy Vega",ranking:4.1,level:"advanced",});// learning pathsclassLearningPaths{constructor({ name, courses }){this.name= name;this.courses= courses;}}const escuelaJS =newLearningPaths({name:"Escuela de JavaScript",courses:[basicoJS, practicoJS],});const escuelaDataScience =newLearningPaths({name:"Escuela de Data Science",courses:[basicoPython, avanzadoPython],});// studentsclassStudent{constructor({ name, email, username, twitter =undefined, instagram =undefined, facebook =undefined, approvedCourses =[], learningPaths =[],}){this.name= name;this.email= email;this.username= username;this.socialMedia={ twitter, instagram, facebook,};this.approvedCourses= approvedCourses;this.learningPaths= learningPaths;}}const juan =newStudent({name:"JuanDC",username:"juandc",email:"juanito@juanito.com",twitter:"fjuandc",learningPaths:[escuelaDataScience],});const miguel =newStudent({name:"Miguelito",username:"miguelitoFeliz",email:"miguelito@juanito.com",instagram:"miguelito_Feliz",approvedCourses:[basicoJS, basicoPython],learningPaths:[escuelaJS, escuelaDataScience],});
Muchas gracias!
Miguel, muchas gracias por tu aporte, fue de gran ayuda.
Zuckerberg al enterarse que nadie usa Failsbuckg
Pobre Marcos Zuquerbal :v
Aquí está mi solución al reto:
classLearningPath{constructor({ name, courses,}){this.name= name;this.courses= courses;}addCourse(nombreCurso){this.courses.push(nombreCurso);}deleteCourse(nombreCurso){ indexCourse =this.courses.indexOf(nombreCurso);this.courses.pop(indexCourse);}}const escuelaWeb =newLearningPath({name:"Escuela de Desarrollo Web",courses:["Curso Definitivo de HTML y CSS","Curso Practico de HTML y CSS","Curso de Responsive Design"]});const escuelaDataScience =newLearningPath({name:"Escueala de Data Science",courses:["Curso de Análisis de Negocios para Ciencia de Datos","Curso de Tableau","Curso de Principios de Visualización de Datos para Business Intelligence"]});const escuelaVgs =newLearningPath({name:"Escuela de Videojuegos",courses:["Curso de Creación de Videjuegos","Curso de Diseño de Videojuegos","Curso Profesional de Diseño de Videojuegos",]});```
despues de haver pausado el video 28 veces por fin consegui copiar el codigo.
y despues del minuto 6:55 😱️😱️😱️😱️ aksjghlvkjfh lasjkdhflkajsghalkjh
Jejejejejeje
el tip es ver la clase completa para tratar de internalizar y luego volverla a ver para capitular lo necesario.. y luego otra mirada para entender bien jaja
Ah modo de reto, me propuse separar todas las clases en archivos diferentes, esto con la finalidad de que el codigo sea mas facil de leer y no se sature en un solo archivo... Se los comparto:
Cambio 1:
Primero vamos a tu html y agregas esta propiedad al script para que cargue el js. type="module", quedando de la siguiente manera:
<script type="module" src="./src/Ventajas/main.js"></script>
Paso 2:
Dividimos el codigo en pedacitos mas pequeños que armaremos, para ello creamos 4 archivos, los cuales seran: Student, LearningPath, Course y main, y su estructura es:
importCoursefrom"./Course.js";importLearningPathfrom"./LearningPath.js";importStudentfrom"./Student.js";const inglesBasico =newCourse({id:1,name:"Curso Ingles basico",teacher:"Juan Perez",lessons:23,});console.log(inglesBasico);const rutaIngles =newLearningPath({id:1,name:"Escuela Ingles",description:"Ganate tu primer B1",category:"Ingles",courses:[inglesBasico],});console.log(rutaIngles);const edgar =newStudent({name:"Edgar Gc",username:"edgargc026",points:2000,learningPaths:[rutaIngles],approvedCourses:["Curso Definitivo HTML y CSS","Curso Practio HTML y CSS"],});console.log(edgar);
Y de esta manera puedes tenerlo mas acomodado c:
¡Muy bien! Más adelante vamos a estudiar los Módulos de ES6 para aplicar encapsulamiento a nivel de archivos :muscle:
Si no te ha quedado claro las ventajas de la POO, aquí te dejo 3.
Programar más rápido: Como bien ya vimos en la clase, con nuestros moldes ya hechos podemos realizar trabajos extensos en menos tiempo.
Aumentar tu nivel como dev: Ya dejamos de hacer código a lo bruto, y teniendo los conocimientos de la POO podemos resolver problemas de manera mas eficiente, ordenada y escalable.
Evitar ese molesto código Spaghetti que todxs hemos escrito alguna vez xD
Me dio mucha gracia lo que el profe dijo: "Quien tiene Facebook hoy en día"? , es verdad, creo que ya nadie usa Facebook, y los que lo siguen usando, lo usan solo porque hace recordar la fecha de cumpleaños de tus amigos.
Alguien Sabe por que dice nadie utiliza facebook jajajajajajajajajajajjajaj
Solo es un chiste :sweat_smille:
Pero sí es verdad que no uso Facebook a menos que tenga que hacer campañas para marketing digital o Bots con Messenger. 🤷
Seguramente Facebook lo sabe :D
¿Cómo sería el cod en HTML para recibir esta información por medio de un Input?
Gracias
En este curso te enseñan como conectar html y JS para manipar el dom: