Composición en POO: delegar logs a LogTracker

Contenido del curso

Clases Grabadas

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:06

Composición en POO: delegar logs a LogTracker

Curso de JavaScript Orientado a Objetos

Clase 8 de 15

Clase 8 / 15

Recursos

Aplicar composición en programación orientada a objetos permite escribir código más claro, reutilizable y seguro. Aquí verás cómo delegar el manejo de logs en una clase especializada (LogTracker) e integrarlo en Habit, evitando estados globales y reforzando la encapsulación.

¿Qué es la composición y cómo se diferencia de la herencia?

La composición es un patrón de diseño donde un objeto delega responsabilidades a otros objetos especializados, en lugar de heredarlas. Con la analogía del coche: con herencia dirías “un coche es un vehículo con motor y ruedas”; con composición, “un coche tiene un motor, un conjunto de ruedas y un sistema de frenos”.

Con herencia, una clase “es un” tipo base.
Con composición, una clase “tiene un” conjunto de capacidades.
Beneficios: separación de responsabilidades, reutilización entre contextos, y encapsulación del estado privado.
No todo lo que tiene motor es coche. La composición evita acoplar funciones solo por compartir rasgos.

¿Qué habilidades y keywords se practican?

Patrón de diseño: composición y delegación de responsabilidades.
Encapsulación de estado privado y acceso controlado.
Validación de datos y manejo de errores con null.
Eliminación de arreglo global y de habit id counter no usado.
Métodos clave: addLog, getLogs, register check in, render habits.

¿Cómo construir LogTracker para manejar logs?

Se crea la clase LogTracker encargada del sistema de logs. Mantiene un array privado de fechas y expone dos métodos: addLog(date) para validar y agregar, y getLogs() para devolver una copia del historial. Si la fecha no es válida (no es string o su longitud es distinta de 10), retorna null. Así se protege el estado y se estandariza el flujo de error.

class LogTracker {
  private dates: string[] = [];

  addLog(date: string): string | null {
    if (typeof date !== 'string' || date.length !== 10) return null;
    this.dates.push(date);
    return date;
  }

  getLogs(): string[] {
    return [...this.dates]; // copia para evitar mutaciones externas
  }
}

Estado privado: el array de fechas solo se modifica dentro de la clase.
Validación simple: tipo string y longitud de 10 caracteres.
Copia defensiva en getLogs para impedir modificaciones externas al array interno.

¿Cómo integrar la composición en Habit y actualizar el flujo?

La clase Habit no maneja logs directamente. En su lugar, delegará en una instancia privada de LogTracker (un tracker especializado). Se añaden métodos que usan el tracker para registrar y consultar. Luego se actualizan funciones externas para consumir esa delegación y se eliminan estructuras globales.

class Habit {
  private id: string;
  private tracker: LogTracker;

  constructor(id: string) {
    this.id = id;
    this.tracker = new LogTracker(); // composición: "tiene un" LogTracker
  }

  registerCheckIn(date: string): { habitId: string; date: string } | null {
    const created = this.tracker.addLog(date);
    if (!created) return null; // si la fecha es inválida
    return { habitId: this.id, date: created };
  }

  getLogs(): string[] {
    return this.tracker.getLogs();
  }
}

Campo privado: tracker mantiene la instancia de LogTracker.
Constructor: instancia con new LogTracker() para habilitar la delegación.
Método: register check in usa tracker.addLog(date), retorna objeto { habitId, date } o null.
Método: get logs delega a tracker.getLogs().

¿Qué cambios aplicar en las funciones externas?

En la función de log del hábito, delegar: habit.registerCheckIn(fecha).
Eliminar el arreglo global de logs.
Eliminar habit id counter que ya no se usa.
En render habits, obtener logs con habit.getLogs().

function logHabit(habit: Habit, date: string) {
  return habit.registerCheckIn(date);
}

function renderHabits(habits: Habit[]) {
  for (const habit of habits) {
    const logs = habit.getLogs();
    // ...pintar logs del hábito
  }
}

Resultado: cada hábito gestiona sus propios registros.
Datos relacionados viven juntos: Habit y su LogTracker.
Efecto colateral: menos acoplamiento, mayor claridad y reutilización.

¿Te animas a refactorizar otra parte con composición y delegación? Comparte tu solución y cuéntanos cómo lo resolviste.

Resumen

¿Qué es la composición y cómo se diferencia de la herencia?

Con herencia, una clase “es un” tipo base.
Con composición, una clase “tiene un” conjunto de capacidades.
Beneficios: separación de responsabilidades, reutilización entre contextos, y encapsulación del estado privado.
No todo lo que tiene motor es coche. La composición evita acoplar funciones solo por compartir rasgos.

¿Qué habilidades y keywords se practican?

Patrón de diseño: composición y delegación de responsabilidades.
Encapsulación de estado privado y acceso controlado.
Validación de datos y manejo de errores con null.
Eliminación de arreglo global y de habit id counter no usado.
Métodos clave: addLog, getLogs, register check in, render habits.

¿Cómo construir LogTracker para manejar logs?

class LogTracker {
  private dates: string[] = [];

  addLog(date: string): string | null {
    if (typeof date !== 'string' || date.length !== 10) return null;
    this.dates.push(date);
    return date;
  }

  getLogs(): string[] {
    return [...this.dates]; // copia para evitar mutaciones externas
  }
}

Estado privado: el array de fechas solo se modifica dentro de la clase.
Validación simple: tipo string y longitud de 10 caracteres.
Copia defensiva en getLogs para impedir modificaciones externas al array interno.

¿Cómo integrar la composición en Habit y actualizar el flujo?

class Habit {
  private id: string;
  private tracker: LogTracker;

  constructor(id: string) {
    this.id = id;
    this.tracker = new LogTracker(); // composición: "tiene un" LogTracker
  }

  registerCheckIn(date: string): { habitId: string; date: string } | null {
    const created = this.tracker.addLog(date);
    if (!created) return null; // si la fecha es inválida
    return { habitId: this.id, date: created };
  }

  getLogs(): string[] {
    return this.tracker.getLogs();
  }
}

Campo privado: tracker mantiene la instancia de LogTracker.
Constructor: instancia con new LogTracker() para habilitar la delegación.
Método: register check in usa tracker.addLog(date), retorna objeto { habitId, date } o null.
Método: get logs delega a tracker.getLogs().

¿Qué cambios aplicar en las funciones externas?

En la función de log del hábito, delegar: habit.registerCheckIn(fecha).
Eliminar el arreglo global de logs.
Eliminar habit id counter que ya no se usa.
En render habits, obtener logs con habit.getLogs().

function logHabit(habit: Habit, date: string) {
  return habit.registerCheckIn(date);
}

function renderHabits(habits: Habit[]) {
  for (const habit of habits) {
    const logs = habit.getLogs();
    // ...pintar logs del hábito
  }
}

Resultado: cada hábito gestiona sus propios registros.
Datos relacionados viven juntos: Habit y su LogTracker.
Efecto colateral: menos acoplamiento, mayor claridad y reutilización.

¿Te animas a refactorizar otra parte con composición y delegación? Comparte tu solución y cuéntanos cómo lo resolviste.

// APLICANDO EL CONCEPTO DE COMPOSICIÓN, HAREMOS LO MISMO PARA EL ARRAY DE HABITOS 
class HabitList{
  //PRIVATIZAMOS EL ARRAY PARA QUE NADIE DESDE AFUERA PUEDA HACER UN .PUSH() ACCIDENTAL
  #items = []
  #maxItems = 5 
  // MÉTODO PARA AÑADIR DE FORMA SEGURA
  add(habit){
    if(this.#items.length >= this.#maxItems){
      throw new Error (`Has alcanzado el límite máximo de ${this.#maxItems} hábitos`)
    }
    this.#items.push(habit)
    return habit
  }
  // MÉTODO PARA BUSCAR UN HÁBITO POR SU ID
  findById(id){
    return this.#items.find(h=> h.id ===id )
  }
  // GET PARA DARLE A LA INTERFAZ UNA COPIA SEGURA PARA RENDERIZAR
  get all(){
    return[...this.#items]
  }
  //GETTER PARA SABER CUÁNTOS HÁBITOS VAN
  get count(){
    return this.#items.length
  }
}

const myHabits= new HabitList()

//AÑADIMOS UN TRY CATCH EN LA FUNCIÓN addHabit
 try {
  const habit = new Habit(name.trim(), frequency);
  // USANDO LA CLASE: Intentamos añadirlo a nuestra lista
  myHabits.add(habit)
  return habit;
  } catch (error) {
    // Si la lista está llena, el método .add() lanzará el error y caerá aquí
    showMessage(error.message,'error')
    return null
  }

function logHabit(habitId, date) {
  // USANDO LA CLASE: Le pedimos a la lista que busque el hábito por ID
  const habit = myHabits.findById(habitId);

  if (!habit) {
    showMessage('Hábito no encontrado', 'error');
    return null;
  }

  return habit.registerCheckIn(date)
}

Clases Grabadas

POO en JavaScript: cómo pensar antes de programar

Configuración de proyecto JavaScript con Git y npm

Función constructora y prototipo en JavaScript

Objeto literal para manejar balance en JavaScript

Cómo funcionan los prototipos en JavaScript

Clases en JavaScript: constructor y métodos static

Campos privados y setters con validación en JavaScript

Composición en POO: delegar logs a LogTracker

Polimorfismo en JavaScript con duck typing

Herencia en TypeScript: extends y super

Abstracción en POO: ocultar complejidad

Polimorfismo aplicado a calculadoras de rachas

Factory methods para hábitos en JavaScript

Errores de dominio con códigos y validación robusta

POO en JavaScript: cuándo usar objetos y funciones

Composición en POO: delegar logs a LogTracker

Progreso del curso

Clases Grabadas

Recursos

Recursos