Array destructuring en JS

21 marzo, 2019

Uno de los principales objetivos que trajo consigo ES6 fué el hecho de hacer a JavaScript un lenguaje de programación más declarativo, es por eso que entre sus novedades se incluye la posibilidad de hacer Array destructuring el tema del cuál te hablaré en este artículo.

El problema

Antes de empezar hablemos primero del porque surge la necesidad de está nueva sintáxis, anteriormente si necesitabamos obtener los valores de un arreglo para posteriormente guardarlos en variables lo haciamos asi:

function data() {
  return ["Hulk", "Vision", "Thor", "Iron Man"]
}

const avengers = data()

const hulk = avengers[0]
const vision = avengers[1]
const thor = avengers[2]
const ironMan = avengers[3]

No es la peor de las sintáxis pero digamos que no quedaba tan legible y era un poco tedioso estar accediendo a cada posición del arreglo.

Presentando Array Destructuring 👨‍💻

Ahora todo el código que veiamos en el ejemplo anterior se puede escribir de la siguiente forma:

function data() {
  return ["Hulk", "Vision", "Thor", "Iron Man"]
}

// array destructuring 😍
const [hulk, vision, thor, ironMan] = data()

Como puedes observar está es una sintáxis mucho más limpia y fácil de leer, ahora veamos que es lo que está pasando, lo primero que podemos ver es que los valores del arreglo han sido asignados a las variables hulk, vision, thor y ironMan respectivamente, respetando el orden en el cuál aparecen en el arreglo devuelto por la función data. Estos nombres de variables por supuesto son arbitrarios, es decir, puedes nombrarlos como tú quieras (aunque en el ejemplo tiene sentido nombrarlos así).

Si por alguna razón tratamos de acceder a una posición del arreglo que no existe, el valor asignado a esa variable será undefined.

function data() {
  return ["Hulk", "Vision", "Thor"]
}

const [hulk, vision, thor, ironMan] = data()

console.log(ironMan) // undefined

Por el contrario, si hacemos destructuring de una cantidad menor al total de elementos que contiene el arreglo, los elementos sobrantes serán ignorados.

function data() {
  return ["Hulk", "Vision", "Thor", "Iron Man"]
}

const [hulk, vision] = data()

console.log(hulk, vision) // "Hulk" "Vision"

También podemos omitir elementos durante el destructuring.

function data() {
  return ["Hulk", "Vision", "Thor", "Iron Man"]
}

const [, , thor, ironMan] = data()

console.log(thor, ironMan) // "Thor" "Iron Man"

El operador rest permite almacenar en un arreglo los elementos sobrantes.

function data() {
  return ["Hulk", "Vision", "Thor", "Iron Man"]
}

const [hulk, ...otherAvengers] = data()

console.log(hulk, otherAvengers) // "Hulk" ["Vision", "Thor", "Iron Man"]

Veámos dos ejemplos donde podemos aplicar array destructuring.

// Swap dos variables
let a = 10
let b = 30

;[a, b] = [b, a]

console.log(a, b) // 30, 10

// Destructurar valores devueltos por funciones nativas de JS
const [all, year, month, day] = /^(\d\d\d\d)-(\d\d)-(\d\d)$/.exec("2019-04-01")
console.log(all, year, month, day) // '2019-04-01', '2019, '04', '01'

Como puedes ver esta sintáxis nos trae muchos beneficios al momento de trabajar con arreglos en JS, así que no esperes más y empieza a usarla en tu día a día (si es que todavía no lo haces).

Conclusión

En este artículo te mostré como usar array destructuring y los beneficios que este tiene cuando estámos escribiendo código, pero sin duda quedan muchas cosas por aprender acerca de este tema así que si estás interesado te invito a visitar la documentación de MDN donde podrás ver más ejemplos y usos de está sintáxis, saludos!.


Gustavo Castillo | Desarrollador Web | Aprende Enseñando y Compartiendo.