Destructurarea

Destructurarea (destructuring) permite extragerea valorilor individuale dintr-un obiect în variabile sau constante:

const user = {
   name: "Tom",
   age: 24,
   phone: "+367438787",
   email: "tom@gmail.com"
};
const {name, email} = user;
console.log(name);      // Tom
console.log(email);     // tom@gmail.com

În timpul destructurării unui obiect, variabilele sunt plasate între acolade și li se atribuie obiectul. Asocierea între proprietățile obiectului și variabilele/constantele se face în funcție de nume.

Putem specifica că dorim să obținem valorile proprietăților obiectului în variabile/constante cu un alt nume:

const user = {
   name: "Tom",
   age: 24,
   phone: "+367438787",
   email: "tom@gmail.com"
};
const {name: userName, email: mailAddress} = user;
console.log(userName);      // Tom
console.log(mailAddress);   // tom@gmail.com

În acest caz, proprietatea "name" se asociază cu variabila "userName", iar câmpul "email" - cu variabila "mailAddress".

De asemenea, putem atribui variabilelor/constantelor valori implicite în cazul în care în obiect nu există proprietățile corespunzătoare:

const user = {
   name: "Tom",
   age: 24,
};
const {name  = "Sam", email: mailAddress = "sam@gmail.com"} = user;
console.log(name);              // Tom
console.log(mailAddress);       // sam@gmail.com

Dacă o variabilă/constantă în timpul destructurării este asociată cu o proprietate care reprezintă un obiect complex, atunci după destructurare, acea variabilă/constantă va reprezenta, de asemenea, un obiect complex:

const user = {
   name: "Tom",
   age: 24,
   account: {
       login: "tom555",
       password: "qwerty"
   }
};
const {account} = user;
console.log(account.login);         // tom555
console.log(account.password);      // qwerty

Dar dacă dorim să extragem valori individuale dintr-un obiect complex încastrat, cum ar fi în exemplul de mai sus, obiectul "account" în interiorul obiectului "user", nu este neapărat să extragem întregul obiect - putem, de asemenea, să furnizăm variabile/constante separate pentru proprietățile sale:

const user = {
   name: "Tom",
   age: 24,
   account: {
       login: "tom555",
       password: "qwerty"
   }
};
const {name, account: {login}} =  user;
console.log(name);      // Tom
console.log(login);     // tom555

Aici, extragem în variabila "login" valoarea proprietății "user.account.login".

Obținerea celorlalte proprietăți ale unui obiect cu ajutorul operatorului rest

Operatorul rest, sau operatorul ..., permite obținerea celorlalte proprietăți ale unui obiect care nu sunt asociate cu variabilele/constante, într-o variabilă/constantă separată:

const tom = {
   name: "Tom",
   age: 24,
   phone: "+367438787",
   email: "tom@gmail.com"
};
const {name, age, ...contacts} = tom;
console.log(name);      // Tom
console.log(age);       // 24
console.log(contacts);  // {phone: "+367438787", email: "tom@gmail.com"}

În acest caz, descompunem obiectul "tom" în trei constante: "name", "age", și "contacts". Constantele "name" și "age" sunt asociate cu proprietățile obiectului "tom" pe baza numelui. Însă, constanta "contacts" primește toate celelalte proprietăți nesuprapuse ale obiectului.

Pentru a le obține, înainte de numele constantei, se folosește operatorul ... (puncte suspensive): ...contacts. Astfel, constanta "contacts" va reprezenta un obiect care va conține proprietățile "email" și "phone" ale obiectului "tom".

Este important de menționat că variabila/constantă care primește toate celelalte proprietăți ale unui obiect va reprezenta întotdeauna un obiect, chiar dacă primește doar o singură proprietate din obiect.

Destructurarea de array-uri

De asemenea, se poate realiza destructurarea de array-uri:

const users = ["Tom", "Sam", "Bob"];
const [a, b, c] = users;

console.log(a);     // Tom
console.log(b);     // Sam
console.log(c);     // Bob

În timpul destructurării unui array, variabilele sunt plasate între paranteze pătrate și primesc în mod secvențial valorile elementelor array-ului.

Dacă numărul de variabile/constante este mai mic decât numărul de elemente din array, atunci elementele rămase ale array-ului sunt pur și simplu ignorate.

const users = ["Tom", "Sam", "Bob"];
const [a, b] = users;
 
console.log(a);     // Tom
console.log(b);     // Sam

Dacă numărul de variabile/constante este mai mare decât numărul de elemente din array, atunci variabilele/constantele nesuprapuse vor primi valoarea undefined:

const users = ["Tom", "Sam", "Bob"];
const [a, b, c, d] = users;
 
console.log(a);     // Tom
console.log(b);     // Sam
console.log(c);     // Bob
console.log(d);     // undefined

Obținerea elementelor rămase ale unui array și stocarea acestora într-un alt array se realizează, de asemenea, cu ajutorul operatorului...

const users = ["Tom", "Sam", "Bob", "Mike"];
const [tom, ...others] = users;
 
console.log(tom);       // Tom
console.log(others);    // ["Sam", "Bob", "Mike"]

Aici, array-ul "others" va conține cele trei elemente finale ale array-ului.

Omiterea elementelor

În acest caz, putem să trecem peste anumite elemente ale array-ului, lăsând spațiu pentru acestea în locul numelui variabilelor:

const users = ["Tom", "Sam", "Bob", "Ann", "Alice", "Kate"];
const [first,,,,fifth] = users;

console.log(first);     // Tom
console.log(fifth);     // Alice

Expresia first,,,,fifth indică faptul că dorim să obținem primul element al array-ului în variabila "first", apoi să trecem peste trei elemente și să obținem al cincilea element în variabila "fifth".

În mod similar, putem obține, de exemplu, al doilea și al patrulea element:

const users = ["Tom", "Sam", "Bob", "Ann", "Alice", "Kate"];
const [,second,,forth] = users;

console.log(second);        // Sam
console.log(forth);         // Ann

Destructurarea array-urilor multidimensionale

const coordinates = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; const [ [x1, y1, z1], [x2, y2, z2], [x3, y3, z3] ] = coordinates;

Destructurarea obiectelor din array-uri

Poți combina obținerea datelor dintr-un array și a unui obiect:

const people = [
   {name: "Tom", age: 34},
   {name: "Bob", age: 23},
   {name: "Sam", age: 32}
];
const [,{name}] = people;

console.log(name);      // Bob

În acest caz, obținem valoarea proprietății "name" din al doilea obiect din array.

Un alt exemplu - destructurarea obiectelor în timpul iterării prin array-ul de obiecte:

const people = [
   {name: "Tom", age: 34},
   {name: "Bob", age: 23},
   {name: "Sam", age: 32}
];
const [,{name}] = people;
for(let {name: username, age: userage} of people){
   console.log(`Nume: ${username}  Vârstă: ${userage}`);
}
// Output în consolă
// Nume: Tom  Vârstă: 34
// Nume: Bob  Vârstă: 23
// Nume: Sam  Vârstă: 32

Destructurarea parametrilor

Dacă un array sau un obiect este transmis ca parametru unei funcții, poți de asemenea să îl descompui în valori separate:

function display({name:userName, age:userAge}){
   console.log(userName, userAge);
}
function sum([a, b, c]){
   const result = a + b + c;
   console.log(result);
}
const user = {name:"Alice", age:33, email: "alice@gmail.com"};

const numbers = [3, 5, 7, 8];

display(user);  // Alice 33
sum(numbers);   // 15

Schimbul de valori

Datorită destructurării, schimbul de valori între două variabile a devenit foarte simplu:

let first = "Tom";
let second = "Bob";
[first, second] = [second, first];
 
console.log(first);     // Bob
console.log(second);    // Tom

Acest lucru simplifică rezolvarea mai multor probleme. De exemplu, putem utiliza destructurarea pentru a realiza o sortare simplă a unui array:

let nums = [9, 3, 5, 2, 1, 4, 8, 6];
for(let i = 0; i < nums.length; i++)
   for(let j = 0; j < nums.length; j++)
       if (nums[i] < nums[j]) [nums[j], nums[i]] = [nums[i], nums[j]];
       
console.log(nums);  // [1, 2, 3, 4, 5, 6, 8, 9]