¿Qué es destructuración?
La desestructuración es una característica bastante poderosa que nos permite separar keys
o llaves de un objeto en variables independientes, ello para mejorar la legibilidad y escribir un código más compacto y simplificado. Dicha característica está presente desde la especificación ES6 del lenguaje.
Sintaxis básica
const {key_1, key_2, ... key_n} = objeto;
Para una mejor comprensión de lo anterior mencionado vamos a analizar algunos ejemplos:
Imaginemos que contamos con un objeto literal y necesitamos imprimir su contenido, tendríamos que hacer algo como lo siguiente:
const superheroe = {
nombre: "Capitan América",
edad: 30,
peso: 100,
empresa: "Marvel"
};
console.log(`${superheroe.nombre} tiene ${superheroe.edad} años, pesa ${superheroe.peso} kg y es de ${superheroe.empresa}`)
//salida: "Capitan América tiene 30 años, pesa 100 kg y es de Marvel"
Como puedes apreciar, el ejemplo funciona bien, pero es poco mantenible y bastante redundante, es acá donde la destructuración de objetos puede ser implementada:
const superheroe = {
nombre: "Capitan América",
edad: 30,
peso: 100,
empresa: "Marvel"
};
const {nombre, edad, peso, empresa} = superheroe;
console.log(`${nombre} tiene ${edad} años, pesa ${peso} kg y es de ${empresa}`);
//salida: "Capitan América tiene 30 años, pesa 100 kg y es de Marvel"
Así de fácil podríamos re escribir el código usando destructuración.
A continuación, se nombraran algunas características importantes que se deben tener en cuenta a la hora de desestructurar un objeto:
La destructuración no se realiza de manera secuencial ordenada, sino por nombre de key
Probablemente esta sea la peculiaridad a tomar en cuenta más importante ya que puede generar muchas confusiones. Al momento de destructurar un objeto no importa el orden de las variables independientes, pero si interesa que tanto el key
del objeto como la variable independiente se llamen de la misma manera. Por ejemplo:
const perro = {
nombre: "Fufy",
raza: "Pequines",
sexo: "hembra",
edad: 5
};
const {sexo, nombre, edad, raza} = perro;
console.log(`${nombre} es una ${raza} ${sexo} de ${edad} años`)
//salida: "Fufy es una Pequines hembra de 5 años"
Destructura solo lo que necesitas
No es necesario destructurar el objeto en su totalidad, puedes destructurar solo los valores que necesites:
const persona = {
nombre: "Andrea",
apellido: "Gonzales",
edad: 15,
amigos: ["Roberto", "Ana", "Pedro"],
direccion: {
calle:25,
zona:"Los Olmos",
puerta: 25
},
mascota: false
};
const {nombre, apellido, mascota} = persona;
console.log(nombre, apellido, mascota);
//salida: Andrea, Gonzales, false
Es posible renombrar las keys
del objeto
Al momento de realizar una destructuración es importante que el nombre de la key
se igual al de la variable independiente.
Si esto no se cumple, obtendremos un error, por ejemplo:
const superheroe = {
nombre: "Capitan América",
edad: 30,
peso: 100,
empresa: "Marvel"
};
const {nombre, edad, peso, marca} = superheroe;
console.log(`${nombre} tiene ${edad} años, pesa ${peso} kg y es de ${marca}`);
//Uncaught SyntaxError: redeclaration of const superheroe
Este error de debe a que en el objeto tenemos la key
empresa pero en la destructuración usamos marca.
Nuevamente nos damos cuenta que la destructuración no se realiza por orden de
keys
sino por nombre de variables.
Entonces, ¿qué sucede si deseamos personalizar el nombre de la key
? Esto es posible y muy sencillo de realizar, tenemos que usar una sintaxis como la siguiente:
const {key_1, key_2:new_name} = object;
Por ejemplo:
const superheroe = {
nombre: "Capitan América",
edad: 30,
peso: 100,
empresa: "Marvel"
};
const {nombre, edad, peso, empresa:marca} = superheroe;
console.log(`${nombre} tiene ${edad} años, pesa ${peso} kg y es de ${marca}`);
//salida: "Capitan América tiene 30 años, pesa 100 kg y es de Marvel"
Valores por defecto
La destructuración acepta valores por defecto sin ningún problema:
const superheroe = {
edad: 30,
peso: 100,
empresa: "Marvel"
};
const {nombre = "Señor misterioso", edad, peso, empresa:marca} = superheroe;
console.log(`${nombre} tiene ${edad} años, pesa ${peso} kg y es de ${marca}`);
//salida: "Señor misterioso tiene 30 años, pesa 100 kg y es de Marvel"
El objeto superheroe no cuenta con la llave
nombre
pero en la destructuración creamos la llave y además un valor por defecto.
¿Qué sucede si destructuramos una llave inexistente?
Si intentamos destructurar una llave que no existe, el valor de retorno es undefined
:
const superheroe = {
nombre:"Batman",
edad: 40,
peso: 150,
empresa: "DC"
};
const {nombre, edad, peso, empresa, enemigos} = superheroe;
console.info(enemigos);
//salida: undefined
Es posible renombrar una key
y asignarle un valor por defecto
const superheroe = {
nombre:"Señor Patata",
edad: 19,
peso: 10,
};
const {nombre, edad, peso, empresa:marca = "Independiente"} = superheroe;
console.log(`${nombre} tiene ${edad} años, pesa ${peso} kg y es de ${marca}`);
//salida: "Señor Patata tiene 19 años, pesa 10 kg y es de Independiente"
En caso de que en el objeto existiese la propiedad empresa
el valor por defecto no se toma en cuenta:
const superheroe = {
nombre:"Señor Patata",
edad: 19,
peso: 10,
empresa:"Marvel"
};
const {nombre, edad, peso, empresa:marca = "Independiente"} = superheroe;
console.log(`${nombre} tiene ${edad} años, pesa ${peso} kg y es de ${marca}`);
//salida: "Señor Patata tiene 19 años, pesa 10 kg y es de Marvel"
Operador REST en destructuración de objetos
El operador REST (...) puede ser usado tranquilamente:
const superheroe = {
nombre:"Señor Patata",
edad: 19,
peso: 10,
empresa:"Marvel"
};
const {nombre, ...parametros} = superheroe;
console.log(nombre, parametros);
//salida: Señor Patata Object { edad: 19, peso: 10, empresa: "Marvel" }
Conclusiones
- La destructuración nos permite dividir las propiedades de un objeto en variables independientes para mejorar la legibilidad del código.
- Bastante útil en frameworks y librerías frondend como React.js.
- La destructuración no se basa en el orden de las propiedades, sino el el nombre de las llaves del objeto en cuestión.
- Es posible escribir una destructuración con las llaves desordenadas.
- Se pueden personalizar el nombre de las llaves usando la notación de dos puntos (key_original : key_nueva).
- Si intentamos acceder a una llave inexistente el valor de retorno es
undefined
. - Es posible usar valores por defecto.
- Es posible usar valores por defecto y renombramiento del nombre de las variables.
- El uso de los parámetros de tipo REST es permitido.
Top comments (0)