Índice del contenido

Desestructuración de objetos anidados

Desestructuración de objetos anidados

En las entradas anteriores expliqué brevemente como llevar a cabo una desestructuración de objetos en Javascript, pero en la mayoría de los casos no tendremos la suerte de trabajar con objetos planos, sino que nos encontraremos con objetos anidados con varios niveles de profundidad. ¿Tendremos que conformarnos con olvidarnos de esta característica y hacer el trabajo explícitamente asignando una constante a cada objeto? Por suerte Javascript permite trabajar la desestructuración de objetos anidados.

Creemos un ejemplo de objeto para probar.

const user = {
  userIsLoggedIn: true, 
  data: {
    email: "[email protected]", 
    name:"Isabel", 
    lastName:"Allende", 
    location:{
      state: "Lima", 
      country: "Peru", 
      postalCode: "15048"
    }
  }
}

Obtengamos primero la propiedad userIsLoggedIn

const { userIsLoggedIn } = user
userIsLoggedIn
true

¿Pero y si ahora queremos asignar la propiedad state? Para lograrlo primero pensemos en la estructura del objeto. Nuestro objeto tiene tres niveles; en el primero, está userIsLoggedIn y data; en el segundo, email, name, lastName y location; en el tercer nivel, las propiedades state, country y postalCode. Es en este último nivel donde está la propiedad que intentamos desestructurar.

const user = {
  userIsLoggedIn: true, 
  data: {
    email: "[email protected]", 
    name:"Isabel", 
    lastName:"Allende", 
    location:{
      state: "Lima", 
      country: "Peru", 
      postalCode: "15048"
    }
  }
}

El primer nivel es data, por lo que colocaremos dos puntos “:” ahí y seguiremos descendiendo hasta el nivel deseado . Dejemos pendiente el resto asignándole un “{…}”. Si estás siguiendo este ejemplo no le des ENTER hasta el final.

const {data:{...}}

El segundo nivel que nos lleva a nuestra propiedad state es location. Por lo que extendemos nuestra asignación anterior:

const {data:{location:{...}}}

Nuestra proppiedad state se encuentra en el tercer nivel, por lo que ya no hay que descender más, simplemente colocamos la constante a continuación.

const {data: {location:{state}}}=user
state
"Lima"

Ahora sí ya puedes darle ENTER, cuando accedas a la constante state, verás que hace referencia a la propiedad state, anidada del objeto.

Accediendo a más de una propiedad

El ejemplo anterior no estuvo tan complicado, pero que tal si en lugar de una sola propiedad queremos desestructurar el valor de userIsLoggedIn, email y state.

Para hacer lo anterior bastaría con que ubicaramos en que nivel se encuentran la propiedades que queremos desestructurar e incluirlas en el nivel adecuado en nuestra sentencia de código pasado:

const {userIsLoggedIn, data: {email, location:{state}}}=user
userIsLoggedIn
true
email
"[email protected]"
state
"Lima"

En la siguiente entrada hablaré sobre como asignar valores por defecto al desestructurar objetos.

Otros posts recomendados

Eduardo Zepeda picture

Eduardo Zepeda

Desarrollador web y entusiasta de GNU/Linux. Me siento bastante cómodo usando Python, Javascript/Typescript y Go: el odiado lenguaje de la mascotita azul. También creo en las bondades de la criptografía fuera de la especulación monetaria. Mensaje secreto en Vigenere: Yy pgkvnvm yw tvdmg k bp oqntq yonaqniomm dxzdeu. Mgz emzr, rdcyvqkanyyymm znumszl kdepfcqbkjs a ocpgkda huwnbwi. Lkzepwqi mg bucxkz swbyc izztgzwthaj y hmfdh, xjr na kfx, ad pwpcdmm gegd ydmw vgtqalfm zn Vicemmm.