Destructuring en Javascript

Definición.

Destructuring, o destructuración, es una nueva característica de ES6 para Javascript que nos da la posibilidad de poder tomar los datos de objetos o arrays directamente y de manera múltiple, para extraerlos a variables o constantes. Lo cuál la desestructuración nos permite escribir código limpio y legible.

¿Dónde se puede aplicar?

El destructuring se puede aplicar en diferentes sitios, suelen ser:

• Retornos de funciones
• Parámetros en las funciones
• Funciones de trabajo con arrays
• Destructuring múltiple
• Importación de objetos
• Destructuring en React

"Desestructurar" no significa "destructivo".

Se llama "asignación de desestructuración" porque se "desestructura" copiando elementos en variables. Pero la matriz en sí no se modifica.

Es solo una forma más corta y limpia de escribir y/o entender el código.

Sintaxis

La sintaxis del destructuring es muy sencilla. Por un lado tenemos el objeto que queremos destructurar. Para extraer sus propiedades usamos las "llaves" { }, metiendo dentro de ellas sus respectivos nombres y con esto tenemos nuevas variables que contienen estas propiedades:

Si queremos poner nombres específicos para estas nuevas variables bastará con poner "dos puntos" :, seguido del nuevo nombre de variable que queramos asignar en las propiedades destructuradas:

Desestructuración de objetos (Object destructuring)

La asignación de destructuring también funciona con objetos, como lo vimos en las anteriores imágenes.

En la siguiente imagen observamos las propiedades options.title, options.width y options.height que se asignan a las variables correspondientes.

Por ejemplo:

El orden no importa. Esto también funciona:

Si tenemos un objeto complejo con muchas propiedades, podemos extraer solo lo que necesitamos:

El patrón de descanso "..."

¿Qué pasa si el objeto tiene más propiedades de las variables que tenemos? ¿Podemos tomar un poco y luego asignar el "resto" a alguna parte?

Podemos usar el patrón de descanso, (también se puede realizar en matrices). No es compatible con algunos navegadores más antiguos (IE, use Babel para rellenarlo), pero funciona en los modernos.

Un ejemplo:

Desestructuración de arreglos (Arrays destructuring)

Acceder a los elementos de la matriz manualmente

En la siguiente imagen se muestra un ejemplo para acceder manualmente a los elementos de la matriz:

La mayoría de las veces, el tamaño de una matriz es grande y usamos un bucle para recorrer cada elemento de las matrices. A veces, es posible que tengamos arreglos cortos. Si el tamaño de la matriz es muy corto, está bien acceder a los elementos manualmente como se muestra arriba, pero a continuación veremos una mejor manera de acceder al elemento de la matriz que se está desestructurando.

Acceder a elementos de la matriz mediante desestructuración

En la siguiente imagen se muestra un ejemplo para acceder mediante destructuring a los elementos de la matriz:

Durante el destructuring, cada variable debe coincidir con el índice del elemento deseado en la matriz. Por ejemplo, la variable mex coincide con el índice 0 y la variable col coincide con el índice 2. ¿Cuál sería el valor de arg si tiene una variable arg después de col?

Si intento la tarea anterior, confirmó que el valor no está definido. En realidad, podemos pasar un valor predeterminado a la variable, y si el valor de ese índice específico no está definido, se utilizará el valor predeterminado.

Desestructuración anidada (Nested destructuring)

Si un objeto o una matriz contiene otros objetos y matrices anidados, podemos usar patrones del lado izquierdo más complejos para extraer porciones más profundas.

Saltarse un objeto durante la desestructuración

Durante el destructuring, si no estamos interesados ​​en todos los elementos, podemos omitir un elemento determinado poniendo una coma en ese índice. Saquemos solo México, Colombia y Brasil de la matriz. A continuación en la siguiente imagen se puede observar con más claridad:

Obtener el resto de la matriz usando el operador de propagación usamos tres puntos (...) para extender u obtener el resto de una matriz durante el destructuring.

Desestructuración en React (React Destructuring)

Destructuring es una técnica usada mucho en los componentes React ya que les da mucha más legibilidad. Las props suelen ser un blanco fácil para poder realizar el destructuring siempre que se use más de una.

Si comparamos las siguiente imágenes con o sin destructuring podemos ver la diferencia y legibilidad entre ellos.

Sin destructuring:

Con destructuring:

Conclusión

Destructuring es una nueva característica muy potente del lenguaje que nos permite escribir código más legible, aunque por mi experiencia, como todo no hay que abusar de ella. En este artículo hablamos de pequeños ejemplos, pero seguramente si lo que vas a destructurar solamente tiene una propiedad, la mejor opción es no hacerlo, debido a que el Destructuring agarra mucha fuerza sobre todo cuando se usan varias propiedades de un mismo objeto que se pueden destructurar, ya que al hacer el desglose de las propiedades todo suele quedar más limpio y claro. Te lo recomiendo, al leer un código con destructuring lo vas agradecer.

Sígueme:

Twitter.