Desestructuración De Arreglos En Javascript

La desestructuración es una característica muy conveniente al desarrollar con javascript, es una expresión que nos permite desempaquetar valores de arrays u objetos en grupos de variables, permitiéndonos simplificar y crear código más legible.

En esta primera parte te ayudare a entender cómo funciona la desestructuración de arreglos, te será favorable a la hora de trabajar con colecciones de datos.

Asignación básica

La sintaxis básica consiste en agrupar múltiples variables en el lado izquierdo entre corchetes [...], asignándole un array que en consecuencia se descompondrá según su orden, por ejemplo.

var arreglo = ['josé','vicente'];

var [nombre,apellido] = arreglo;
 
console.log(nombre); //imprime josé
console.log(apellido); //imprime vicente

Ahora podemos usar variables en lugar de trabajar con las posiciones del arreglo, hay que tener en cuenta que la desestructuración no altera el array que se está asignando, de seguir el ejemplo anterior verás que el arreglo sigue intacto.

console.log(arreglo[0]); //josé
console.log(arreglo[1]); //vicente

Ahora bien, podemos combinar lo aprendido con split() u otro método que devuelven matrices, un ejemplo genial es.

var [nombre,apellido] = "josé vicente".split(" ");

console.log(nombre); //imprime josé
console.log(apellido); //imprime vicente

También podemos combinarlo con bucles, para iterar valor y clave de un objeto.

let usuario = {
    nombre: "josé",
    apellido: "vicente",
    edad: 27
};

for (let [key, value] of Object.entries(usuario)) {
    console.log(`${key}:${value}`); // imprime nombre:josé, apellido:vicente y edad:27
}

Asignación separada de la declaración

Las asignaciones se pueden hacer también en variables ya declaradas, por ejemplo.

var nombre,apellido;
[nombre, apellido] = "jose vicente".split(" ");

Valores por defecto

A una variable se le puede asignar un valor por defecto, en caso de que el valor desempaquetado de la matriz no esté definida.

var usuario,activo;

[usuario=null,activo = false] = ['mariana29'];
console.log(usuario); //imprime mariana29
console.log(activo); // imprime false

Ignorando elementos

Los elementos no deseados de la matriz también se pueden desechar mediante una coma adicional.

//El segundo nombre se ignora
let [nombre1,,apellido1] = ["josé", "eduardo", "vicente", "pérez"];

console.log(apellido1); //imprime vicente

En el código anterior, el segundo elemento de la matriz se omite, el tercero se asigna a apellido1 y el resto de la matriz  se ignora.

El resto

Si no solo queremos obtener los primeros valores, también reunir todo lo que sigue, podemos agregar un parámetro más que obtenga "el resto" utilizando tres puntos "..."

let [nombre,...nombres_restantes] = ["josé", "eduardo", "vicente", "pérez"];

console.log(nombre); //imprime josé
console.log(nombres_restantes) //imprime ["eduardo", "vicente", "pérez"]

Trabajando con funciones

Siempre ha sido posible devolver arreglos desde una función, en ocasiones puedes aplicar desestructuración para obtener resultados más conciso, por ejemplo.

function f() {
    return [1, 2];
}

var a, b;
[a, b] = f();
console.log(a); // imprime 1
console.log(b); // imprime 2

De esta manera,  ya sabes lo fundamental para descomponer arreglos en listas de variables, cualquier pregunta escríbeme en los comentarios.