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, los objetos usan nombres descriptivos, lo que los hace ideales para representar entidades con datos relacionados.

Si vienes de PHP, ya conoces los arrays asociativos: $evento = ['titulo' => 'Reunión', 'fecha' => '2025-05-10']. Un objeto JavaScript es exactamente eso, con la diferencia de que también puede contener funciones —llamadas métodos— que operan sobre sus propios datos.

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 Propiedades

Puedes cambiar el valor de una propiedad existente o añadir propiedades nuevas en cualquier momento.

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

evento.fecha = "2025-05-12";       // Modifica una propiedad existente
evento.confirmado = true;          // Añade una propiedad nueva

console.log(evento.fecha);         // Imprime: 2025-05-12
console.log(evento.confirmado);    // Imprime: true

También puedes eliminar propiedades con delete:

delete evento.confirmado;
console.log(evento.confirmado); // Imprime: undefined

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

Con lo que has visto hasta aquí ya puedes hacer casi todo lo que necesitarás en el día a día. Las clases son un paso más: sirven como plantillas para crear muchos objetos del mismo tipo sin repetir código. Si solo necesitas uno o dos objetos concretos, la sintaxis {} es suficiente.

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).

Nota: Dentro de los métodos de un objeto, this hace referencia al propio objeto. Es la forma que tiene JavaScript de decir "este objeto en concreto". Si copias un método a otra variable y lo llamas fuera del objeto, this puede perder su referencia, lo que es una fuente habitual de errores.

En la próxima lección: manipulación del DOM, para conectar JavaScript con los elementos HTML de la página y hacerla interactiva.

TOP