destructuring în JavaScript

const { cheie1, cheie2 = implicit } = obiect;
const [primul, alDoilea] = tablou;

Ce face destructuring

Destructurarea îți permite să creezi mai multe variabile dintr-o dată, din proprietățile unui obiect sau din elementele unui tablou.

La obiecte contează numele: variabila primește proprietatea cu același nume. La tablouri contează poziția. Poți da valori implicite, poți redenumi ({ nume: numeClient }) și poți aduna restul cu ...rest.

Exemple

Exemplul 1: Din obiect

const comanda = { id: 512, client: "Ana", total: 249 };
const { client, total } = comanda;

console.log(client, total);

Rezultat

Ana 249

Exemplul 2: Valori implicite, redenumire și rest

const setari = { tema: "întunecată", limba: "ro", font: 16 };
const { tema: aspect, notificari = true, ...altele } = setari;

console.log(aspect);
console.log(notificari);
console.log(altele);

Rezultat

întunecată
true
{ limba: 'ro', font: 16 }

Exemplul 3: Din tablou și în parametrii unei funcții

const [castigator, locDoi] = ["Ana", "Mihai", "Ioana"];
console.log(castigator, locDoi);

function afiseaza({ nume, oras = "necunoscut" }) {
  console.log(`${nume} din ${oras}`);
}
afiseaza({ nume: "Dan", oras: "Cluj" });
afiseaza({ nume: "Elena" });

Rezultat

Ana Mihai
Dan din Cluj
Elena din necunoscut

Greșeli frecvente

• Destructurezi undefined sau null: const { a } = undefined dă TypeError. Pune o valoare implicită: const { a } = obiect || {}.
• Scrii un nume care nu există în obiect și variabila rămâne undefined, fără nicio eroare.

Comenzi înrudite

• ... (spread): Desface un tablou sau un obiect în elementele lui. Folosit pentru copii și combinări.
• Object.entries: Transformă un obiect într-un tablou de perechi [cheie, valoare], ușor de parcurs.
• split: Împarte un text în bucăți după un separator și returnează un tablou.