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.

Esta es una lección del contenido anterior de Cursalo. Si ya estudiaste o compraste este curso, entra con tu cuenta para guardar tu progreso y abrir el resto de las clases. No necesitas comprar nada de nuevo.

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"

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étodo	Descripción	Ejemplo
`Object.keys()`	Devuelve un array con las claves	`Object.keys(libro)`
`Object.values()`	Devuelve un array con los valores	`Object.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:

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()}`);
  }
};

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.

Aprende IA mientras construyes algo que sí necesitas.

Tres cursos para dar tu próximo paso.

¿Qué es un Objeto en JavaScript?

Creando Objetos

Accediendo a las Propiedades

Notación de punto

Notación de corchetes

Modificando y Agregando Propiedades

Métodos en Objetos

Objetos Anidados

Iterando sobre Objetos

Otros Métodos Útiles

Funciones Constructoras

Práctica: Construyendo un Carrito de Compras

Resumen