JavaScript Nested Destructuring

JavaScript Nested Destructuring es uno de los conceptos que siempre al final tenemos que aplicar cuando trabajamos con estructuras de objetos anidados en JavaScript . Vamos a ver unos ejemplos sencillos de como el anidamiento funciona a niveles de destructuring.

JavaScript Destructuring

El primer paso es recordar cual es el concepto de Javascript destructuring a nivel básico . Esta capacidad de JavaScrip esta diseñada para desmontar estructuras complejas y poder usarlas como variables sencillas.

var lista=[1,2,3];
[a,b,c]= lista;

console.log(a);
console.log(b);
console.log(c);

Este es el caso más sencillo en el cual desectructuramos un array e imprimimos su información por la consola.

Acabamos de convertir un array en tres variables:

De igual manera podemos desectructurar un objeto completo y acceder a los valores de sus propiedades.

var persona= {nombre:"pedro",edad:20};

const {nombre,edad} = persona;

console.log(nombre);
console.log(edad);

El resultado se muestra en la consola:

Acabamos de desectructurar un objeto en JavaScript y convertirlo en sus propiedades básicas.

Javascript Nested Destructuring

Otra de las opciones que tenemos es realizar un JavaScript Destructuring anidado y aplicarlo a un array.

var lista2=[1,2,3,[4,5]];

[a,b,c,[d,e]]=lista2;
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);

En este caso estamos convirtiendo un array multidimensional en variables sencillas:

JavaScript Objects

Otra de las situaciones comunes que podemos necesitar desestructurar es un objeto complejo:

var otraPersona= {nombre:"pedro",edad:20, profesion:{ titulo:"ingeniero", experiencia:5}};
const {nombre,edad,profesion:{titulo,experiencia}} = otraPersona;
console.log(nombre);
console.log(edad);
console.log(titulo);
console.log(experiencia)

En este caso tenemos un objeto que contiene propiedades anidadas para la profesion podemos usar javascript y desectructurarlo.

El uso de JavaScript Destructuring nos hace todo mucho más sencillo de construir.

Otros artículos relacionados

• JavaScript Promise
• JavaScript Sincrono o Asíncrono
• JavaScript Tagged Templates y flexibilidad