La desestructuración es una característica muy conveniente al desarrollar con JavaScript, es una expresión que nos permite desempaquetar valores de arrays u objetos en grupos de variables, permitiéndonos simplificar y crear código más legible
.
La sintaxis básica sería:
let { variable1, variable2 } = { variable1: ..., variable2: ... }
Supongamos que tenemos el siguiente ejemplo de un objeto en JavaScript:
const usuario = {
id: 123,
nombre: 'Alex',
apellidos: 'Tomás',
url: 'https://alextomas.com'
};
Antiguamente, para obtener la una propiedad del objeto usuario
haríamos algo como:
const nombre = usuario.nombre;
console.log(nombre);
// Resultado -> Alex
Eso no está mal, pero podemos dejarlo más limpio con la desestructuración.
const usuario = {
id: 123,
nombre: 'Alex',
apellidos: 'Tomás',
url: 'https://alextomas.com'
};
const { id, nombre, apellidos, url } = usuario;
console.log(id, nombre, apellidos, url);
// Resultado -> 123 Alex Tomás https://alextomas.com
Las propiedades usuario.id
, usuario.nombre
, usuario.apellidos
y usuario.url
, se asignan a las variables correspondientes, sin importar su orden.
Si quieres cambiar el nombre de las variables cuando las asignas mediante desestructuración, también puedes hacerlo de la siguiente forma:
const moto = {
tipo: 'Race',
modelo: 'Yamaha MT09',
matriculacion: 2018
};
const { tipo: type, modelo: model, matriculacion: year } = moto;
console.log(type, model, year);
// Resultado -> "Race" "Yamaha MT09" 2018
Así de sencillo.
const television = {
pulgadas: 52,
fabricante: 'LG'
};
const { pulgadas, fabricante, smart = true } = television;
console.log(pulgadas, fabricante, smart);
// Resultado -> 52 "LG" true
En caso que el objeto tenga más propiedades que el número de variables que requerimos crear, podemos guardar el resto de la información en un último parámetro utilizando tres puntos.
let mascota = {
raza: 'perro',
nombre: 'Max',
edad: 8.5
};
let { raza, ...rest } = mascota;
console.log(raza)
console.log(rest)
// Resultado:
// "perro"
// Object {
// edad: 8.5,
// nombre: "Max"
// }
Puedes tener el caso de que un objeto está compuesto de otros objetos y matrices, así que también podemos usar patrones más complejos del lado izquierdo para extraer partes más profundas.
let automovil = {
tipo: 'coche',
marca: 'Peugeot',
caracteristicas: {
cv: 115,
carburante: 'diesel'
}
};
const { marca, caracteristicas: { cv }} = automovil;
console.log(marca, cv)
// Resultado -> "Peugeot" 115
Puedes ver el código funcionando en este Codepen.
Y esto es todo. Espero que te pueda servir 🙃