Objetos

Aprende a crear y trabajar con objetos en JavaScript: propiedades, métodos, desestructuración, spread, Object.keys/values/entries y patrones comunes.

Un objeto es una colección de pares clave-valor. Es la forma natural de representar entidades del mundo real en JavaScript: un usuario tiene nombre, email y rol; un producto tiene título, precio y stock. Los objetos agrupan todo eso en una sola estructura.


Crear objetos

const usuario = {
  nombre: 'Ana',
  email: 'ana@ejemplo.com',
  edad: 28,
  activo: true,
};

Los objetos se crean con llaves {}. Cada par clave-valor se separa con coma.


Acceder a propiedades

const usuario = { nombre: 'Ana', edad: 28 };

// Notación de punto (la más habitual)
usuario.nombre // 'Ana'
usuario.edad   // 28

// Notación de corchetes (cuando la clave es dinámica o tiene espacios)
usuario['nombre']         // 'Ana'
const clave = 'edad';
usuario[clave]            // 28

// Propiedad que no existe
usuario.telefono          // undefined

Modificar objetos

const usuario = { nombre: 'Ana', edad: 28 };

// Añadir propiedad
usuario.ciudad = 'Madrid';

// Modificar propiedad
usuario.edad = 29;

// Eliminar propiedad
delete usuario.ciudad;

console.log(usuario); // { nombre: 'Ana', edad: 29 }

Métodos: funciones dentro de objetos

const calculadora = {
  valor: 0,

  sumar(n) {
    this.valor += n;
    return this; // permite encadenar
  },

  restar(n) {
    this.valor -= n;
    return this;
  },

  resultado() {
    return this.valor;
  },
};

calculadora.sumar(10).sumar(5).restar(3).resultado(); // 12

this dentro de un método hace referencia al propio objeto.

Las arrow functions no tienen su propio this. Para métodos de objeto que usan this, usa la sintaxis de función normal.


Desestructuración

Extrae propiedades en variables con una sintaxis compacta:

const usuario = { nombre: 'Ana', edad: 28, ciudad: 'Madrid' };

const { nombre, edad } = usuario;
// nombre = 'Ana', edad = 28

// Con alias
const { nombre: name, edad: years } = usuario;
// name = 'Ana', years = 28

// Con valor por defecto
const { rol = 'invitado' } = usuario;
// rol = 'invitado' — no existía en el objeto

Desestructuración en parámetros de función

// Sin desestructuración
function saludar(usuario) {
  return `Hola, ${usuario.nombre}. Tienes ${usuario.edad} años.`;
}

// Con desestructuración — más legible
function saludar({ nombre, edad }) {
  return `Hola, ${nombre}. Tienes ${edad} años.`;
}

saludar({ nombre: 'Ana', edad: 28, ciudad: 'Madrid' });

Spread operator en objetos

Copia o combina objetos:

const base = { nombre: 'Ana', rol: 'user' };

// Copiar
const copia = { ...base }; // objeto nuevo, mismas propiedades

// Combinar
const admin = { ...base, rol: 'admin', permisos: ['read', 'write'] };
// { nombre: 'Ana', rol: 'admin', permisos: [...] }
// 'rol' se sobreescribe porque viene después en el spread

Object.keys, Object.values, Object.entries

const producto = { nombre: 'Teclado', precio: 49, stock: 12 };

Object.keys(producto)
// ['nombre', 'precio', 'stock']

Object.values(producto)
// ['Teclado', 49, 12]

Object.entries(producto)
// [['nombre', 'Teclado'], ['precio', 49], ['stock', 12]]

Object.entries es especialmente útil para iterar sobre objetos:

for (const [clave, valor] of Object.entries(producto)) {
  console.log(`${clave}: ${valor}`);
}

O para transformar un objeto con map:

const precios = { manzana: 1.2, pera: 0.9, naranja: 1.5 };

const preciosConIVA = Object.fromEntries(
  Object.entries(precios).map(([fruta, precio]) => [fruta, precio * 1.21])
);
// { manzana: 1.452, pera: 1.089, naranja: 1.815 }

Objetos anidados

const usuario = {
  nombre: 'Ana',
  direccion: {
    calle: 'Gran Vía, 1',
    ciudad: 'Madrid',
    cp: '28001',
  },
  pedidos: [
    { id: 1, total: 49.99 },
    { id: 2, total: 120.00 },
  ],
};

usuario.direccion.ciudad       // 'Madrid'
usuario.pedidos[0].total       // 49.99

// Desestructuración anidada
const { nombre, direccion: { ciudad } } = usuario;
// nombre = 'Ana', ciudad = 'Madrid'

Lo que has aprendido en este curso

Con estas siete lecciones tienes los fundamentos sólidos de JavaScript:

  1. Variables y tiposconst, let, strings, numbers, booleans, null, undefined
  2. Operadores — aritmética, comparación estricta, lógica, ternario, ?., ??
  3. Condicionalesif/else, switch, early return, object lookup
  4. Buclesfor, for...of, for...in, while, break, continue
  5. Funciones — declarativas, expresiones, arrow functions, parámetros, scope
  6. Arraysmap, filter, find, reduce, forEach, spread, desestructuración
  7. Objetos — propiedades, métodos, desestructuración, spread, Object.keys/values/entries

Estos conceptos son el vocabulario de todo lo demás. React, Node.js, TypeScript, cualquier framework — todos asumen que los dominas. El siguiente paso natural es entrar en el JavaScript del navegador real: DOM, eventos, asincronía, fetch y módulos.

El siguiente curso, Curso de JavaScript Intermedio/Avanzado, coge estos fundamentos y los pone a trabajar en proyectos reales.

Si además quieres una guía de consulta rápida para sintaxis, arrays, objetos, funciones y patrones frecuentes, tienes la Cheat Sheet completa de JavaScript.