ES6: Destructuración de Arreglos en JavaScript

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

¿Qué es destructuración de arreglos?

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

Sintaxis 기초

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 specificidades 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 위치

¿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 detallefundamental, 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 연산자

Podemos usar el operator REST sin ningun 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"

함수 매개변수에 대한 배열의 파괴

La destructuración puede llegar a ser bastante útil si necesitamos pasar los elementos de una arreglo como parametros 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" 

결론

Destructurar un arreglo es una manera de dividir sus posiciones en variable independentes 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 parametros 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.

참조

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