JavaScript
Explica cómo extraer propiedades con destructuring, renombrar bindings, aplicar valores por defecto y usar patrones anidados, rest y parámetros.
El destructuring de objetos permite extraer propiedades y guardarlas en bindings locales.
const user = {
name: "Nicolás",
role: "developer",
};
const { name, role } = user;Equivale conceptualmente a:
const name = user.name;
const role = user.role;const product = {
name: "Keyboard",
price: 120,
};
const { price } = product;JavaScript busca una propiedad llamada price.
El orden escrito no importa.
const { price, name } = product;Los objetos no se destructuran por posición, sino por clave.
const { name: productName } = product;name es la propiedad buscada.productName es el binding local creado.Después de esta declaración:
console.log(productName);
console.log(name); // ReferenceError, salvo que exista otro binding.const { currency = "USD" } = product;El valor por defecto se utiliza únicamente cuando la propiedad vale undefined o no existe.
const settings = {
theme: null,
pageSize: 0,
};
const {
theme = "light",
pageSize = 20,
} = settings;
console.log(theme); // null
console.log(pageSize); // 0null, 0, false y "" no activan el valor por defecto.
const {
currency: selectedCurrency = "USD",
} = product;Primero se busca currency; después el valor se guarda como selectedCurrency.
const order = {
customer: {
profile: {
name: "Nicolás",
},
},
};
const {
customer: {
profile: { name },
},
} = order;Este patrón crea name, pero no crea automáticamente bindings llamados customer o profile.
console.log(name);
console.log(customer); // ReferenceErrorLos patrones muy profundos pueden ser frágiles y difíciles de leer. En esos casos puede ser mejor dividir la extracción.
const { customer } = order;
const { profile } = customer;
const { name } = profile;Esto falla si customer es undefined:
const {
customer: { name },
} = order;Una alternativa es dar un objeto por defecto.
const {
customer: { name } = {},
} = order;Pero si order puede ser null o undefined, el destructuring exterior también falla.
const { customer } = order ?? {};No conviertas patrones complejos en un reemplazo de una validación necesaria.
const user = {
id: "user-123",
name: "Nicolás",
passwordHash: "secret",
};
const { passwordHash, ...publicUser } = user;publicUser recibe las demás propiedades propias enumerables.
console.log(publicUser);
// { id: "user-123", name: "Nicolás" }La copia es superficial. Los objetos anidados continúan compartiendo referencias.
Rest debe aparecer al final del patrón.
const { ...rest, id } = user; // SyntaxErrorfunction printUser({ name, role }) {
console.log(`${name}: ${role}`);
}Hace explícitas las propiedades utilizadas por la función.
También puede incluir un valor por defecto para el argumento completo.
function createButton({
label = "Continue",
disabled = false,
} = {}) {
return { label, disabled };
}Sin = {}, llamar createButton() produciría un error al intentar destructurar undefined.
function greet({ name = "Guest" } = {}) {
return `Hello, ${name}`;
}Casos:
greet(); // "Hello, Guest"
greet({}); // "Hello, Guest"
greet({ name: undefined }); // "Hello, Guest"
greet({ name: null }); // "Hello, null"En una declaración nueva:
const { name } = user;Para asignar sobre bindings existentes necesitas paréntesis.
let name;
let role;
({ name, role } = user);Sin paréntesis, las llaves pueden interpretarse como un bloque.
const field = "email";
const user = {
email: "nico@example.com",
};
const { [field]: value } = user;value recibe la propiedad cuyo nombre está en field.
const { name } = user;El objeto original no cambia.
Incluso con rest:
const { passwordHash, ...publicUser } = user;passwordHash sigue existiendo en user. Solo se construye otro objeto que no la incluye.
El patrón puede leer una propiedad heredada.
const base = {
role: "viewer",
};
const user = Object.create(base);
const { role } = user;
console.log(role); // "viewer"Sin embargo, object rest recoge propiedades propias enumerables, no heredadas.
Los valores por defecto se evalúan solo cuando son necesarios.
function createId() {
console.log("Generating ID");
return crypto.randomUUID();
}
const { id = createId() } = record;Si record.id existe y no es undefined, createId no se ejecuta.
function createRequestOptions({
method = "GET",
headers = {},
timeout = 5000,
...extraOptions
} = {}) {
return {
method: method.toUpperCase(),
headers,
timeout,
...extraOptions,
};
}La función:
Destructuring no siempre mejora la lectura.
const {
configuration: {
application: {
services: {
orders: {
endpoints: { create },
},
},
},
},
} = settings;El patrón oculta el camino y falla si falta cualquier nivel. Dividir el acceso o usar optional chaining puede ser más claro.
También evita extraer demasiadas propiedades si la relación con el objeto ayuda a entenderlas.
order.status;
order.total;
order.customer;Puede ser más expresivo que varios nombres sueltos en un scope grande.
null, 0 o false.null o undefined sin validar.= {} en parámetros opcionales.property: localName permite renombrar.undefined.¿Qué valores se obtienen?
const settings = {
theme: null,
pageSize: 0,
};
const {
theme = "light",
pageSize = 20,
language = "es",
} = settings;theme vale null, pageSize vale 0 y language vale "es". Los defaults solo se usan para propiedades ausentes o con valor undefined.
Spread, rest y copias diferencia las dos funciones de ... y explica qué información se expande, agrupa o copia.