Destructuring en Javascript
Tags: javascript, webdev
Published: 2021-08-10 15:22:21

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bp1sxpzp8tlp62z4aex.jpeg)

## **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:

<img src="https://i.postimg.cc/bdcNks1S/destructuring-javascript-01.png" alt="destructuring-javascript-01"/>

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:

<img src="https://i.postimg.cc/XYgdNb0k/destructuring-javascript-02.png" alt="destructuring-javascript-02"/>

## **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: 

<img src="https://i.postimg.cc/J79bPxqZ/destructuring-javascript-03.png" alt="destructuring-javascript-03"/>

El orden no importa. Esto también funciona:

<img src="https://i.postimg.cc/hv7tX9Qq/destructuring-javascript-04.png" alt="destructuring-javascript-04"/>

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

<img src="https://i.postimg.cc/c1KRR2Qd/destructuring-javascript-05.png" alt="destructuring-javascript-05"/>

**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:

<img src="https://i.postimg.cc/T3xnXPBP/destructuring-javascript-06.png" alt="destructuring-javascript-06"/>

## **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:

<img src="https://i.postimg.cc/Jh4JG2rV/destructuring-javascript-07.png" alt="destructuring-javascript-07"/>

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: 

<img src="https://i.postimg.cc/ncBq5mR5/destructuring-javascript-08.png" alt="destructuring-javascript-08"/>

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**?

<img src="https://i.postimg.cc/HLZM59nJ/destructuring-javascript-09.png" alt="destructuring-javascript-09"/>

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.

<img src="https://i.postimg.cc/76jTtPgw/destructuring-javascript-10.png" alt="destructuring-javascript-10"/>

## **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.

<img src="https://i.postimg.cc/RhfJkrRf/destructuring-javascript-11.png" alt="destructuring-javascript-11"/>

**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:

<img src="https://i.postimg.cc/B6jKCPPm/destructuring-javascript-12.png" alt="destructuring-javascript-12"/>

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

<img src="https://i.postimg.cc/7Y3TXkbr/destructuring-javascript-13.png" alt="destructuring-javascript-13"/>

## **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*:**

<img src="https://i.postimg.cc/kX3bx4Jy/destructuring-javascript-14.png" alt="destructuring-javascript-14"/>

**Con *destructuring*:**

<img src="https://i.postimg.cc/ryt40Wkm/destructuring-javascript-15.png" alt="destructuring-javascript-15"/>

## **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](https://twitter.com/angeluchh).