Destrutturazione in JS

Con la destrutturazione, possiamo "scompattare" un oggetto e assegnarne le proprietà a nuove variabili. Ad esempio, diamo un'occhiata alla destrutturazione degli oggetti:

Possiamo considerare Destructuring come provare a preparare un gustoso sandwich all'uovo. Tiriamo fuori dal frigorifero solo quei componenti di cui abbiamo bisogno per il panino, ad esempio pane, Bologna, uova, ecc. Questo è lo stesso caso dell'elemento Destruct in JS.

La destrutturazione è un'espressione JavaScript che ci consente di estrarre dati da array, oggetti e mappe e memorizzarli in variabili separate. La destrutturazione ci consente di estrarre numerosi attributi o oggetti contemporaneamente da un array.

Vediamo la sintassi:

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

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

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

const { a,b } = obj;

Tipi di destrutturazione:

Assegnazione a nomi di variabili esistenti:

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. Assegnazione a nuovi nomi di variabili:

Ingresso:

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. Assegnazione con valori predefiniti:

Ingresso:

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);

Così si conclude il racconto della destrutturazione in JS.

Seguimi sui miei social:

Github

Linkedin

Cinguettio