Hombre arrastrándose roto en partes

Desestructuración de arrays y objetos

ES6 o ES2015 ha llegado para quedarse, este nuevo estándar trae muchas novedades, y muchas de ellas pensando en escribir menos código y que este sea más conciso.

Hoy vamos a hablar de la desestructuración, un nuevo concepto que nos brinda ES6 y que tiene muchas posibilidades.

Para aquellos que no estéis familiarizados con esta nueva sintaxis, hemos de deciros que no funciona al 100% en todos los navegadores, pero gracias a compiladores como Babel podréis escribir código en ES6 y dejar que este compilador lo transforme a ES5 permitiendo que la mayor parte de navegadores puedan interpretarlo.

Desestructuración de Arrays

Para entender mejor como nos ayuda este nuevo concepto, vamos a mostrar un ejemplo de como hemos resuelto este problema hasta ahora:

Este ejemplo nos muestra como para poder crear un conjunto de variables que almacenen los valores de un array, debemos crear las variables y acceder a la correspondiente posición del mismo.

Aplicando la desestructuración de Arrays tendríamos el siguiente código:

En primer lugar indicaremos que hemos utilizado los tipos de variables const y let, si no estás familiarizado con ellas puedes ver su documentación o sustituirlos por var.

Como podéis observar en el ejemplo, en una sola línea hemos logrado hacer la creación y asignación de los valores del array a nuevas variables.

Os preguntaréis que hubiese ocurrido si quisiésemos tan solo almacenar en variables el primer y tercer valor. Para salvar este caso y otros, existe un mecanismo que consiste en introducir comas omitiendo el valor que ocupa dicha posición, por ejemplo:

Valores por defecto

En ocasiones puede ser interesante almacenar un valor por defecto en las variables en caso de no recibir ningún valor en ellas:

Anidamiento

También podemos realizar la desestructuración con elementos anidados, para ello usaremos la sintaxis de corchetes para dichos arrays anidados:

Resto de elemento (Rest items) …

Rest items es un concepto que se utiliza en más partes de ES6, su sintaxis son tres puntos … que precederán al nombre de la variable, al hacer esto, dicha variable almacenará el resto de valores, y en este caso por tanto será un array. Veamos un ejemplo que aclare todo esto:

Desestructuración de objetos

Como veremos a continuación el concepto es el mismo, y las distintas posibilidades vistas en el caso de los arrays son aplicables también a los objetos.

Como podemos ver el concepto es el mismo tan sólo ha variado la sintaxis, utilizando en este caso las llaves en lugar de los corchetes.

Valores por defecto

Para asignar valores por defecto la sintaxis es la misma que para el caso de los arrays:

Como habréis podido observar hasta ahora, los nombres de las variables que hemos usado han coincidido con el nombre de las claves del objeto, pero podemos utilizar otras si es necesario:

Anidamiento

Al igual que en el ejemplo anterior, podríamos cambiar el nombre de la variable en el anidamiento.

Destructuración mixta

Hasta ahora hemos visto como funciona la desestructuración de forma separada para arrays y objetos, ahora mostraremos un ejemplo sencillo de su uso mixto:

En definitiva gracias a la desestructuración podemos realizar asignaciones en pocas líneas de una forma intuitiva, este proceso de asignación de objetos y arrays a variables es algo muy común en JavaScript especialmente cuando manejamos objetos recibidos por APIs

Esperamos que os sirva de ayuda y os haga indagar en las nuevas posibilidades de ES6.