Comparativa de Objetos Literales y Clases en JavaScript

Curso Básico de Programación Orientada a Objetos con JavaScript

Contenido del curso

JavaScript Orientado a Objetos

Objetos, clases y prototipos

Pilares de la POO: abstracción y encapsulamiento

Pilares de la POO: herencia y polimorfismo

Próximos pasos

17
Examen Final de Programación Orientada a Objetos en JavaScript
01:40 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0015:55

Comparativa de Objetos Literales y Clases en JavaScript

Curso Básico de Programación Orientada a Objetos con JavaScript

Clase 7 de 17

Clase 7 / 17

Recursos

¿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:

class Student {
  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 juan2 = new Student({
  name: "JuanDC",
  username: "juandc",
  email: "juanito@juanito.com",
  twitter: "fjuandc",
});

const miguelito2 = new Student({
  name: "Miguelito",
  username: "miguelito_feliz",
  email: "miguelito@juanito.com",
  instagram: "miguelito_feliz"
});

Ventajas de usar clases en JavaScript

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.

Edgar Ramón González Contreras

Hace 5 años

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:

Student,js

export default class Student {
  constructor({
    name,
    username,
    points,
    approvedCourses = [],
    learningPaths = [],
    twitter = undefined,
    facebook = undefined,
    instagram = undefined,
  }) {
    this.name = name;
    this.username = username;
    this.points = points;
    this.approvedCourses = approvedCourses;
    this.learningPaths = learningPaths;
    this.socialMedia = {
      twitter,
      facebook,
      instagram,
    };
  }
}

El siguiente es Course.js:

export default class Student {
  constructor({
    name,
    username,
    points,
    approvedCourses = [],
    learningPaths = [],
    twitter = undefined,
    facebook = undefined,
    instagram = undefined,
  }) {
    this.name = name;
    this.username = username;
    this.points = points;
    this.approvedCourses = approvedCourses;
    this.learningPaths = learningPaths;
    this.socialMedia = {
      twitter,
      facebook,
      instagram,
    };
  }
}

Agregamos a LearningPath.js:

export default class LearningPath {
  constructor({ id, name, description, category, courses = [] }) {
    this.id = id;
    this.name = name;
    this.category = category;
    this.description = description;
    this.courses = courses;
  }
  addCourse(newCourse) {
    this.courses.push(newCourse);
  }
}

Esto lo debemos agregar y trabajar en el main.js:

import Course from "./Course.js";
import LearningPath from "./LearningPath.js";
import Student from "./Student.js";

const inglesBasico = new Course({
  id: 1,
  name: "Curso Ingles basico",
  teacher: "Juan Perez",
  lessons: 23,
});
console.log(inglesBasico);

const rutaIngles = new LearningPath({
  id: 1,
  name: "Escuela Ingles",
  description: "Ganate tu primer B1",
  category: "Ingles",
  courses: [inglesBasico],
});

console.log(rutaIngles);

const edgar = new Student({
  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:

Juan Castro

Profesor

Hace 5 años

¡Muy bien! Más adelante vamos a estudiar los Módulos de ES6 para aplicar encapsulamiento a nivel de archivos :muscle:

MIguel Oviedo

Hace 5 años

No estoy seguro de que funcione el

 learningPaths: [rutaIngles]

de la instancia "edgar"

Comentarios (299)299 comentarios

Juan David Sánchez

Anfernee Valera

Juan Camilo Salazar

Sebastián Andrés Sanhueza Tapia

Sebastián Arredondo Posada

Alejandro Zambrano Lasso

Hace 4 años

José Gregorio Estrada Meneses

Giuseppe Ramirez

Ricardo Aguilar

Luis Angel Hipólito Marquez

Emma Rosa Pilozo Solano

Orlando Díaz Torrealva

Valentina Arenas Lozano

Eliaz Bobadilla

Gonzalo Vidal

Andrés Felipe Rivera Lozano

Darly Lozano Cruz

Ederson Felipe Lopez Bolivar

Ruben Dario Hernandez Centeno

Carlos Esteban Lara Gil

Sebastian Vizcarra

Miguel Ángel Baquero Tello

Fernando Pioli Martínez

Marlón Andrés Cuartas Aguirre

Rubén Ernesto Aragón Gil

Aaron Santiago Loyo Zabala

Hace 3 años

Pedro Alvarado Garcia

Daniel Quispe

Jesus Martinez

Erick Alejandro Graterol Barico

Marco Palacios Orihuela

Cristian Antezana Novillo

Ismael Cruz Procel

Jhoana España Urresty

JavaScript Orientado a Objetos

Fundamentos de Programación Orientada a Objetos en JavaScript

Programación Orientada a Objetos con JavaScript: Fundamentos y Aplicaciones

Conceptos Básicos de Programación Orientada a Objetos

Objetos, clases y prototipos

Objetos y prototipos en JavaScript: diferencias y usos

Objetos Literales y Prototipos en JavaScript

Clases en JavaScript: Sintaxis y Uso Práctico

Comparativa de Objetos Literales y Clases en JavaScript

Pilares de la POO: abstracción y encapsulamiento

Abstracción en Programación Orientada a Objetos con JavaScript

Programación Orientada a Objetos con JavaScript: Clases y Prototipos

Encapsulamiento en JavaScript: Uso de Getters y Setters

Encapsulamiento con Getters y Setters en JavaScript

Módulos en JavaScript: Encapsulamiento y Uso Práctico

Pilares de la POO: herencia y polimorfismo

Herencia en Programación Orientada a Objetos: Tipos de Estudiantes

Implementación de Herencia en JavaScript con Clases

Polimorfismo en Programación Orientada a Objetos

Polimorfismo en JavaScript: Crear y Publicar Comentarios

Próximos pasos

Examen Final de Programación Orientada a Objetos en JavaScript

Comparativa de Objetos Literales y Clases en JavaScript

Progreso del curso

JavaScript Orientado a Objetos

Objetos, clases y prototipos

Pilares de la POO: abstracción y encapsulamiento

Pilares de la POO: herencia y polimorfismo

Próximos pasos

Recursos

Recursos