Desestructuración en JavaScript
Publicado el 07.02.2021 a las 16:42
Desestructuración en JavaScript
Desestructuración de arrays y objetos en JavaScript
La desestructuración es una función de algunos lenguajes como JavaScript, Phyton..., que nos permite desempaquetar valores de arrays u objetos en grupos de variables, permitiéndonos simplificar nuestro código y hacerlo menos verboso.
Desestructuración de objetos
Supongamos que tenemos el siguiente objeto:
const bici = {
id: 123,
nombre: 'Specialized',
fabricante: 'USA',
url: 'https://www.specialized.com/'
};
Antes de EM6, lo que hacíamos por ejemplo para obtener la propiedad nombre era:
const nombre = usuario.bici; console.log(nombre); //[LOG] Specialized
Pero con la desestructuración podemos hacer:
const { nombre } = bici;
console.log(nombre); //[LOG] Specialized
Valores por defecto
Además, si quieres asignar varias propiedades a distintas variables lo puedes hacer independientemente del orden:
const bici = {
id: 123,
nombre: 'Specialized',
fabricante: 'USA',
url: 'https://www.specialized.com/'
};
const { url, nombre } = bici;
console.log(url); //[LOG] https://www.specialized.com/
console.log(nombre); //[LOG] Specialized
El resto
En caso que el objeto tenga más propiedades que el número de variables que queremos crear, o querramos crear un nuevo objeto sin alguna propiedad, lo podemos hacer con el spread operator.
const bici = {
id: 123,
nombre: 'Specialized',
fabricante: 'USA',
url: 'https://www.specialized.com/'
};
const {nombre, ...restoInfo}=bici
console.log(nombre) //[LOG]: "Specialized"
console.log(restoInfo) //[LOG]: {
"id": 123,
"fabricante": "USA",
"url": "https://www.specialized.com/"
}
Campos anidados
Para obtener variables de parámetro anidados:
const bici = {
id: 123,
nombre: 'Specialized',
ubicacion: {
pais: 'USA',
estado: 'New York'
},
url: 'https://www.specialized.com/'
};
const { nombre, ubicacion:{ pais }}=bici;
console.log(nombre, pais);
//[LOG] "Specialized" "USA"
Cambiando el nombre por defecto
Si quieres crear una variable de un campo del objeto pero lo quieres con otro nombre distinto al campo lo hacemos con el nombre del campo seguido de : y después el nombre de la variables deseada.
En el siguiente ejemplo crearemos una variable nombreBici a partir del campo nombre del objeto.
const bici = {
id: 123,
nombre: 'Specialized',
fabricante: 'USA',
url: 'https://www.specialized.com/'
};
const {nombre:nombreBici, ...restoInfo}=bici
console.log(nombreBici) //[LOG]: "Specialized"
Hasta luego 🖖
¿Te gusta mi contenido? Apóyame
Puede que te interesen los siguientes artículos 👇
