Déstructuration en JS

Avec la déstructuration, nous pouvons « décompresser » un objet et attribuer ses propriétés à de nouvelles variables. Par exemple, regardons la déstructuration d'objet :

Nous pouvons considérer la déstructuration comme une tentative de faire un délicieux sandwich aux œufs. Nous ne sortons du réfrigérateur que les composants dont nous avons besoin pour le sandwich, c'est-à-dire le pain, le bologne, les œufs, etc. Nous ne sortirions pas tous les articles que nous avons dans le réfrigérateur, n'est-ce pas ? C'est le même cas que l' élément Destruct dans JS.

La déstructuration est une expression JavaScript qui nous permet d'extraire des données de tableaux, d'objets et de cartes et de les stocker dans des variables distinctes. La déstructuration nous permet d'extraire de nombreux attributs ou objets à la fois d'un tableau.

Regardons la syntaxe :

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

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

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

const { a,b } = obj;

Types de déstructuration :

Affectation aux noms de variables existants :

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. Affectation à de nouveaux noms de variables :

Contribution:

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. Affectation avec valeurs par défaut :

Contribution:

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

Ainsi s'achève l'histoire de la déstructuration dans JS.

Suivez moi sur mes réseaux sociaux :

GithubGenericName

Linkedin

Twitter