Αποδόμηση Αντικειμένων (Destructuring)

Η αποδόμηση αντικειμένων είναι μια σύνταξη στην JavaScript που επιτρέπει την εξαγωγή τιμών από αντικείμενα και την ανάθεση τους σε μεταβλητές με πιο συνοπτικό τρόπο.

Βασική Σύνταξη

Η βασική σύνταξη για την αποδόμηση αντικειμένων είναι η εξής:

const person = {
    name: 'Alice',
    age: 25,
    city: 'London',
};

const { name, age, city } = person;

console.log(name); // "Alice"
console.log(age); // 25
console.log(city); // "London"

Σε αυτό το παράδειγμα, οι ιδιότητες name, age και city του αντικειμένου person αποδομούνται και οι τιμές τους ανατίθενται σε αντίστοιχες μεταβλητές με τα ίδια ονόματα.

Δεν είναι απαραίτητο να αποδομήσουμε όλες τις ιδιότητες του αντικειμένου. Μπορούμε να επιλέξουμε μόνο αυτές που μας ενδιαφέρουν:

const person = {
    name: 'Alice',
    age: 25,
    city: 'London',
    profession: 'Engineer',
};

const { name, profession } = person;

console.log(name); // "Alice"
console.log(profession); // "Engineer"

Προσοχή

Η σειρά των ιδιοτήτων κατά την αποδόμηση δεν έχει σημασία, καθώς η αντιστοίχιση γίνεται με βάση τα ονόματα των ιδιοτήτων. Συνεπώς δεν μπορούμε να δώσουμε ότι ονομά θέλουμε στις μεταβλητές, εκτός αν χρησιμοποιήσουμε την τεχνική αλλαγής ονομάτων που περιγράφεται παρακάτω.

Αλλαγή Ονομάτων Μεταβλητών

Για να αλλάξουμε τα ονόματα των μεταβλητών κατά την αποδόμηση, μπορούμε να χρησιμοποιήσουμε την ακόλουθη σύνταξη:

const person = {
    name: 'Alice',
    age: 25,
    city: 'London',
};

const { name: personName, age: personAge, city: personCity } = person;

console.log(personName); // "Alice"
console.log(personAge); // 25
console.log(personCity); // "London"

Σε αυτό το παράδειγμα, οι ιδιότητες του αντικειμένου person αποδομούνται και οι τιμές τους ανατίθενται σε νέες μεταβλητές με διαφορετικά ονόματα.

Προεπιλεγμένες Τιμές

Μπορούμε να ορίσουμε προεπιλεγμένες τιμές για τις μεταβλητές κατά την αποδόμηση, σε περίπτωση που η ιδιότητα δεν υπάρχει στο αντικείμενο:

const person = {
    name: 'Alice',
    age: 25,
};

const { name, age, city = 'London' } = person;

console.log(name); // "Alice"
console.log(age); // 25
console.log(city); // "London"

Σε αυτό το παράδειγμα, η ιδιότητα city δεν υπάρχει στο αντικείμενο person, οπότε η μεταβλητή city λαμβάνει την προεπιλεγμένη τιμή 'London'.

Αποδόμηση σε Παραμέτρους Συνάρτησης

Μπορούμε επίσης να χρησιμοποιήσουμε την αποδόμηση αντικειμένων απευθείας στις παραμέτρους μιας συνάρτησης:

function greet({ name, age }) {
    console.log(`Hello, my name is ${name} and I am ${age} years old.`);
}

const person = {
    name: 'Alice',
    age: 25,
};

greet(person); // "Hello, my name is Alice and I am 25 years old."

Σε αυτό το παράδειγμα, η συνάρτηση greet αποδομεί το αντικείμενο person που της περνάμε ως όρισμα και χρησιμοποιεί τις τιμές των ιδιοτήτων name και age.

Αυτό θα μας φανεί ιδιαίτερα χρήσιμο στην React, όπου συχνά περνάμε αντικείμενα ως ιδιότητες (props) σε components.

Υπόλοιπα Στοιχεία

Μπορούμε να χρησιμοποιήσουμε τον τελεστή υπόλοιπων στοιχείων (...) για να συλλέξουμε τις υπόλοιπες ιδιότητες ενός αντικειμένου σε ένα νέο αντικείμενο:

const person = {
    name: 'Alice',
    age: 25,
    city: 'London',
    profession: 'Engineer',
};

const { name, ...rest } = person;

console.log(name); // "Alice"
console.log(rest); // { age: 25, city: 'London', profession: 'Engineer' }

Σε αυτό το παράδειγμα, η ιδιότητα name αποδομείται σε μια μεταβλητή, ενώ οι υπόλοιπες ιδιότητες συλλέγονται στο αντικείμενο rest.

Αυτή η τεχνική είναι χρήσιμη όταν θέλουμε να απομονώσουμε συγκεκριμένες ιδιότητες και να διατηρήσουμε τις υπόλοιπες για περαιτέρω χρήση.