Breve introducción a la desestructuración de arreglos en ES6

Original article: A Brief Introduction to Array Destructuring in ES6

La desestructuración en JavaScript es un método simplificado para extraer múltiples propiedades de un arreglo tomando la estructura y deconstruyéndola en sus partes integrantes mediante asignaciones, esto usa una sintaxis similar a la de los literales de arreglo.

Crea un patrón que describe el tipo de valor que espera y realiza la asignación. La desestructuración de arreglos usa la posición de manera ordenada.

Véase el siguiente fragmento de código.

let [primero, segundo, tercero] = ["Laide", "Gabriel", "Jets"];

let primero = "laide",
    segundo = "Gabriel",
    tercero = "Jets";

No se pueden usar números para desestructurar. Numeros producirá un error porque los números no pueden ser nombres de variables en JS.

let [1, 2, 3] = ["Laide", "Ola", "Jets"];

Esta sintaxis provoca un error.

La desestructuración ha hecho que extraer datos de un arreglo sea muy sencillo y legible. Imagina intentar extraer datos de un arreglo anidado con 5 o 6 niveles. Sería muy tedioso. Se utiliza un literal de arreglo en el lado izquierdo de la asignación.

let cosa = ["Mesa", "Silla", "Ventilador"];
let [a, b, c] = cosa;

Toma cada variable del literal del arreglo en el lado izquierdo y la mapea al mismo elemento en el mismo índice del arreglo.

console.log(a); // Salida: Mesa
console.log(b); // Salida: Silla
console.log(c); // Salida: Ventilador

La declaración y la asignación pueden realizarse por separado en la desestructuración.

let primero, segundo;
[primero, segundo] = ["Hombre", "Mujer"];

Si el número de variables pasadas a los literales del arreglo de desestructuración es mayor que los elementos del arreglo, entonces las variables que no están mapeadas a ningún elemento del arreglo devuelven undefined.

let cosas = ["Mesa", "Silla", "Ventilador", "Alfombra"];
let [a, b, c, d, e] = cosas;
console.log(c); // Salida: Ventilador
console.log(d); // Salida: Alfombra
console.log(e); // Salida: undefined

Si el número de variables pasadas a los literales del arreglo de desestructuración es menor que los elementos del arreglo, se dejan los elementos sin variables a los que mapear. No se produce ningún error.

let cosas = ["Mesa", "Silla", "Ventilador", "Alfombra"];
cosas [a, b, c] = cosas;
console.log(c); // Salida: Ventilador

Desestructuración de arreglos retornados

La desestructuración hace que trabajar con una función que devuelve un arreglo como valor sea más preciso. Funciona para todos los iterables.

function corredoras(){
    return ["Sandra", "Ola", "Chi"];
}

let [a, b, c] = corredoras();
console.log(a); // Salida: Sandra
console.log(b); // Salida: Ola
console.log(c); // Salida: Chi

Valor por defecto

La desestructuración permite asignar un valor por defecto a una variable si no se pasa ningún valor o undefined. Es proporcionar una alternativa cuando no se encuentra nada.

let a, b;
[a = 40, b = 4] = [];
console.log(a); // Salida: 40
console.log(b); // Salida: 4

[a = 40, b = 4] = [1, 23];
console.log(a); // Salida: 1
console.log(b); // Salida: 23

Los valores por defecto también pueden referirse a otras variables, incluida la del mismo literal del arreglo.

let [first = "Cotlin", second = first] = [];
console.log(first); // Salida: Cotlin
console.log(second); // Salida: Cotlin

let [first = "Cotlin", second = first] = ["Koku"];
console.log(first); // Salida: Koku
console.log(second); // Salida: Koku

let [first = "Cotlin", second = first] = ["Koku", "Lydia"];
console.log(first); // Salida: Koku
console.log(second); // Salida: Lydia

Ignorar algunos valores

La desestructuración permite asignar una variable a los elementos que le interesan. Puede ignorar u omitir los demás elementos del arreglo usando comas al final.

let a, b;
[a, , b] = ["Señor", "Corona", "Rosas"];

console.log(a); // Salida: Señor
console.log(b); // Salida: Rosas

El parámetro Rest y la sintaxis Spread

El nuevo operador (...) que se añadió en ES6 puede utilizarse en la desestructuración. Si el operador (...) aparece a la izquierda en la desestructuración, se trata de un PARÁMETRO REST. Un parámetro Rest se utiliza para mapear todos los elementos restantes del arreglo que no han sido mapeados a la propia variable Rest. Es como recoger lo que queda. La variable Rest debe ser siempre la última, de lo contrario se produce un SyntaxError.

let planetas = ["Mercurio", "Tierra", "Venus", "Marte", "Pluton", "Saturno"];
let [primero, tercero, ...otros] = planetas;

console.log(primero); // Salida: Mercurio
console.log(tercero); // Salida: Venus
console.log(otros); // Salida: ["Marte", "Pluton", "Saturno"]

Si el operador (...) aparece a la derecha en la desestructuración, se trata de un SINTAXIS SPREAD. Toma todos los demás elementos del arreglo que no tienen ninguna variable asignada y la asigna a la variable restante.

let planetas = ["Venus", "Marte", "Pluton", "Saturno"];

let [primero, segundo, ...rest] = ["Mercurio", "Tierra", ...planetas, "Neptuno"];

console.log(primero); // Salida: Mercurio
console.log(segundo); // Salida: Tierra
console.log(rest); // Salida: [ 'Venus', 'Marte', 'Pluton', 'Saturno', 'Neptuno']

Cuando puedes tener más variables en el lado izquierdo, mapea los elementos individuales del arreglo igualmente a las variables.

let planetas = ["Mercurio", "Tierra", "Venus", "Marte", "Pluton", "Saturn"];

let [uno, dos, ...rest] = ["Mercurio", ...planets];

console.log(uno); // Salida: Mercurio
console.log(dos); // Salida: Mercurio
console.log(rest); // Salida: ["Tierra", "Venus", "Marte", "Pluton", "Saturno"]

planets = ["Mercurio", "Tierra", "Venus", "Marte", "Pluton", "Saturno"];

let [primero, segundo, tercero, cuarto, ...rest] = ["Mercurio", "Tierra", ...planetas];

console.log(primero); // Salida: Mercurio
console.log(segundo); // Salida: Tierra
console.log(tercero); // Salida: Mercurio
console.log(cuarto); // Salida: Tierra
console.log(rest); // Salida: ["Venus", "Marte", "Pluton", "Saturno"]

Intercambio de variables

Una desestructuración puede emplearse para intercambiar los valores de dos variables.

let a, b;
[a, b] = ["Hombre", "Mujer"];
[a, b] = [b, a];

console.log(a); // Salida: Mujer
console.log(b); // Salida: Hombre

Desestructuración de arreglos anidados

También puede realizar la desestructuración anidada con arreglos. El elemento correspondiente debe ser un arreglo para poder usar un literal de arreglo con desestructuración anidada para asignar elementos de la misma a variables locales.

let numeros = [8, [1, 2, 3], 10, 12];
let [a, [d, e, f]] = numeros;

console.log(a); // Salida: 8
console.log(d); // Salida: 1
console.log(e); // Salida: 2

Desestructuración de múltiples arreglos

Puede desestructurar un arreglo más de una vez en el mismo fragmento de código.

let lugares = ["primero", "segundo", "tercero", "cuarto"];
let [a, b, , d] = [f, ...rest] = lugares;

console.log(a); // Salida: primero
console.log(d); // Salida: cuarto
console.log(f); // Salida: primero
console.log(rest); // Salida: ["segundo", "tercero", "cuarto"]

Conclusión

Puede copiar y pegar el código en el sitio web de Babel para ver cómo sería el código si no existiera la desestructuración. Habrías escrito más líneas de código, pero la desestructuración lo simplifica todo.