Artículo original: How to Use Array and Object Destructuring in JavaScript por Sarah Chima Atuonwu

Traducido por: Dikson Aranda

La asignación de desestructuración es una poderosa característica que vino con ES6 (ECMAScript6). La desestructuración es una expresión de JavaScript que hace posible extraer valores de los arreglos, o propiedades de objetos, en otras variables. Es decir, podemos obtener datos de arreglos y objetos, y asignarlos a variables.

¿Por qué esto es necesario?

Imagina que queremos extraer la información de un arreglo. Anteriormente, ¿cómo se haría esto?

let introduccion = ["Hola", "yo" , "soy", "Sara"];
let saludo = introduccion[0];
let nombre = introduccion[3];

console.log(saludo);//"Hola"
console.log(nombre);//"Sara"

Podemos ver que cuando queremos obtener los datos de un arreglo, tenemos que hacer lo mismo una y otra vez.

La asignación de desestructuración hace que esto sea más fácil. ¿Cómo es esto?.Primero, discutamos la asignación de desestructuración con arreglos. Luego pasaremos a la desestructuración de objetos.

Empecemos.

Desestructuración básica de un arreglo

Si queremos extraer datos de arreglos, es bastante simple usando la asignación de desestructuración.

Veamos nuestro primer ejemplo para arreglos. En lugar de repetir lo mismo, podemos hacer esto:

let introduccion = ["Hola", "yo" , "soy", "Sara"];
let [saludo, pronombre] = introduccion;

console.log(saludo);//"Hola"
console.log(pronombre);//"yo"

También podemos hacer esto con el arreglo.

let [saludo, pronombre] = ["Hola", "yo" , "soy", "Sara"];

console.log(saludo);//"Hola"
console.log(pronombre);//"yo"

Declarando variables antes de la asignación

Las variables pueden ser declaradas antes de su asignación, algo como esto:

let saludo, pronombre;
[saludo, pronombre] = ["Hola", "yo" , "soy", "Sara"];

console.log(saludo);//"Hola"
console.log(pronombre);//"yo"

Nota que las variables son establecidas de izquierda a derecha. De esta manera la primera variable obtiene el valor del primer elemento del arreglo, la segunda variable obtiene el valor del segundo elemento del arreglo, y así sucesivamente.

Excluyendo elementos en un arreglo

¿Qué pasa si queremos obtener el primer y el último elemento de nuestro arreglo, en lugar de obtener solo el primer y el segundo elemento, y queremos asignar estos valores solo a dos variables?. Esto también se puede hacer.

Observa el siguiente ejemplo:

let [saludo,,,nombre] = ["Hola", "yo" ,"soy", "Sara"];

console.log(saludo);//"Hola"
console.log(nombre);//"Sara"

¿Qué ha sucedido?

Observa la asignación en la parte izquierda del arreglo. Nota que en lugar de usar una coma, usamos tres. La coma es usada para omitir valores en un arreglo. Entonces, si desea omitir un elemento en un arreglo, use una coma.

Hagamos otro ejercicio. Omitamos el primer y tercer elemento en la lista. ¿Cómo haríamos esto?

let [,pronombre,,nombre] = ["Hola", "yo" , "soy", "Sara"];

console.log(pronombre);//"yo"
console.log(nombre);//"Sara"

De esta manera, la coma hace su magia. Así que si queremos excluir todos los elementos, haríamos esto.

let [,,,,] = ["Hola", "yo" , "soy", "Sara"];

Asignación del resto de un arreglo

¿Qué pasa si queremos asignar algunos valores de un arreglo a una variable y el resto a otra?. En este caso, podríamos hacer esto:

let [saludo,...introduccion] = ["Hola", "yo" , "soy", "Sara"];

console.log(saludo);//"Hola"
console.log(introduccion);//["yo", "soy", "Sara"]

Usando este patrón, puedes obtener y asignar la parte del arreglo faltante a una variable.

Asignación de desestructuración con funciones

Podemos extraer los datos de un arreglo devuelto por una función. Digamos que tenemos una función que retorna un arreglo, como en el ejemplo:

function obtenerArreglo() {
    return ["Hola", "yo" , "soy", "Sara"];
} 
let [saludo,pronombre] = obtenerArreglo();

console.log(saludo);//"Hola"
console.log(pronombre);//"yo"

Obtenemos los mismos resultados.

Usando valores por defecto

Se pueden asignar valores por defecto a las variables en caso de que el valor que extraemos de un arreglo sea  undefined:

let [saludo = "Holi",nombre = "Sara"] = ["Hola"];

console.log(saludo);//"Hola"
console.log(nombre);//"Sara"

De esta manera nombre es "Sara", porque no está definido en el arreglo.

Intercambio de valores usando la asignación de desestructuración

Una cosa más. Podemos usar la asignación de desestructuración para intercambiar valores de las variables.

let a = 3;
let b = 6;

[a,b] = [b,a];

console.log(a);//6
console.log(b);//3

A continuación, pasemos a la desestructuración de objetos.

Desestructuración de objetos

Primero, miremos porque es necesaria la desestructuración de objetos.

Digamos que queremos extraer datos de un objeto, y asignarlos a nuevas variables. Antes de ES6, ¿cómo se haría esto?

let persona = {nombre: "Sara", pais: "Nigeria", trabajo: "Desarrolladora"};

let nombre = persona.nombre;
let pais = persona.pais;
let trabajo = persona.trabajo;

console.log(nombre);//"Sara"
console.log(pais);//"Nigeria"
console.log(trabajo);//Desarrolladora"

Mira lo tedioso que es hacer esto. Estamos repitiendo lo mismo. La desestructuración de ES6 realmente salva el día. Veamos como es esto.

Desestructuración básica de objetos

Repitamos el ejemplo anterior con ES6. En lugar de asignar los valores uno por uno podemos usar el objeto de la izquierda para extraer los datos:

    
let persona = {nombre: "Sara", pais: "Nigeria", trabajo: "Desarrolladora"};

let {nombre, pais, trabajo} = persona;

console.log(nombre);//"Sara"
console.log(pais);//"Nigeria"
console.log(trabajo);//Desarrolladora"

Obtendrás los mismos resultados. También es válido asignar variables a un objeto que no ha sido declarado:

let {nombre, pais, trabajo} = {nombre: "Sarah", pais: "Nigeria", trabajo: "Desarrolladora"};

console.log(nombre);//"Sara"
console.log(pais);//"Nigeria"
console.log(trabajo);//Desarrolladora"

Variables declaradas antes de ser asignadas

Variables en objetos pueden ser declarados antes de ser asignadas con desestructuración. Intentemos esto:

let persona = {nombre: "Sara", pais: "Nigeria", trabajo: "Desarrolladora"}; 
let nombre, pais, trabajo;

{nombre, pais, trabajo} = persona;

console.log(nombre);// Error : "Unexpected token ="

Espera, ¡¿Qué acaba de pasar?!. Oh, olvidamos agregar () antes de las llaves.

Los paréntesis alrededor de la declaración de asignación es una sintaxis requerida cuando usamos la asignación de desestructuración sin una declaración. Esto es así porque los {} en el lado izquierdo se considera un bloque y no un objeto literal. Así que aquí está como hacer esto de la marea correcta:

let persona = {nombre: "Sara", pais: "Nigeria", trabajo: "Desarrolladora"};
let nombre, pais, job;

({nombre, pais, trabajo} = persona);

console.log(nombre);//"Sara"
console.log(trabajo);//"Desarrolladora"

También es importante tener en cuenta que al usar esta sintaxis, los () deberían estar precedidos por una coma. De lo contrario, podría usarse para ejecutar una función de la línea anterior.

Tenga en cuenta que las variables en el objeto del lado izquierdo deben tener el mismo nombre que las propiedades del objeto persona. Si los nombres son diferentes, obtendremos un undefined:

let persona = {nombre: "Sara", pais: "Nigeria", trabajo: "Developer"};

let {nombre, amigos, trabajo} = persona;

console.log(nombre);//"Sara"
console.log(amigos);//undefined

Pero si queremos usar un nuevo nombre de variable, bueno, podemos hacerlo.

Usando un nuevo nombre de variable

Si queremos asignar valores de un objeto a una nueva variable en lugar de usar el nombre de su propiedad, podemos hacer esto:

let persona = {nombre: "Sara", pais: "Nigeria", trabajo: "Desarrolladora"};

let {nombre: otroNombre, trabajo: laburo} = persona;

console.log(otroNombre);//"Sara"
console.log(laburo);//"Desarrolladora"

Entonces los valores extraídos son pasados a las nuevas variables otroNombre y laburo.

Usando valores por defecto

Valores por defecto también pueden ser usados en la desestructuración de objetos, en caso de que una variable sea undefined en un objeto del que desea extraer datos.

let persona = {nombre: "Sara", pais: "Nigeria", trabajo: "Developer"};

let {nombre = "myNombre", amiga = "Annie"} = persona;

console.log(nombre);//"Sara"
console.log(amiga);//"Annie"

Entonces, si el valor no es undefined, la variable guarda el valor extraído del objeto como en el caso de nombre. De lo contrario, es usado el valor predeterminado como en el caso de amiga.

También podemos establecer valores por defecto cuando asignamos valores a una nueva variable:

let persona = {nombre: "Sara", pais: "Nigeria", trabajo: "Desarrolladora"};

let {nombre:otroNombre = "myName", amiga: compañera = "Annie"} = persona;

console.log(otroNombre);//"Sara"
console.log(compañera);//"Annie"

Entonces nombre fue extraído de persona y asignado a una variable diferente. La variable amiga, por otra parte, fue undefined en persona, por lo que la variable compañera tiene asignado el valor por defecto.

Nombre de propiedad calculado

El nombre de propiedad calculado es otra característica de los objetos que también funciona para la desestructuración. Puedes especificar el nombre de una propiedad a través de una expresión, si lo pone entre corchetes.

let propiedad = "nombre";

let {[propiedad] : otroNombre} = {nombre: "Sara", pais: "Nigeria", trabajo: "Desarrolladora"};

console.log(otroNombre);//"Sara"

Combinando arreglos con objetos

Arreglos también pueden ser usados con objetos en la desestructuración de objetos.

let persona = {nombre: "Sara", pais: "Nigeria", amigas: ["Annie", "Becky"]};

let {nombre:otroNombre, amigas: compañeras} = persona;

console.log(otroNombre);//"Sara"
console.log(compañeras);//["Annie", "Becky"]

Anidamiento en desestructuración de Objetos

Objetos también pueden ser anidados al desestructurar:

let persona = {
    nombre: "Sara",
    lugar: {
        pais: "Nigeria", 
        ciudad: "Lagos" }, 
    amigas : ["Annie", "Becky"]
};

let {nombre:otroNombre,
     lugar: {
         pais : region,
         ciudad : x}
    } = persona;

console.log(otroNombre);//"Sarah"
console.log(region);//"Nigeria"

Resto en la desestructuración de objetos

La sintaxis del resto también se puede usar para obtener los valores restantes. Esas claves y sus valores se copian en un nuevo objeto:

let persona = {nombre: "Sara", pais: "Nigeria", trabajo: "Desarrolladora" amigas: ["Annie", "Becky"]};

let {nombre, amigas, ...otros} = persona;

console.log(nombre);//"Sara"
console.log(amigas);//["Annie", "Becky"]
console.log(otros);// {pais: "Nigeria", trabajo: "Desarrolladora"}

Aquí, las propiedades restantes, que no han sido extraídas, se asignan a la variable otros. La sintaxis del resto es ...otros. La variable ...otros se puede renombrar a cualquier variable que desee.

Una última cosa: veamos como se puede usar la desestructuración de objetos en funciones.

Desestructuración de objetos en funciones

La desestructuración de objetos se puede utilizar para asignar parámetros a las funciones:

function persona({nombre: x, trabajo: y} = {}) {
    console.log(x);
}

persona({nombre: "Michelle"});//"Michelle"
persona();//undefined
persona(amiga);//Error : amiga is not defined

Observa los {} en el lado derecho del objeto de parámetros. Nos permite llamar a la función sin pasar ningún argumento. Es por eso que no obtenemos un undefined. Si removemos esto, obtendremos un mensaje de error.

También podemos asignar valores por defecto a los parámetros.

function persona({nombre: x = "Sara", trabajo: y = "Desarrolladora"} = {}) {
    console.log(x);
}

persona({nombre});//"Sara"

Podemos hacer un muchas cosas con la desestructuración de Objetos y Arreglos como hemos visto en los ejemplos anteriores.

Gracias por leer. :)