Una reintroducción a la tarea de desestructuración

¿Estás cansado de encadenar muchas claves con puntos para acceder a valores anidados en objetos? ¿ Frustrado porque arr[0]no es un nombre muy descriptivo? La asignación de desestructuración tiene un valor increíble al acceder a valores en matrices y objetos. Continúe leyendo para conocer varios casos de uso en los que esta sintaxis puede resultar útil.

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 gozado de una popularidad increíble es la asignación desestructurante. 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 directlyconst 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 su lanzamiento, 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 sólo por diversión, incluiré un ejemplo extraño que encontré el otro día.

1. Desestructuración anidada

Poder acceder a una clave de nivel superior dentro de un objeto, o al primer elemento de una matriz, es poderoso, pero también algo limitante. Solo elimina un nivel de complejidad y aún así 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 matrices anidadas. En este caso, no es necesario conocer la clave ya que no existe ninguna. Lo que necesitas saber es la posición de lo que estás buscando. Deberá proporcionar una variable de referencia (o marcador de posición de coma) para cada elemento hasta el que está buscando (llegaremos a 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 utilizarse con prudencia, como ocurre con cualquier herramienta. Reconozca su caso de uso y la audiencia de su código base. Considere la legibilidad y la facilidad de cambio en el futuro. Por ejemplo, si desea acceder únicamente a un subarreglo, quizás un mapa sea más adecuado.

2. Desestructuración de objetos y matrices

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

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 serie 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. Sólo podremos acceder al nombre del primer usuario; de lo contrario, intentaremos utilizar 'nombre' para hacer referencia a dos cadenas diferentes, lo cual no es válido. Nuestro próximo escenario de desestructuración debería solucionar este problema.

3. Alias

Como vimos en el ejemplo anterior (cuando tenemos claves repetidas dentro de diferentes objetos que queremos extraer), no podemos hacerlo de la manera "típica". Los nombres de las variables no se pueden repetir 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 es aplicable a 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 supone que el valor al que hace referencia está ahí, pero ¿y si no lo está? Nunca es agradable ensuciar el código con valores indefinidos. Ahí es cuando los valores predeterminados resultan ú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 los objetos, si el valor existe, se ignora el valor predeterminado. Al observar 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 los 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 organizationy eso está perfectamente bien. Todavía está disponible como referencia dentro del userobjeto, así.

user.organization

Para las matrices, en realidad hay dos formas de "ignorar" elementos. En el ejemplo de objetos, hacemos referencia específicamente a valores internos utilizando el nombre de clave asociado. Cuando se desestructuran los arrays, 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

Deestructuramos el primer y segundo elemento de la matriz y el resto es irrelevante. Pero ¿qué pasa con los elementos posteriores? Si se basa en la posición, ¿no tenemos que desestructurar cada elemento hasta encontrar el que queremos?

Resulta que no es así. En su lugar, 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. Saltando elementos donde queramos usando el marcador de posición de coma. Y nuevamente, como en el ejemplo del objeto, los elementos "ignorados" todavía están disponibles como referencia dentro de la roleCountsmatriz.

Ejemplo torpe

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 realizar 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 utilizar 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 con prudencia. Pero conocer todas sus opciones le ayudará a elegir la mejor.

Conclusión

JavaScript está lleno de matrices y objetos 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 desestructurante es una excelente manera de hacerlo. No solo maneja múltiples niveles de anidamiento, sino que también permite un acceso enfocado y proporciona valores predeterminados en el caso de referencias no definidas.

Incluso si ha utilizado la desestructuración durante años, hay muchos detalles ocultos en la especificación. Espero que este artículo te sirva como recordatorio de las herramientas que te brinda el lenguaje. La próxima vez que escribas código, ¡tal vez alguno de ellos te resulte útil!

(dm, yk, il)Explora más en

• javascript