Desestructuración de objetos anidados en Javascript

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

¿Cómo desestructurar propiedades anidadas?

¿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.

¿Cómo desestructurar múltiples propiedades?

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 .