Una reintroducción a la tarea de desestructuración

Si escribe JavaScript, probablemente esté familiarizado con ES2015 y todos los nuevos estándares de lenguaje que se introdujeron. Uno de esos estándares que ha tenido una popularidad increíble es la asignación de desestructuración. La capacidad de "sumergirse" en una matriz u objeto y hacer referencia a algo dentro de él de manera más directa. Suele ser algo como esto.

 const response = { status: 200, data: {} } // instead of response.data we get... const {data} = response //now data references the data object directly const objectList = [ { key: 'value' }, { key: 'value' }, { key: 'value' } ] // instead of objectList[0], objectList[1], etc we get... const [obj, obj1, obj2] = objectList // now each object can be referenced directly

Sin embargo, la asignación de desestructuración es una pieza de sintaxis tan poderosa que muchos desarrolladores, incluso aquellos que la han estado usando desde que se lanzó por primera vez, olvidan algunas de las cosas que puede hacer. En esta publicación, veremos cinco ejemplos del mundo real para la desestructuración de objetos y matrices, ¡a veces ambas! Y solo por diversión, incluiré un ejemplo extraño que encontré el otro día.

1. Destrucción anidada

Ser capaz de acceder a una clave de nivel superior dentro de un objeto o al primer elemento de una matriz es poderoso, pero también es algo limitante. Solo elimina un nivel de complejidad y todavía terminamos con una serie de puntos o [0] referencias para acceder a lo que realmente buscamos.

Resulta que la desestructuración puede funcionar más allá del nivel superior. Y puede haber razones válidas para hacerlo. Tome este ejemplo de una respuesta de objeto de una solicitud HTTP. Queremos ir más allá del objeto de datos y acceder solo al usuario. Mientras sepamos las claves que estamos buscando, eso no es un problema.

 const response = { status: 200, data: { user: { name: 'Rachel', title: 'Editor in Chief' }, account: {}, company: 'Smashing Magazine' } } const {data: {user}} = response // user is { name: 'Rachel', title: 'Editor in Chief'}

Lo mismo se puede hacer con arreglos anidados. En este caso, no necesita saber la clave ya que no hay ninguna. Lo que necesitas saber es la posición de lo que estás buscando. Deberá proporcionar una variable de referencia (o un marcador de posición de coma) para cada elemento hasta el que está buscando (hablaremos de eso más adelante). La variable puede tener cualquier nombre, ya que no intenta hacer coincidir un valor dentro de la matriz.

 const smashingContributors = [['rachel', ['writer', 'editor', 'reader']], ['laurie', ['writer', 'reader']]] const [[rachel, roles]] = smashingContributors // rachel is 'rachel' // roles is [ 'writer', 'editor', 'reader' ]

Tenga en cuenta que estas funciones deben usarse con prudencia, como con cualquier herramienta. Reconozca su caso de uso y la audiencia de su base de código. Considere la legibilidad y la facilidad de cambio en el futuro. Por ejemplo, si desea acceder solo a un subarreglo, tal vez un mapa se ajuste mejor.

2. Destrucción de objetos y matrices

Los objetos y las matrices son estructuras de datos comunes. Tan comunes, de hecho, que a menudo uno aparece dentro del otro. Más allá de la desestructuración anidada, podemos acceder a las propiedades anidadas incluso si están en un tipo de estructura de datos diferente a la externa a la que estamos accediendo.

Tome este ejemplo de una matriz dentro de un objeto.

 const organization = { users: ['rachel', 'laurie', 'eric', 'suzanne'], name: 'Smashing Magazine', site: 'https://www.smashingmagazine.com/' } const {users:[rachel]} = organization // rachel is 'rachel'

El caso de uso opuesto también es válido. Una matriz de objetos.

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name}] = users // name is 'rachel'

Resulta que tenemos un pequeño problema en este ejemplo. Solo podemos acceder al nombre del primer usuario; de lo contrario, intentaremos usar 'nombre' para hacer referencia a dos cadenas diferentes, lo cual no es válido. Nuestro próximo escenario de desestructuración debería resolver esto.

3. Alias

Como vimos en el ejemplo anterior (cuando tenemos llaves repetitivas dentro de diferentes objetos que queremos sacar), no podemos hacerlo de la manera “típica”. Los nombres de variables no pueden repetirse dentro del mismo ámbito (esa es la forma más sencilla de explicarlo, obviamente es más complicado que eso).

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name: rachel}, {name: laurie}] = users // rachel is 'rachel' and laurie is 'laurie'

El alias solo se aplica a los objetos. Esto se debe a que las matrices pueden usar cualquier nombre de variable que elija el desarrollador, en lugar de tener que coincidir con una clave de objeto existente.

4. Valores predeterminados

La desestructuración a menudo asume que el valor al que hace referencia está ahí, pero ¿y si no es así? Nunca es agradable ensuciar el código con valores indefinidos. Ahí es cuando los valores predeterminados son útiles.

Veamos cómo funcionan para los objetos.

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name='Brian', role='publisher'} = user // name is Luke // role is publisher

Si la clave a la que se hace referencia ya tiene un valor, se ignora el valor predeterminado. Si la clave no existe en el objeto, se utiliza la predeterminada.

Podemos hacer algo similar para las matrices.

 const roleCounts = [2] const [editors = 1, contributors = 100] = roleCounts // editors is 2 // contributors is 100

Al igual que con el ejemplo de objetos, si el valor existe, se ignora el valor predeterminado. Mirando el ejemplo anterior, puede notar que estamos desestructurando más elementos de los que existen en la matriz. ¿Qué pasa con la desestructuración de menos elementos?

5. Ignorar valores

Una de las mejores partes de la desestructuración es que le permite acceder a valores que forman parte de una estructura de datos más grande. Esto incluye aislar esos valores e ignorar el resto del contenido, si así lo desea.

De hecho, vimos un ejemplo de esto antes, pero aislemos el concepto del que estamos hablando.

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name} = user // name is Luke

En este ejemplo, nunca desestructuramos la organization y eso está perfectamente bien. Todavía está disponible como referencia dentro del objeto de user , así.

 user.organization

Para las matrices, en realidad hay dos formas de "ignorar" los elementos. En el ejemplo de objetos, nos referimos específicamente a valores internos mediante el nombre de clave asociado. Cuando se desestructuran los arreglos, el nombre de la variable se asigna por posición. Comencemos ignorando los elementos al final de la matriz.

 const roleCounts = [2, 100, 100000] const [editors, contributors] = roleCounts // editors is 2 // contributors is 100

Desestructuramos el primer y segundo elemento de la matriz y el resto es irrelevante. Pero, ¿qué hay de los elementos posteriores? Si está basado en la posición, ¿no tenemos que desestructurar cada elemento hasta encontrar el que queremos?

Resulta que no lo hacemos. En cambio, usamos comas para implicar la existencia de esos elementos, pero sin variables de referencia, se ignoran.

 const roleCounts = [2, 100, 100000] const [, contributors, readers] = roleCounts // contributors is 100 // readers is 100000

Y podemos hacer ambas cosas al mismo tiempo. Saltar elementos donde queramos usando el marcador de posición de coma. Y nuevamente, al igual que con el ejemplo del objeto, los elementos "ignorados" todavía están disponibles para referencia dentro de la matriz roleCounts .

Ejemplo inestable

El poder y la versatilidad de la desestructuración también significa que puedes hacer cosas realmente extrañas. Es difícil decir si serán útiles o no, ¡pero vale la pena saber que es una opción!

Un ejemplo de ello es que puede utilizar la desestructuración para hacer copias superficiales.

 const obj = {key: 'value', arr: [1,2,3,4]} const {arr, arr: copy} = obj // arr and copy are both [1,2,3,4]

Otra cosa para la que se puede usar la desestructuración es la desreferenciación.

 const obj = {node: {example: 'thing'}} const {node, node: {example}} = obj // node is { example: 'thing' } // example is 'thing'

Como siempre, la legibilidad es de suma importancia y todos estos ejemplos deben usarse judicialmente. Pero conocer todas sus opciones lo ayuda a elegir la mejor.

Conclusión

JavaScript está lleno de objetos y matrices complejos. Ya sea la respuesta de una solicitud HTTP o conjuntos de datos estáticos, es importante poder acceder al contenido incrustado de manera eficiente. Usar la asignación de desestructuración es una excelente manera de hacerlo. No solo maneja múltiples niveles de anidamiento, sino que permite un acceso enfocado y proporciona valores predeterminados en el caso de referencias indefinidas.

Incluso si ha utilizado la desestructuración durante años, hay muchos detalles ocultos en la especificación. Espero que este artículo haya servido como un recordatorio de las herramientas que te brinda el lenguaje. La próxima vez que esté escribiendo código, ¡quizás uno de ellos le resulte útil!