Desestructuración y spread de objetos
Extraiga propiedades de objetos mediante desestructuración, clone y combine objetos con el operador spread, y use parámetros rest en las firmas de funciones.
Desestructuración y spread de objetos es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué es la desestructuración?
La desestructuración extrae valores de objetos y arrays y los asigna a variables con nombre. Es una forma abreviada de escribir varias instrucciones de acceso a propiedades; hace que el código sea más conciso y comunica claramente qué propiedades se utilizan.
Fundamentos de la desestructuración de objetos
Use llaves en el lado izquierdo de una asignación para extraer propiedades con nombre.
const user = { name: 'Alice', age: 30, role: 'admin' };
// Without destructuring:
const name = user.name;
const age = user.age;
// With destructuring:
const { name, age, role } = user;
console.log(name); // 'Alice'
console.log(age); // 30Cambiar el nombre de variables desestructuradas
Use la sintaxis property: newName para cambiar el nombre de una propiedad durante la desestructuración. Resulta útil cuando el nombre de la propiedad entra en conflicto con una variable existente o no es suficientemente descriptivo.
const { name: userName, age: userAge } = user;
console.log(userName); // 'Alice'Valores predeterminados en la desestructuración
Si una propiedad es undefined, se utiliza un valor predeterminado. Puede combinarlo con el cambio de nombre.
const { name, role = 'viewer', theme = 'light' } = user;
// role is 'admin' (from object)
// theme is 'light' (default — not in object)Desestructuración de objetos anidados
Desestructure objetos anidados proporcionando patrones anidados.
const order = {
id: 42,
customer: { name: 'Bob', email: 'bob@example.com' },
total: 99.99
};
const { id, customer: { name, email }, total } = order;
console.log(name); // 'Bob'Desestructuración de arrays
Use corchetes para desestructurar arrays según su posición. Omita elementos mediante comas.
const [first, second, , fourth] = [10, 20, 30, 40];
console.log(first); // 10
console.log(second); // 20
console.log(fourth); // 40
// Swap variables:
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1Desestructuración de parámetros de función
Desestructure directamente en los parámetros de las funciones para crear API más claras y código autodocumentado. Es muy habitual en las funciones de componentes de React.
function greet({ name, greeting = 'Hello' }) {
return `${greeting}, ${name}!`;
}
greet({ name: 'Alice' }); // 'Hello, Alice!'
greet({ name: 'Bob', greeting: 'Hi' }); // 'Hi, Bob!'El operador spread en objetos
El operador spread { ...obj } crea una copia superficial de un objeto y permite combinar objetos. Cuando hay claves coincidentes, las posteriores sobrescriben a las anteriores.
const defaults = { theme: 'light', lang: 'en', debug: false };
const userPrefs = { theme: 'dark', lang: 'fr' };
const settings = { ...defaults, ...userPrefs };
// { theme: 'dark', lang: 'fr', debug: false }El operador spread en arrays
[...arr] crea una copia superficial de un array. Use spread para concatenar arrays y añadir elementos al principio o al final de forma inmutable.
const base = [1, 2, 3];
const extended = [...base, 4, 5]; // [1, 2, 3, 4, 5]
const prepended = [0, ...base]; // [0, 1, 2, 3]
const combined = [...base, ...extended]; // [1, 2, 3, 1, 2, 3, 4, 5]Sintaxis rest en la desestructuración
La sintaxis rest recopila las propiedades o los elementos restantes en un nuevo objeto o array. Rest debe ser el último patrón.
const { name, ...rest } = { name: 'Alice', age: 30, role: 'admin' };
console.log(name); // 'Alice'
console.log(rest); // { age: 30, role: 'admin' }
const [head, ...tail] = [1, 2, 3, 4];
console.log(head); // 1
console.log(tail); // [2, 3, 4]Copias superficiales y profundas
Tanto spread como la desestructuración crean copias superficiales. Los objetos y arrays anidados siguen siendo referencias compartidas. Realice una clonación profunda con structuredClone(obj) (moderno) o JSON.parse(JSON.stringify(obj)) (antiguo).
const a = { x: 1, nested: { y: 2 } };
const b = { ...a };
b.x = 99; // a.x is still 1 (shallow copy OK)
b.nested.y = 99; // a.nested.y is now 99! (reference shared)Comprobación rápida
¿Qué hace const { a, ...rest } = obj?
Resumen: desestructuración y spread
La desestructuración de objetos extrae propiedades con nombre. La desestructuración de arrays extrae valores según su posición. Cambie nombres con dos puntos y establezca valores predeterminados con =. Use patrones anidados para objetos profundos. Spread crea copias superficiales y combina objetos o arrays. Rest recopila las propiedades o los elementos restantes.
Preguntas frecuentes
¿La lección «Desestructuración y spread de objetos» es gratis?
Sí — el texto completo de «Desestructuración y spread de objetos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Desestructuración y spread de objetos»?
Extraiga propiedades de objetos mediante desestructuración, clone y combine objetos con el operador spread, y use parámetros rest en las firmas de funciones. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Desestructuración y spread de objetos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Métodos de arrays: map filter reduce find
- Desestructuración y spread de objetos
- Template literals y encadenamiento opcional
- Módulos: import y export