Destrucción en JS

Con la desestructuración, podemos “desempaquetar” un objeto y asignar sus propiedades a nuevas variables. Por ejemplo, veamos la desestructuración de objetos:

Podemos considerar la desestructuración como intentar hacer un sabroso sándwich de huevo. Solo sacamos de la nevera aquellos componentes que necesitamos para el bocadillo, es decir, pan, mortadela, huevo, etc. No sacaríamos todos los elementos que tenemos en la nevera, ¿verdad? Ese es el mismo caso que el elemento Destruct en JS.

La desestructuración es una expresión de JavaScript que nos permite extraer datos de matrices, objetos y mapas y almacenarlos en variables separadas. La desestructuración nos permite extraer numerosos atributos u objetos a la vez de una matriz.

Veamos la sintaxis:

const obj = {
  a: 2,
  b: 3,
}

// destructure assignment
const { a, b } = obj;

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

const { a,b } = obj;

Tipos de desestructuración:

Asignación a nombres de variables existentes:

var student = {    // Object we will be destructuring
    firstname: 'Mohajit',
    lastname: 'Paul',
    dateofbirth: '2002'
};

// Destructuring:
const { firstname, lastname, dateofbirth } = student;
console.log( firstname, lastname, dateofbirth);

2. Asignación a nuevos nombres de variables:

Aporte:

var student = {    // Object to destructure
    firstname: 'Mohajit',
    lastname: 'Paul',
    dateofbirth: '2002'
};

// Destructuring obj with different names:
const { firstname: F1N, lastname: L1N, dateofbirth: dob } = student;
console.log( F1N, L1N , dob);

3. Asignación con valores por defecto:

Aporte:

var student = {    // Object to destructure
    firstname: 'Mohajit',
    lastname: 'Paul',
    dateofbirth: '2002'
};
// Destructuring - variables without 
// assigning default values 
var { firstname, lastname, country } = student;
console.log("Without setting default values")
console.log( firstname, lastname, grade);

// Destructuring - variables by 
// assigning default values 
var { firstname = 'default firstname', 
      lastname = 'default lastname', 
      grade = 'default grade' } = student;
console.log("\n After setting default values")
console.log( firstname, lastname, grade);

Así concluye la historia de la desestructuración en JS.

Sígueme en mis redes sociales:

Github

LinkedIn

Gorjeo