Saltar al contenido

Lección 12 de 12 · Lectura y práctica

Introducción a los Objetos

CONCEPTO CLAVE: En JavaScript, los objetos son estructuras de datos que permiten almacenar información relacionada mediante pares clave-valor. Son fundamentales para organizar y manipular datos de manera eficiente en cualquier.

Del concepto a la práctica

Taller de esta lección

Un objeto agrupa propiedades que describen una misma entidad y permite pasar esa entidad completa a una función. La notación de punto es clara cuando conoces el nombre de la propiedad. Conviene mantener nombres consistentes y representar cantidades relacionadas con la misma unidad.

Ejemplo resuelto

js
const libro = {
  titulo: "Piedra clara",
  autora: "Inés Rojas",
  paginasTotales: 200,
  paginasLeidas: 80
};
const pendientes = libro.paginasTotales - libro.paginasLeidas;
console.log(libro.autora, pendientes); // Inés Rojas 120

El objeto conserva identidad y datos; la resta usa dos propiedades de páginas.

Pruébalo

  1. Crea un objeto con cuatro propiedades.

  2. Usa nombres que indiquen su unidad.

  3. Accede a autora y páginas mediante punto.

  4. Calcula las pendientes.

Error frecuente: escribir paginasTotal al declarar y paginasTotales al leer. Corrección: copia exactamente el nombre de la propiedad y prueba una salida pequeña.

Con los datos mostrados, la salida esperada es Inés Rojas 120.

Comprueba tu resultado

Añade terminado: false sin alterar el cálculo y verifica que las cuatro propiedades originales sigan disponibles.

Diagrama de decisión con ramas Sí y No y un bucle que procesa cada elemento de una lista.
CursaloMapa de práctica
Cómo avanza un programa

Una condición decide qué camino ejecuta el programa. Un bucle repite una operación mientras queden elementos, y termina cuando la lista se agota. Separar ambas ideas ayuda a seguir el flujo y comprobar casos límite.

Ver la infografía en tamaño completo ↗
CONCEPTO CLAVE: En JavaScript, los objetos son estructuras de datos que permiten almacenar información relacionada mediante pares clave-valor. Son fundamentales para organizar y manipular datos de manera eficiente en cualquier aplicación.

¿Qué es un Objeto en JavaScript?

Imagina que necesitas guardar información sobre un usuario en tu programa. Podrías usar muchas variables independientes:

let nombre = "María";
let edad = 28;
let profesion = "Ingeniera";
let ciudad = "Madrid";

Aunque esto funciona, se vuelve difícil de gestionar cuando tienes múltiples usuarios o necesitas pasar esa información entre funciones. Aquí es donde los objetos resultan esenciales.

Un objeto es una colección de propiedades, donde cada propiedad tiene un nombre (clave) y un valor. El valor puede ser cualquier tipo de dato de JavaScript: strings, números, booleanos, arrays, e incluso otras funciones u objetos.

📌 Los objetos en JavaScript son entidades dinámicas: puedes agregar, modificar o eliminar propiedades en cualquier momento después de su creación.

Creando Objetos

La forma más común de crear un objeto es usando llaves rizadas (curly braces) también conocidas como notación literal:

let usuario = {
  nombre: "María",
  edad: 28,
  profesion: "Ingeniera",
  ciudad: "Madrid"
};

También puedes crear un objeto vacío y agregar propiedades después:

let usuario = {};
usuario.nombre = "María";
usuario.edad = 28;

Accediendo a las Propiedades

Existen dos formas principales de acceder a las propiedades de un objeto:

Notación de punto

console.log(usuario.nombre); // "María"
console.log(usuario.edad);   // 28

Notación de corchetes

console.log(usuario["nombre"]); // "María"
console.log(usuario["edad"]);   // 28
💡 Usa la notación de punto cuando conozcas el nombre exacto de la propiedad. La notación de corchetes es útil cuando el nombre de la propiedad está en una variable o contiene espacios.
let propiedad = "nombre";
console.log(usuario[propiedad]); // "María"

Modificando y Agregando Propiedades

Para modificar una propiedad existente, simplemente asigna un nuevo valor:

usuario.edad = 29;
console.log(usuario.edad); // 29

Para agregar una nueva propiedad:

usuario.email = "maria@ejemplo.com";
console.log(usuario.email); // "maria@ejemplo.com"

Para eliminar una propiedad, usa la palabra clave delete:

delete usuario.ciudad;
console.log(usuario.ciudad); // undefined
⚠️ Cuidado con delete: elimina permanentemente la propiedad del objeto. Si solo quieres que tenga un valor vacío o indefinido, asigna null o undefined en su lugar.

Métodos en Objetos

Una propiedad también puede ser una función. En este caso, la llamamos método:

let usuario = {
  nombre: "María",
  edad: 28,
  saludar: function() {
    return "¡Hola! Soy " + this.nombre;
  },
  cumpleanos: function() {
    this.edad += 1;
    return "¡Feliz cumpleaños! Ahora tienes " + this.edad;
  }
};

console.log(usuario.saludar());      // "¡Hola! Soy María"
console.log(usuario.cumpleanos());   // "¡Feliz cumpleaños! Ahora tienes 29"
📌 La palabra clave this dentro de un método se refiere al objeto que contiene el método. Es la forma de acceder a otras propiedades del mismo objeto.

Objetos Anidados

Los valores de un objeto pueden ser otros objetos, creando estructuras más complejas:

let empleado = {
  nombre: "Carlos",
  cargo: "Desarrollador Senior",
  empresa: {
    nombre: "TechCorp",
    ubicacion: "Barcelona",
    empleados: 150
  },
  habilidades: ["JavaScript", "Python", "SQL"]
};

console.log(empleado.empresa.nombre);       // "TechCorp"
console.log(empleado.habilidades[0]);       // "JavaScript"
Ver más

También puedes combinar objetos con arrays para crear estructuras de datos más elaboradas:

let equipo = [
  { nombre: "Ana", rol: "Diseñadora" },
  { nombre: "Luis", rol: "Desarrollador" },
  { nombre: "Marta", rol: "Gerente de Proyecto" }
];

console.log(equipo[1].nombre); // "Luis"
console.log(equipo[2].rol);    // "Gerente de Proyecto"

Iterando sobre Objetos

Para recorrer todas las propiedades de un objeto, puedes usar el bucle for...in:

let libro = {
  titulo: "El Principito",
  autor: "Antoine de Saint-Exupéry",
  anio: 1943,
  genero: "Ficción"
};

for (let clave in libro) {
  console.log(clave + ": " + libro[clave]);
}
/*
 titulo: El Principito
 autor: Antoine de Saint-Exupéry
 anio: 1943
 genero: Ficción
*/

Otros Métodos Útiles

MétodoDescripciónEjemplo
Object.keys()Devuelve un array con las clavesObject.keys(libro)
Object.values()Devuelve un array con los valoresObject.values(libro)
Object.entries()Devuelve array de pares [clave, valor]Object.entries(libro)
console.log(Object.keys(libro));    // ["titulo", "autor", "anio", "genero"]
console.log(Object.values(libro));   // ["El Principito", "Antoine de Saint-Exupéry", 1943, "Ficción"]
💡 Estos métodos son extremadamente útiles cuando necesitas transformar un objeto en un array para usar métodos como map(), filter() o forEach().

Funciones Constructoras

Cuando necesitas crear múltiples objetos con la misma estructura, las funciones constructoras son muy útiles:

function Persona(nombre, edad, ciudad) {
  this.nombre = nombre;
  this.edad = edad;
  this.ciudad = ciudad;
  this.presentarse = function() {
    return "Hola, soy " + this.nombre + " de " + this.ciudad;
  };
}

let persona1 = new Persona("Elena", 25, "Sevilla");
let persona2 = new Persona("Pedro", 32, "Valencia");

console.log(persona1.presentarse()); // "Hola, soy Elena de Sevilla"
console.log(persona2.presentarse()); // "Hola, soy Pedro de Valencia"
Las funciones constructoras fueron el estándar en versiones antiguas de JavaScript para crear "clases". En versiones modernas, las clases nativas de JavaScript ofrecen una sintaxis más limpia y legible.

Práctica: Construyendo un Carrito de Compras

Vamos a aplicar todo lo aprendido creando un simple carrito de compras:

  1. Crear el objeto carrito con una propiedad para los productos y métodos para agregar, eliminar y calcular el total:
let carrito = {
  productos: [],
  agregarProducto: function(nombre, precio, cantidad) {
    // Verificar si el producto ya existe
    let existente = this.productos.find(p => p.nombre === nombre);
    if (existente) {
      existente.cantidad += cantidad;
    } else {
      this.productos.push({ nombre, precio, cantidad });
    }
    return `${nombre} agregado al carrito`;
  },
  eliminarProducto: function(nombre) {
    this.productos = this.productos.filter(p => p.nombre !== nombre);
    return `${nombre} eliminado del carrito`;
  },
  calcularTotal: function() {
    return this.productos.reduce((total, producto) => {
      return total + (producto.precio * producto.cantidad);
    }, 0);
  },
  mostrarCarrito: function() {
    console.log("🛒 Contenido del carrito:");
    this.productos.forEach(p => {
      console.log(`- ${p.nombre}: $${p.precio} x ${p.cantidad}`);
    });
    console.log(`Total: $${this.calcularTotal()}`);
  }
};
  1. Usar el carrito:
carrito.agregarProducto("Camiseta", 25, 2);
carrito.agregarProducto("Pantalón", 45, 1);
carrito.agregarProducto("Camiseta", 25, 1); // Incrementa la cantidad

carrito.mostrarCarrito();
/*
🛒 Contenido del carrito:
- Camiseta: $25 x 3
- Pantalón: $45 x 1
Total: $120
*/

carrito.eliminarProducto("Pantalón");
console.log(carrito.calcularTotal()); // 75
📌 Este ejemplo demuestra cómo los objetos pueden encapsular datos y comportamiento relacionado, creando unidades de código reutilizables y bien organizadas.

Resumen

A lo largo de esta lección hemos aprendido que:

  • Los objetos almacenan datos en pares clave-valor, permitiendo organizar información relacionada.
  • Se pueden crear usando la notación literal {} o mediante funciones constructoras.
  • Las propiedades se acceden con notación de punto o corchetes.
  • Los métodos son funciones dentro de objetos que pueden acceder a otras propiedades usando this.
  • Los objetos pueden contener otros objetos, arrays y cualquier tipo de dato.
  • JavaScript proporciona métodos útiles como Object.keys(), Object.values() y Object.entries() para trabajar con objetos.
🧠 Quiz

¿Cómo se llama la propiedad de un objeto que contiene una función?

  • Atributo
  • Índice
  • Método
  • Parámetro
✅ Método. Cuando una propiedad de un objeto contiene una función, la llamamos método. Los métodos pueden acceder a otras propiedades del mismo objeto usando la palabra clave this.
🧠 Quiz

¿Cuál es la diferencia entre estas dos formas de acceder a una propiedad: objeto.propiedad vs objeto["propiedad"]?

  • No hay diferencia, ambas son idénticas
  • La notación de punto es más moderna
  • La notación de corchetes solo funciona con strings
  • La notación de punto es más rápida
✅ Son equivalentes en funcionalidad, pero cada una tiene usos distintos. La notación de punto es más concisa y legible cuando conoces el nombre exacto. La notación de corchetes es necesaria cuando el nombre de la propiedad está en una variable, contiene espacios o caracteres especiales.
🧠 Quiz

¿Qué palabra clave se usa para eliminar permanentemente una propiedad de un objeto?

  • remove
  • erase
  • delete
  • clear
✅ delete. La palabra clave delete objeto.propiedad elimina permanentemente la propiedad. Ten cuidado porque esta acción no se puede deshacer.
💡 Próxima lección: En la siguiente lección exploraremos cómo usar Object.assign(), el operador de propagación ... para copiar objetos, y las diferencias entre objetos y arrays para elegir la estructura correcta según tus necesidades.

Sigue con JavaScript Esencial: Domina los Cimientos del Lenguaje

Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.

Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.

01 / ELEGIR UNA RUTA

El próximo paso

Aprende IA mientras construyes algo que sí necesitas.

Empieza por el curso inicial o explora el catálogo para encontrar una práctica alineada con tu trabajo.