Desestructuración

<< Rest/Spread Map y Set >>

Desestructurar un array es la acción de extraer elementos individuales de un array directamente en variables individuales. Podemos también desestructurar un string en caracteres.

Vamos a ver un ejemplo donde asignamos los tres primeros elementos de un array, a tres variables diferentes, usando una única asignación.

let array = [150, 400, 780, 1500, 200];
let [v1, v2, v3] = array; // Asigna los tres primeros elementos del array
console.log(v3); // Imprime 780

¿Qué pasa si queremos saltarnos algún valor? Se deja el hueco vacío (sin variable) dentro de los corchetes y no será asignado.

let array = [150, 400, 780, 1500, 200];
let [v1, , v3] = array; // Asigna el primer y tercer elemento
console.log(v3); // Imprime 780

Podemos asignar el resto del array a la última variable que pongamos entre corchetes usando el operador rest.

let array = [150, 400, 780, 1500, 200];
let [v1, v2, ...resto] = array; // resto será un array
console.log(resto); // Imprime [780, 1500 ,200]

Si queremos asignar más valores de los que puede contener el array y no queremos asignar undefined en el caso de que dicha posición no tenga valor, podemos asignar valores por defecto en ese caso.

let array = ["Peter", "John"];
let [v1, v2 = "Mary", v3 = "Anne"] = array;
console.log(v2); // Imprime "John"
console.log(v3); // Imprime "Anne" -> valor por defecto

También podemos desestructurar arrays anidados. Solo hay que imitar en la estructura de la izquierda (variables), la estructura anidada del array.

let sueldos = [["Pedro", "Maria"], [24000, 35400]];
let [[nombre1, nombre2], [sueldo1, sueldo2]] = sueldos;
console.log(nombre1 + " gana " + sueldo1 + "€"); // Imprime "Pedro gana 24000€"

También se puede desestructurar un array enviado como parámetro a una función. Esto mejora la legibilidad del código dentro de dicha función, ya que accedemos a una variable con nombre y no una posición de un array.

function imprimirUsuario([id, nombre, email], otraInfo = "Nada") {
    console.log("ID: " + id);
    console.log("Nombre: " + nombre);
    console.log("Email: " + email );
    console.log("Otra info: " + otraInfo );
}

let infoUsu = [3, "Pedro", "peter@gmail.com"];
imprimirUsuario(infoUsu, "No es muy listo");

<< Rest/Spread Map y Set >>