Publicado el 07.02.2021 a las 15:42
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.
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
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
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/" }
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"
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 🖖