Cómo utilizar la desestructuración en JavaScript para escribir código más limpio y potente

A veces tienes que destruir para construir algo nuevo.-Mistborn: The Hero of Ages

ES6 nos presentó una de las características de JavaScript más esperadas: la desestructuración. Como concepto, la Desestructuración no es nueva ni revolucionaria y algunos lenguajes ya tenían Desestructuración (??) mucho antes. Pero era una característica muy necesaria y solicitada en JavaScript.

La desestructuración es el proceso de romper una estructura. En el contexto de la programación, las estructuras son las estructuras de datos, y la desestructuración de estas estructuras de datos significa desempaquetar valores individuales de la estructura de datos. En JavaScript, la desestructuración se puede aplicar a un objeto o una matriz.

La desestructuración hace, rompe lo que sea…. que uso le tenemos?

Antes de responder esa pregunta, tengamos una definición formal de Desestructuración. MDN al rescate!

La sintaxis de asignación de desestructuración es una expresión de JavaScript que hace posible descomprimir valores de matrices o propiedades de objetos en distintas variables. -MDN

Veamos algunos ejemplos para comprender mejor los conceptos básicos de la desestructuración.

Matrices

Muestra 1:

Cuando vi este sencillo código por primera vez, me quedé desconcertado. No entendí lo que pasó. Si eres como yo, déjame intentar explicarte.

En la línea 1, definimos 2 variables ay b. En la siguiente línea, ambas variables están dentro de una matriz en el lado izquierdo que a su vez se equipara a una matriz real en el lado de la conducción. En las líneas siguientes imprimimos los valores de a& by obtenemos 7 y 8 respectivamente, que eran los elementos de la matriz RHS. La magia que ocurre en la línea 2 se llama desestructuración.

El LHS desestructura el RHS y los valores obtenidos al descomprimir los elementos se asignan a las variables en orden.

¿Pero por qué está el LHS dentro de una matriz?

La asignación de desestructuración utiliza una sintaxis similar, en el LHS en comparación con el RHS para definir qué valores desempacar de la variable de origen.

Muestra 2:

Aquí hemos introducido ahora otra variable leftouten el código. Tenemos 2 tipos diferentes de usos leftouten el código.

  • [a,b,leftout]-> Esto asigna el tercer elemento de la matriz to leftcomo se esperaba.
  • [a,b,…leftout]-> Esto da los 2 primeros valores toaa ndb respectivamente y el resto de la matriz se asigna a la he leftovariable t ut.

La solución está en el operador. Este operador colapsa todos los argumentos restantes ( resto ) en una matriz. En el último punto, los primeros 2 elementos de la matriz se asignan a a& brespectivamente, y el resto de los argumentos se contraen en una matriz (¿reestructuración tal vez?) Y se asignan a la leftoutvariable. Podemos verificar lo mismo mirando la salida.

Objetos

Muestra 1:

La desestructuración funciona igual para objetos y matrices. El objeto en el LHS tiene propiedades a& bque se asignan respectivamente a las propiedades a& bdel objeto RHS. Obtenemos 1 y 2 respectivamente al imprimirlos.

Una cosa a tener en cuenta ( si es así ) es que hay un ligero cambio en la sintaxis ( ahora lo tiene ).

En la desestructuración de objetos, todo el LHS y el RHS están envueltos dentro ( )

Podemos ver el error que obtenemos cuando no lo envolvemos dentro. ().Dice declaración de declaración esperada.

Lo que realmente está sucediendo es que incluir algo entre corchetes {}confunde a JavaScript de modo que lo considera un bloque y no un Objeto. Debido a eso, está buscando una declaración para el bloque ( declaración de función ), por lo que incluimos el código dentro (). Esto lo convierte en una expresión en lugar de un bloque, y obtenemos nuestros resultados.

Muestra 2:

De nuevo el restoperador. Funciona igual que en las matrices, excepto que esta vez los valores restantes se contraen dentro de un objeto porque la estructura a utilizar está definida por el LHS.

¿Para qué se utiliza la desestructuración?

Como se ve en los ejemplos anteriores, ahora sabemos la importancia de la desestructuración. Hay muchos usos y diferentes casos de cómo se puede utilizar la desestructuración tanto para objetos como para matrices. Probaremos algunos de ellos. ( PD: los ejemplos son válidos tanto para objetos como para matrices, a menos que se indique lo contrario ) .

Asignación variable

Ya vimos cómo se asignan las variables en los ejemplos anteriores, así que echemos un vistazo a otro.

En este ejemplo, una matriz ya creada se asigna directamente para la desestructuración. No obstante, se asignan valores a las variables.

Lo mismo ocurre con el Objeto.

Valores predeterminados

A veces puede suceder que definamos el nnúmero de variables para obtener valores de la desestructuración, pero es posible que la matriz / objeto solo tenga n-xelementos. En este caso xse asignarán variables undefined.

Podemos ver que bno está definido porque la matriz simplemente no tiene tantos elementos para desestructurar y asignar cada variable.

La solución a eso es dar valores predeterminados a las variables, por lo que si no hay suficientes elementos, las variables toman valores predeterminados en lugar de quedar indefinidos.

Intercambio

El intercambio es el proceso de intercambiar valores entre 2 o más variables. Una forma estándar de realizar el intercambio es usar una variable temporal o usar XOR. En JavaScript, se puede hacer lo mismo mediante la desestructuración.

Intercambiar usando una temperatura variable. El código se explica por sí mismo.

Usando la desestructuración simplemente intercambiamos la posición de los elementos y ¡Voilà! Intercambio hecho.

Ignorando valores

Podemos capturar y usar solo los valores que se requieren y rechazar o ignorar los valores innecesarios.

Aquí podemos ver que ignoramos el valor medio al no asignarlo a ninguna variable, lo que nos ahorra la molestia.

Asignación indirecta de un retorno de función

Aquí podemos ver que la función x devuelve una matriz. En la línea 4 donde desestructuramos, proporcionamos la llamada a la función que devuelve la matriz y no la matriz directamente. Hace que el código sea ordenado y fácil de leer y comprender.

Asignación a nuevas variables

Las propiedades pueden descomprimirse de un objeto y asignarse a una variable con un nombre diferente al de la propiedad del objeto.

Podemos ver que los valores de las propiedades también son variables a las que se asignan valores mediante desestructuración.

Desestructuración de matrices y objetos anidados

Como podemos ver, esos datos son un objeto que tiene una propiedad llamada ubicación que a su vez contiene una matriz cuyos elementos son objetos.

Con la desestructuración tenemos que obtener los valores de todas las propiedades presentes dentro del objeto dentro de la matriz de ubicación.

Así que creamos un objeto llamado obj que contiene la misma estructura que el objeto de datos, y los valores que queremos descomprimir se proporcionan como variables (mylatitude, mylongitude, mycity). Estos, a su vez, se equiparan a la matriz de datos (igual que la sintaxis de desestructuración anterior). Cuando se imprimen las variables obtenemos los valores respectivos.

Desestructuración con bucle for-of

En el fragmento de código anterior, tenemos una matriz de objetos de personas cuyas propiedades a su vez contienen un objeto (personas> objeto> familia). Ahora queremos descomprimir algunos de los valores del objeto usando for..of loop.

En el bucle hemos asignado una variable de objeto, con la misma estructura que en la matriz de personas, ignorando los valores que no necesitamos. Hemos asignado variables n & m respectivamente al nombre y las propiedades madre, porque estos son los valores que queremos descomprimir. Dentro del ciclo imprimimos las variables y obtenemos los valores necesarios.

El panorama.

Tienes que usar la desestructuración en tu código o practicarlo para familiarizarte con él. Parece simple en los ejemplos porque los ejemplos son solo para hacerle comprender los conceptos básicos. Con operaciones complejas / múltiples (¡reduce ()!), La descestructuración puede volverse confusa rápidamente, ¡lo cual no queremos!

Además, también podría pensar que la desestructuración es solo una sintaxis de azúcar para realizar un conjunto de tareas (como si pudiéramos dar a las variables el valor de cada elemento de una matriz usando un bucle for). Hasta cierto punto, podemos decir que es azúcar, pero cuando miramos la imagen más amplia 'The Big Picture', entenderemos por qué la desestructuración tiene más valor que solo un minimizador de código.

JavaScript tiene muchas operaciones tanto para extraer como para construir datos, pero todas funcionan en un elemento a la vez.

Para construir

Para extraer (todavía uno a la vez)

Aunque existe una sintaxis para construir varias propiedades a la vez, pero solo se puede usar en el momento de la asignación, no se puede usar para alterar un objeto existente.

Antes de que se introdujera ES6, no existía ningún mecanismo para extraer todos los datos a la vez. Ahí es donde realmente ha llegado a brillar la desestructuración. Te permite extraer múltiples propiedades de un objeto. Lo hemos visto en los ejemplos anteriores.

Trampas

Solo hay uno en el que puedo pensar y lo discutimos:

  • Una declaración no debe comenzar con un corchete. {

Conclusión

Intenté simplificar la desestructuración demostrando tantos casos de uso de desestructuración como fuera posible. Espero que te haya dejado claro este concepto. Ahora puede utilizar la desestructuración para escribir código potente y limpio.