DEV Community

Cover image for Desestructuración de listas en Javascript
Eduardo Zepeda
Eduardo Zepeda

Posted on • Originally published at coffeebytes.dev

Desestructuración de listas en Javascript

En la entrada anterior expliqué un poco sobre el tema de la desestructuración de objetos en javascript. Además de la desestructuración de objetos, Javascript también permite desestructurar listas. En esta entrada hablaré sobre la destructuración de listas en Javascript.

Imaginemos que tenemos una lista con valores numéricos.

const scientificData = [15.222, 1.723, 1.313, 4.555, 2.333, 1.990]
Enter fullscreen mode Exit fullscreen mode

El contenido de la lista son solo números, no nos dicen absolutamente nada. Estos valores podrían ser coeficientes, mediciones de temperatura, longitudes de alguna pieza o algún gradiente de concentraciones de una solución; no tenemos manera de saberlo. Podríamos vernos tentados a procesar la información accediendo a los índices de cada valor de la lista, pero esto le restaría legibilidad al código.


if(scientificData[0] > limitValueMouse){
   repeatSample()
}
if(scientificData[1] > limitValueFly){
   repeatSample()
}
Enter fullscreen mode Exit fullscreen mode

En el fragmento de código anterior, si alguna de las condiciones excede cierta medida, repetimos el muestreo. Pero no sabemos de que muestreo habla por que no tenemos contexto, tan solo tenemos el índice de la lista.

Si nosotros fuimos quienes obtuvimos la información podríamos ser más descriptivos con el código para quienes lo lean en el futuro. Por esta razón decidimos asignarle una variable a cada índice de nuestra lista.


const lengthMouse = scientificData[0]
const lengthFly = scientificData[1]
Enter fullscreen mode Exit fullscreen mode

Sin embargo, si nuestra lista aumenta de tamaño estaremos repitiendo la misma estructura una y otra vez. Podemos ahorrarnos algo de código de la siguiente manera:


const [mouseLength, flyLength] = scientificData
Enter fullscreen mode Exit fullscreen mode

Usando este método asignamos el primer y el segundo valor de la lista a la variable mouseLength y flyLength, respectivamente.


if(mouseLength > limitValueMouse){
   repeatMouseSample()
}
if(flyLength > limitValueFly){
   repeatFlySample()
}
Enter fullscreen mode Exit fullscreen mode

Ahora el código es mucho más descriptivo y tus colegas, no tan iluminados como tú, podrán entenderlo

Pero oye, muy bonito y todo, pero que tal si mis objetos tienen otros objetos anidados y quiero obtener un valor de ellos. Bueno también podemos desestructurar objetos anidados, en la siguiente entrada explicaré brevemente como hacerlo.

Top comments (2)

Collapse
 
duxtech profile image
Cristian Fernando

Gracias por subir contenido en español, saludos

Collapse
 
zeedu_dev profile image
Eduardo Zepeda

¡Gracias a ti por leerme!