Деструктуризація - це синтаксичний цукор, який дозволяє витягнути значення з масивів або об’єктів у окремі змінні, що робить код коротшим і читабельнішим. Це сухе запитання тому здебільшого вам треба розуміти визначення і навести декілька прикладів використання.
Деструктуризація масивів
Використовуючи літерал [], ми можемо витягнути елементи масиву присвоївши їх в змінні.
// Перелік починається з 0 індексу тому константа a=10, b=20.
// Якщо ми додамо ще одну константу с, вона буде дорівнювати 30.
// Якщо додати ще d, який матиме індекс 3, то отримаємо undefined,
// так як елемента з таким індексом немає
const arr = [10, 20, 30];
const [a, b] = arr;
// Ми також можемо пропускати елементи при необхідності. first=1, third=3.
// Але як на мене це не найкраща практика, яка може привести до багів.
// Тому її краще уникати
const [first, , third] = [1, 2, 3];
// Ще одним розповсюдженим способом використання є ...rest.
// Ми можемо витягнути ті елементи, які нам потрібні, а решту елементів
// записати в окрему константу. Таким чином head=1,
// tail буде означати решту елементів tail=[2,3,4]
const [head, ...tail] = [1, 2, 3, 4];
// Також, ми можемо присвоювати значення по замовчуванню. Наприклад тут x=7,
// бо такий елемент існує, але y=10 так як елемент з індексом 1 відсутній,
// y матиме початкове значення undefined і тому спрацює значення по замовчуванню 10
const [x = 5, y = 10] = [7];
Деструктуризація обʼєктів
В цілому тут вона працює так само як і для масивів тому коротко розберемо приклади, для закріплення даного питання.
// Витягуємо поле name i записуємо його в константу
const user = { name: "Alex", email: "test@test.com" };
const { name } = user;
// При потребі, ми завжди можемо використати синтаксис переіменування
// і замість name, в коді використовувати username
const { name: username } = user;
// Як і в масивах, ми можемо вказувати значення по замовчуванню.
// В цьому випадку role=undefined тому використовується
// значення по замовчуванню "user"
const { role = "user" } = { name: "Alex" };
// Як і в масивах ми можемо використовувати rest для збору полів в одну константу.
// Наприклад, витягуємо password з юзера і передаємо решту полів на фронтенд,
// щоб не світити хешом пароля
const { password, ...restUser } = {
name: "Alex",
email: "test@test.com",
password: "some pwd hash"
};
// Теж саме можна робити з вкладеними полями. Тут потрібно бути обережним, так як
// при відсутності profile в user, ми отримаємо помилку через те що хочемо
// викликати .gender на undefined. Тому хорошою практикою буде вказати значення по замовчуванню
const user = { profile: { gender: "male" } };
const { profile: { gender } } = user;