ES6: Destructuración de arreglos en JavaScript

En entradas anteriores a este post hice énfasis en la Destructuración de objetos en JavaScript pero no se habló absolutamente nada sobre la Destructuración de arreglos, si bien esta no es muy usada considero necesario e importante dedicarle un post.

¿Qué es destructuración de arreglos?

La destructuración es una manera de escribir código más legible y limpio, básicamente consiste en asignar las posiciones de un arreglo a una variable independiente.

Sintaxis básica

const [variable_1, variable_2, variable_3, ... variable_n] = arreglo;

A continuación, algunos ejemplos para comprender mejor lo anterior mencionado:

const colores = ["Amarillo","Rojo","Verde","Magenta"];
const [color1, color2, color3, color4] = colores;
console.info(color1,color2,color3,color4);
/* salida:
"Amarillo"
"Rojo"
"Verde"
"Magenta"
*/

Bastante sencillo, ¿no lo crees? 🤗

Ahora, procederé a mencionar algunas peculiaridades bastante interesantes y que como desarrolladores web debemos tener presentes al momento de usar destructuración con arrays:

Destructura solo lo que necesitas

No es necesario destructurar el arreglo en su totalidad, es posible y recomendable solo destructurar las posiciones que necesitemos.

const nombres = ["Pedro","Roberto","Allison","Lorena"];
const [nombre_1, nombre_2]=nombres;
console.log(`Los nombres que necesito son: ${nombre_1} y ${nombre_2}`);
//salida: "Los nombres que necesito son: Pedro y Roberto"

Usa la notación de , para saltar posiciones

¿Qué tal si en el ejemplo anterior necesitamos solo destructurar la primera y la tercera posición? ¿Cómo lo haríamos?

const nombres = ["Pedro","Roberto","Allison","Lorena"];
const [nombre_1, , nombre_3]=nombres;
console.log(`Los nombres que necesito son: ${nombre_1} y ${nombre_3}`);
//salida: "Los nombres que necesito son: Pedro y Allison"

Cada vez que necesitemos saltar posiciones solo necesitamos usar una coma ',' por cada posición a ignorar.

Con este ejemplo nos percatamos de un detalle fundamental, a diferencia de la destructuración de objetos donde el orden de las llaves no importaba en lo absoluto y nos basábamos netamente en los nombres de las variables independientes; en la destructuración de arreglos es al revés, el orden de las variables independientes es vital para evitar resultados inesperados, como el siguiente:

const datos = ["Andrea", 23, "Bolivia"];
const [edad, nombre] = datos;

console.info(`${nombre} tiene ${edad} `);
//salida: "23 tiene Andrea"

Como ven, la salida no tiene el más mínimo sentido, pero solucionarlo es bastante simple:

const datos = ["Andrea", 23, "Bolivia"];
const [nombre, edad] = datos;

console.info(`${nombre} tiene ${edad}`);
//salida: "Andrea tiene 23"

REST operator

Podemos usar el operador REST sin ningún problema:

const datos = ["Andrea", 23, "Bolivia", "Desarrolladora Web", true];
const [nombre, edad, ...resto] = datos;

console.info(`${nombre} tiene ${edad}`); //"Andrea tiene 23"
console.info(`Los datos restantes son: ${resto}`);
//"Los datos restantes son: Bolivia,Desarrolladora Web,true"

Destructuración de arreglos como parámetros de funciones

La destructuración puede llegar a ser bastante útil si necesitamos pasar los elementos de una arreglo como parámetros de una función.

const datos = ["Andrea", 23, "Bolivia", "Desarrolladora Web"];

const mostrarInfo = ([nombre,edad, pais, profesion]) => {
  console.log(`${nombre} tiene ${edad} años, vive en ${pais} y es ${profesion}`)
}

mostrarInfo(datos);

//salida: "Andrea tiene 23 años, vive en Bolivia y es Desarrolladora Web" 

Conclusiones

• Destructurar un arreglo es una manera de dividir sus posiciones en variables independientes más descriptivas para mejorar la pulcritud y legibilidad del código.
• No destructures todo el arreglo, solo destructura las posiciones que necesitas.
• Puedes usar la notación de , para saltar u omitir posiciones que no desees destructurar.
• El REST Operator es perfectamente compatible con destructuración de arreglos.
• Puedes destructurar un arreglo para pasar parámetros a una función.
• La principal diferencia entre destructurar un objeto y destructurar un arreglo es que, en el primer caso la operación se la realiza independientemente del orden de las llaves del objeto (se toma en cuenta el nombre de las variables independientes); mientras que, en el segundo caso, los órdenes de las posiciones de los elementos son importantes para evitar resultados extraños o no esperados.

Referencias

• https://es.stackoverflow.com/questions/200123/desestructuraci%C3%B3n-de-arreglos-en-javascript
• http://lineadecodigo.com/javascript/desestructurar-arrays-javascript/
• https://carlosescorche.com/blog/desestructuracion-de-arreglos-en-javascript