Destrukturierung in JS

Mit der Destrukturierung können wir ein Objekt „auspacken“ und seine Eigenschaften neuen Variablen zuweisen. Schauen wir uns zum Beispiel die Objektdestrukturierung an:

Wir können die Destrukturierung als den Versuch betrachten, ein leckeres Ei-Sandwich zuzubereiten. Wir nehmen nur die Zutaten aus dem Kühlschrank, die wir für das Sandwich brauchen, also Brot, Bologna, Ei usw. Wir würden doch nicht alle Sachen rausnehmen, die wir im Kühlschrank haben, oder? Das ist der gleiche Fall wie beim Destruct- Element in JS.

Die Destrukturierung ist ein JavaScript-Ausdruck, mit dem wir Daten aus Arrays, Objekten und Karten extrahieren und in separaten Variablen speichern können. Durch die Destrukturierung können wir zahlreiche Attribute oder Objekte auf einmal aus einem Array extrahieren.

Schauen wir uns die Syntax an:

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

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

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

const { a,b } = obj;

Arten der Destrukturierung:

Zuordnung zu bestehenden Variablennamen:

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. Zuordnung zu neuen Variablennamen:

Eingang:

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. Belegung mit Defaultwerten:

Eingang:

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

Damit endet die Geschichte der Destrukturierung in JS.

Folge mir auf meinen Socials:

GitHub

Linkedin

Twitter