Objetos
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 usanthis, 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:
- Variables y tipos —
const,let, strings, numbers, booleans, null, undefined - Operadores — aritmética, comparación estricta, lógica, ternario,
?.,?? - Condicionales —
if/else,switch, early return, object lookup - Bucles —
for,for...of,for...in,while,break,continue - Funciones — declarativas, expresiones, arrow functions, parámetros, scope
- Arrays —
map,filter,find,reduce,forEach, spread, desestructuración - 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.