Apuntes sobre Javascript

JavaScript lo resuelve todo... eventualmente.

Objetos: Datos Estructurados

Hasta ahora, has aprendido a manejar variables, operadores, condicionales, bucles, funciones y arreglos. Ahora vamos a explorar los objetos, una forma poderosa de organizar datos relacionados, como las características de un producto o los detalles de un usuario. Los objetos son como "fichas" que agrupan información y acciones, y son esenciales para modelar cosas del mundo real en tu código.

¿Qué son los objetos?

Un objeto es una colección de propiedades, donde cada propiedad tiene un nombre (clave) y un valor. A diferencia de los arrays, que usan índices numéricos para acceder a elementos, los objetos usan nombres descriptivos, lo que los hace ideales para representar entidades con datos relacionados.

imagen mental: Imagina un objeto como una tarjeta de un personaje en un juego:

  • Nombre: Dragón
  • Fuerza: 80
  • Vida: 100
  • Atacar: (una acción que el personaje puede realizar)

1. Creando y Accediendo a Objetos

Para crear un objeto, usas llaves {} y defines propiedades con la sintaxis clave: valor.

Ejemplo realista: Supongamos que quieres representar un evento en una agenda:

let evento = {
  titulo: "Reunión de trabajo",
  fecha: "2025-05-10",
  hora: "10:00",
  lugar: "Oficina central"
};

console.log(evento.titulo); // Imprime: Reunión de trabajo
console.log(evento["lugar"]); // Imprime: Oficina central
  • Notación de punto (evento.titulo): Más clara y común.
  • Notación de corchetes (evento["lugar"]): Útil para claves dinámicas o con espacios.

2. Modificando y Añadiendo:

class Estudiante {
  constructor(nombre, id, notas) {
    this.nombre = nombre;
    this.id = id;
    this.notas = notas; // Arreglo de notas
  }

  calcularPromedio() {
    let suma = 0;
    for (let nota of this.notas) {
      suma += nota;
    }
    return suma / this.notas.length;
  }

  estado() {
    let promedio = this.calcularPromedio();
    return promedio >= 5 ? "Aprobado" : "Suspenso";
  }
}

let estudiante1 = new Estudiante("María", "A001", [7, 8, 6]);
let estudiante2 = new Estudiante("Juan", "A002", [4, 3, 5]);

console.log(`${estudiante1.nombre}: ${estudiante1.estado()}`); // Imprime: María: Aprobado
console.log(`${estudiante2.nombre}: ${estudiante2.estado()}`); // Imprime: Juan: Suspenso

3. Métodos: Acciones dentro de Objetos

Los objetos pueden contener métodos (funciones) para realizar acciones relacionadas con sus datos.

Ejemplo realista: Un objeto que representa un reproductor de música:

let reproductor = {
  cancionActual: "Bohemian Rhapsody",
  volumen: 50,
  reproduciendo: false,
  reproducir() {
    this.reproduciendo = true;
    console.log(`Reproduciendo: ${this.cancionActual}`);
  },
  pausar() {
    this.reproduciendo = false;
    console.log(`Pausado: ${this.cancionActual}`);
  },
  cambiarVolumen(nuevoVolumen) {
    this.volumen = nuevoVolumen;
    console.log(`Volumen ajustado a ${this.volumen}`);
  }
};

reproductor.reproducir(); // Imprime: Reproduciendo: Bohemian Rhapsody
reproductor.cambiarVolumen(75); // Imprime: Volumen ajustado a 75
reproductor.pausar(); // Imprime: Pausado: Bohemian Rhapsody

4. Reutilizando Objetos con Clases

Para crear múltiples objetos similares, usa clases como plantillas.

Ejemplo realista: Un sistema de reservas de un restaurante:

class Reserva {
  constructor(nombre, fecha, personas) {
    this.nombre = nombre;
    this.fecha = fecha;
    this.personas = personas;
    this.confirmada = false;
  }

  confirmar() {
    this.confirmada = true;
    console.log(`Reserva de ${this.nombre} para ${this.personas} personas confirmada.`);
  }

  cancelar() {
    this.confirmada = false;
    console.log(`Reserva de ${this.nombre} cancelada.`);
  }
}

let reserva1 = new Reserva("García", "2025-05-15", 4);
let reserva2 = new Reserva("López", "2025-05-16", 2);

reserva1.confirmar(); // Imprime: Reserva de García para 4 personas confirmada.
reserva2.cancelar(); // Imprime: Reserva de López cancelada.

5. Objetos y Arrays Combinados

Puedes usar objetos dentro de arrays para manejar listas de entidades.

Ejemplo: Una lista de tareas en una app de productividad:

let tareas = [
  { id: 1, texto: "Comprar leche", completada: false },
  { id: 2, texto: "Llamar al médico", completada: true }
];

function mostrarTareas() {
  for (let tarea of tareas) {
    let estado = tarea.completada ? "Completada" : "Pendiente";
    console.log(`Tarea ${tarea.id}: ${tarea.texto} - ${estado}`);
  }
}

mostrarTareas();
// Imprime:
// Tarea 1: Comprar leche - Pendiente
// Tarea 2: Llamar al médico - Completada

Buenas Prácticas

  1. Usa objetos para entidades: Si los datos representan algo con propiedades relacionadas (como un libro o un usuario), usa un objeto.
  2. Nombres claros: Usa claves descriptivas (por ejemplo, titulo en lugar de t).
  3. Métodos específicos: Añade métodos que tengan sentido para el objeto (como prestar para un libro).
  4. Usa clases para reutilizar: Si necesitas muchos objetos similares, crea una clase como plantilla.
  5. Combina con arreglos: Usa arreglos de objetos para listas de entidades (como una lista de productos).

Para la Próxima Lección

En la Lección 9, exploraremos la manipulación del DOM, que te permitirá interactuar con páginas web, cambiando texto, colores o estructuras HTML desde JavaScript.

TOP