Apuntes javascript

JavaScript lo resuelve todo... eventualmente.

Curso de JavaScript para Principiantes - Lección 8: Objetos: Datos Estructurados

¡Bienvenido a la octava lección! 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 arreglos, 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.

Ejemplo 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ñadi sistema de gestión de estudiantes:

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 Arreglos Combinados

Puedes usar objetos dentro de arreglos 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).

Ejercicios Prácticos

  1. Objeto para un evento:

    • Crea un objeto concierto con las propiedades artista, fecha, lugar y precio.
    • Añade un método mostrarDetalles que imprima un mensaje como "Concierto de [artista] en [lugar]".
    • Llama al método.

  2. Clase para películas:

    • Crea una clase Pelicula con las propiedades titulo, director y duracion (en minutos).
    • Añade un método esLarga que devuelva true si la duración es mayor a 120 minutos.
    • Crea dos instancias y prueba el método.

  3. Lista de objetos:

    • Crea un arreglo cursos con tres objetos, cada uno con las propiedades nombre y duracion (en meses).
    • Escribe una función que recorra el arreglo e imprima solo los cursos con duración mayor a 6 meses.

  4. Carrito de compras:

    • Crea un objeto carrito con una propiedad items (un arreglo vacío) y métodos agregarItem (que añada un objeto con nombre y precio) y calcularTotal.
    • Añade dos items y muestra el total.

Instrucción: Prueba estos ejercicios en JSFiddle o en la consola del navegador (F12). Por ejemplo:

let obj = { nombre: "Test" };
console.log(obj.nombre);

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. ¡Sigue practicando los objetos con los ejercicios de hoy para estar listo!

TOP