Asignación de desestructuración en JavaScript

La asignación de desestructuración es una expresión de JavaScript que permite desempaquetar valores de arrays o propiedades de objetos en distintas variables. Los datos se pueden extraer de arrays, objetos, objetos anidados y asignación a variables . En Asignación de desestructuración, en el lado izquierdo, se definió qué valor se debe desempaquetar de la variable de origen. En general, la implementación de la extracción de la array es como se muestra a continuación: Ejemplo: 

<script>
var names = ["alpha", "beta", "gamma", "delta"];
 
var firstName = names[0];
var secondName = names[1];
 
console.log(firstName);//"alpha"
console.log(secondName);//"beta"
</script>

Producción:

alpha
beta

Sintaxis:

• Desestructuración de arrays:

var x, y;
[x, y] = [10, 20];
console.log(x); // 10
console.log(y); // 20

• o

[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log(x); // 10
console.log(y); // 20
console.log(restof); // [30, 40, 50]

• Desestructuración de objetos:

({ x, y} = { x: 10, y: 20 });
console.log(x); // 10
console.log(y); // 20

• o

({x, y, ...restof} = {x: 10, y: 20, m: 30, n: 40});
console.log(x); // 10
console.log(y); // 20
console.log(restof); // {m: 30, n: 40}

Desestructuración de arreglos: uso de la asignación de desestructuración en situaciones posibles de arreglos de JavaScript, todos los ejemplos se enumeran a continuación:

• Ejemplo 1: cuando se utiliza la asignación de desestructuración , se puede realizar la misma extracción utilizando las siguientes implementaciones. 

<script>
var names = ["alpha", "beta", "gamma", "delta"];
var [firstName, secondName] = names;
     
console.log(firstName);//"alpha"
console.log(secondName);//"beta"
 
//Both of the procedure are same
var [firstName, secondName] = ["alpha", "beta", "gamma", "delta"];
         
console.log(firstName);//"alpha"
console.log(secondName);//"beta
</script>

• Producción:

alpha
beta
alpha
beta

• Ejemplo 2: los elementos de la array también se pueden omitir usando un separador de coma . Se puede usar una sola coma para omitir un solo elemento de array. Una diferencia clave entre el operador de distribución y la desestructuración de la array es que el operador de distribución desempaqueta todos los elementos de la array en una lista separada por comas que no nos permite elegir qué elementos queremos asignar a las variables. Para omitir toda la array, se puede hacer usando la cantidad de comas, ya que hay una cantidad de elementos de la array. 

<script>
var [firstName,,thirdName] = ["alpha", "beta", "gamma", "delta"];
         
console.log(firstName);//"alpha"
console.log(thirdName);//"gamma"
</script>

• Producción:

alpha
gamma

• Ejemplo 3: Para asignar algunos elementos de la array a la variable y el resto de los elementos de la array a una sola variable, se puede lograr usando el operador de descanso (…) como en la implementación a continuación. Pero una limitación del operador resto es que funciona correctamente solo con los últimos elementos, lo que implica que no se puede obtener un subarreglo dejando el último elemento en el arreglo. 

<script>
var [firstName,,...lastName] = ["alpha", "beta", "gamma", "delta"];
         
console.log(firstName);//"alpha"
console.log(lastName);//"gamma, delta"
</script>

• Producción:

alpha
  0: "gamma"
  1: "delta"

• Ejemplo 4: Los valores también se pueden intercambiar usando la asignación de desestructuración como se muestra a continuación: 

<script>
var names = ["alpha", "beta", "gamma", "delta"];
 
console.log(firstName);//"alpha"
console.log(secondName);//"beta"
 
//After swapping
[firstName, secondName] = [secondName, firstName]
     
console.log(firstName);//"beta"
console.log(secondName);//"alpha"
</script>

• Producción:

beta
alpha

• Ejemplo 5: Los datos también se pueden extraer de una array devuelta por una función. Una ventaja de usar una asignación de desestructuración es que no hay necesidad de manipular un objeto completo en una función, sino que solo los campos que se requieren se pueden copiar dentro de la función. 

<script>
function NamesList() {
        return ["alpha", "beta", "gamma", "delta"]
    }
var[firstName, secondName] = NamesList();
 
console.log(firstName);//"alpha"
console.log(secondName);//"beta"
</script>

• Producción:

alpha
beta

• Ejemplo 6: En ES5 para asignar variables desde objetos su implementación es 

<script>
var marks = {x: 21, y: -34, z: 47 };
 
var x = marks.x; // x = 21
var y = marks.y; // y = -34
var z = marks.z; // z = 47
 
console.log(x);
console.log(y);
console.log(z);
</script>

• Producción:

21
-34
47

• Ejemplo 7: La implementación anterior en ES6 usando la asignación de desestructuración es. 

<script>
var marks = {x: 21, y: -34, z: 47 };
 
const { x, y, z } = marks; // x = 21, y = -34, z = 47
 
 
console.log(x);
console.log(y);
console.log(z);
</script>

• Producción:

21
-34
47

Desestructuración de objetos:

• Ejemplo 1: los objetos anidados también se pueden desestructurar utilizando la sintaxis de desestructuración. 

<script>
const marks = {
section1: { alpha: 15, beta: 16},
section2: { alpha: -31, beta: 19 }
};
const { section1 : { alpha: alpha1, beta: beta1 }} = marks;
console.log(alpha1, beta1); // 15, 16
 
</script>

• Producción:

15 16

• Ejemplo 2: los objetos anidados también se pueden desestructurar

let obj = {
    name: "GFG",
    add : {
        country: "India",
        state : {
            code : "JS",
            pincode:"820800",
            article:{
              topic : "destructuring"
            }
        }
    }
}
 
let {name} = obj;
console.log(name)
 
let {add:{country:abcd}} = obj
console.log(abcd)
 
let {add:{state:{code:cd}}} = obj
console.log(cd)
 
let {add:{state:{article:{topic:ef}}}} = obj
console.log(ef);

Output:

GFG
India
JS
destructuring