Destructuring en javascript

Introducción

Hablaré de la desestructuración en javascript. Aplicaré la misma estructura de contenido como en todos mis stories en Medium. Veremos como ésta característica de ES6 nos facilita mucho a la hora de programar.

¿Qué es destructuring?

La desestructuración (destructuring) es una forma de extraer valores de un array u objeto en distintas variables.

Por ejemplo, tenemos un array con 2 elementos, ahora imagina que queremos guardar cada elemento en distintas variables que hemos declarado, la forma común sería acceder a la pocisión en el array para obtener el valor y asignarlo a la variable deseada, algo así miVar = arr[0] . Ahora con los objetos pasa algo similar, solo que ahora se accede a la propiedad del objeto, miVar = obj.propiedad. Ahora con la desestructuración es mucho más limpio y cómodo realizar este tipo de asignaciones. A continuación veremos cómo utilizar la desestructuración en arrays y en objetos.

Todo lo presentaré con ejemplos y no redactaré mucho para no hacer largo el contenido.

Destructuring en arrays

La forma de utilizar la desestructuración es la siguiente:

También se puede usar la desestructuración con variables previamente declaradas.

Valores por defecto

Es posible asignar valores por defecto si el array no tiene la pocisión en donde se aplica la desestruturación. Cuando el valor es undefined el valor por defecto se asigna en su lugar. Como en el ejemplo tenemos un array de una posición y queremos hacer la desestructuración para 2 posiciones, por lo tanto, no hay valor para asignar a la variable b y en ese caso se le asigna el valor por defecto.

Intercambio de valores entre variables

Lo que comúnmente se hace al momento de intercambiar valores entre 2 variables es declarar una variable auxiliar para no perder el valor de alguna de las 2 variables que intercambiarán sus valores y luego asignar el valor de la variable auxiliar a la variable que corresponda, como el siguiente ejemplo:

Ahora podemos hacer lo mismo de una manera más corta, de la siguiente forma:

Ignorando valores

Algunas veces necesitaremos ignorar algunos valores de una colección, imagina que tenemos un array con 3 posiciones y queremos solo obtener los valores de la primera posición y de la última posción, por ejemplo:

O solo obtener las primeras 2 posiciones e ignorar el resto.

Utilizando rest en destructuring

Si no saben como se usan los parámetros rest tengo otro story en donde hablo de los spreads y rest en javascript.

En ocaciones quisieramos obtener la mayor parte del array e obtener solo algunos valores en variables independientes.

Hemos extraido la primera posición en la variable a y el resto del array lo almacenamos en la variable b.

Destructuring en objetos

Usar desestructuración en objetos es un tanto parecido, con la única diferencia es que las variables que se utilizan para obtener algún valor de calquiera de las propiedades del objeto, tienen que tener el mismo nombre. como se muestra a continuación:

De la misma manera, podemos hacer destructuring con variables previamente creadas.

La única diferencia es que debemos encerrarlo en parentesis, esto es debido a que javascript detectará las llaves como un bloque de código ({ a, b }) y eso dará un error de sintaxis, por esa razón tenemos que encerrar la instrución en parentesis.

Renombrar variables

Hemos visto que para obtener el valor de una propiedad de un objeto, la variable tiene que tener el mismo nombre de la propiedad de la cual deseamos extraer su valor, pero en ocasiones no queremos mantener ese nombre de variable para ese valor, ya sea porque tengamos ese mismo nombre de variable en alguna parte del código y evitar conflictos o simplemente porque quisieramos ponerle un nombre más descriptivo, para eso podemos hacer lo siguiente:

ahora el nombre de a es x y el nombre de b es z.

Valores por defecto

Como pasa con los arrays podemos asignar valores por defecto.

Es posible utilizar valores por defecto y el renombre de variables.

Identificador inválido

Sabemos que no podemos declarar una variable con un guión, como por ejemplo: mi-variable, esto causaría un error, pero bien sabemos que un objeto si puede tener una propiedad con guiones siempre y cuando sea un string, como esto: { ‘mi-variable’ : true }, si tuvieramos que desestructurar un objeto de ese estilo, utilizamos el renombre de variables:

Ahora la propiedad ‘no-valido’ se llama ahora noValido.

Rest en la desestructuración de objetos

Por su puesto que podemos usar rest en objetos:

Como nos podemos dar cuenta a solo obtiene el valor de la propiedad a y el resto se asigna a la variable rest.

Conclusión

La desestructuración es una forma de obtener fragmentos de valores que nos serán útiles de una colección de datos, ignorando el resto de elementos de la colección, de una manera simple y breve. Hay temas mucho más avanzados sobre destructuring, como usar destructuring en sets, maps, parámetros de funciones, desestructuración enidada y más, pero no quería alargar mucho el contenido y solo di una demostración de como utilizarlo.