Desestructuración de Asignación en JavaScript
En JavaScript, las estructuras de datos más utilizadas son los objetos y los arrays. Los objetos nos permiten agrupar elementos con claves únicas, mientras que los arrays nos permiten organizar elementos en una lista ordenada. Sin embargo, al pasar estos datos a una función, podríamos no querer el objeto o el array completo, sino solo algunos elementos.
La desestructuración de asignación es una sintaxis especial que nos permite «desempaquetar» arrays u objetos en múltiples variables individuales, lo que a menudo resulta más conveniente.
Este tipo de desestructuración es particularmente útil en funciones complejas con muchos parámetros, valores predeterminados, y más. Vamos a ver cómo funciona con algunos ejemplos.
Desestructuración de Arrays
Un ejemplo simple de cómo un array puede ser desestructurado en variables es el siguiente:
// Tenemos un array con nombre y apellido
let arr = ["Juan", "Pérez"];
// Desestructuración de asignación
// Asigna firstName = arr[0]
// y lastName = arr[1]
let [firstName, lastName] = arr;
console.log(firstName); // Juan
console.log(lastName); // Pérez
Ahora podemos trabajar con variables en lugar de acceder directamente a los elementos del array. Esta técnica también es útil cuando usamos métodos como split que devuelven arrays:
let [firstName, lastName] = "Juan Pérez".split(' ');
console.log(firstName); // Juan
console.log(lastName); // Pérez
Aunque parece simple, hay algunos detalles importantes que deben considerarse. Vamos a explorar más ejemplos para comprender mejor esta técnica.
La desestructuración no modifica el array original
La desestructuración se llama así porque copia elementos en nuevas variables, pero no modifica el array original. Es solo una manera más simple de escribir:
let firstName = arr[0];
let lastName = arr[1];
Ignorar elementos usando comas
Podemos omitir elementos no deseados en un array usando comas adicionales:
// El segundo elemento no es necesario
let [firstName, , title] = ["Julio", "César", "Cónsul", "de la República Romana"];
console.log(title); // Cónsul
n el ejemplo anterior, el segundo elemento del array es ignorado, y el tercero se asigna a title.
Funciona con cualquier iterable
La desestructuración no se limita solo a arrays; también funciona con cualquier iterable:
let [a, b, c] = "abc"; // ["a", "b", "c"]
let [uno, dos, tres] = new Set([1, 2, 3]);
Internamente, la desestructuración utiliza un bucle for..of para iterar sobre el valor a la derecha del = y asignar esos valores.
Asignar a cualquier cosa en el lado izquierdo
Podemos usar cualquier cosa que sea «asignable» en el lado izquierdo de la desestructuración. Por ejemplo, propiedades de un objeto:
let user = {};
[user.nombre, user.apellido] = "Juan Pérez".split(' ');
console.log(user.nombre); // Juan
console.log(user.apellido); // Pérez
let user = {
nombre: "Juan",
edad: 30
};
// Iterar sobre claves y valores
for (let [key, value] of Object.entries(user)) {
console.log(`${key}: ${value}`); // nombre: Juan, luego edad: 30
}
Intercambio de variables
Un truco conocido para intercambiar los valores de dos variables usando desestructuración es:
let guest = "Ana";
let admin = "Pedro";
// Intercambio de valores
[guest, admin] = [admin, guest];
console.log(`${guest} ${admin}`); // Pedro Ana (intercambiados)
let [name1, name2, ...rest] = ["Julio", "César", "Cónsul", "de la República Romana"];
console.log(rest[0]); // Cónsul
console.log(rest[1]); // de la República Romana
console.log(rest.length); // 2
let [firstName = "Invitado", surname = "Anónimo"] = ["Julio"];
console.log(firstName); // Julio
console.log(surname); // Anónimo
let options = {
title: "Menú",
width: 100,
height: 200
};
let { title, width, height } = options;
console.log(title); // Menú
console.log(width); // 100
console.log(height); // 200
let options = {
title: "Menú",
width: 100,
height: 200
};
// { propiedadOrigen: variableObjetivo }
let { width: w, height: h, title } = options;
console.log(title); // Menú
console.log(w); // 100
console.log(h); // 200
let options = {
title: "Menú"
};
let { width = 100, height = 200, title } = options;
console.log(title); // Menú
console.log(width); // 100
console.log(height); // 200
let options = {
size: {
width: 100,
height: 200
},
items: ["Pastel", "Donut"],
extra: true
};
let {
size: { width, height },
items: [item1, item2],
title = "Menú"
} = options;
console.log(title); // Menú
console.log(width); // 100
console.log(height); // 200
console.log(item1); // Pastel
console.log(item2); // Donut
let options = {
title: "Mi menú",
items: ["Elemento1", "Elemento2"]
};
function showMenu({ title = "Sin título", width = 200, height = 100, items = [] }) {
console.log(`${title} ${width} ${height}`); // Mi menú 200 100
console.log(items); // Elemento1, Elemento2
}
showMenu(options);
let options = {
title: "Mi menú",
items: ["Elemento1", "Elemento2"]
};
function showMenu({
title = "Sin título",
width: w = 100,
height: h = 200,
items: [item1, item2]
}) {
console.log(`${title} ${w} ${h}`); // Mi menú 100 200
console.log(item1); // Elemento1
console.log(item2); // Elemento2
}
showMenu(options);
function showMenu({ title = "Menú", width = 100, height = 200 } = {}) {
console.log(`${title} ${width} ${height}`);
}
showMenu(); // Menú 100 200
let { prop: varName = default, ...rest } = objeto;
let [item1 = default, item2, ...rest] = array;
