Table of Contents
Open Table of Contents
Introducción
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 sintaxis, anteriormente si necesitábamos obtener los valores de un arreglo para posteriormente guardarlos en variables lo hacíamos 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 sintaxis 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 veíamos 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 sintaxis 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"]
Veamos 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
// Desestructurar 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 sintaxis 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 estamos 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á sintaxis, saludos!.