Володимир Шайтан Senior Full Stack Developer у UKEESS Software House, Викладач Комп'ютерної школи Hillel.

Як часто ви чуєте слово «деструктуризація»? А як часто Ви думаєте, що це слово означає «зруйнувати щось»?

Це може ставатись однаково часто, але коли ми говоримо про деструктуризацію в JavaScript, то ми не руйнуємо нічого. Зараз поясню як так виходить.

Погодьтеся, що дуже часто в роботі у вас є багато груп значень, які повʼязані між собою: характеристики користувача, міста в якомусь конкретному регіоні чи країні тощо. Мені особисто дуже хочеться помістити їх всі в масив чи в обʼєкт, коли я думаю, що вони можуть бути окремими. Чому так?

Усе надзвичайно просто: масиви й обʼєкти — це найбільш гнучкі типи даних JavaScript, а це означає, що способів працювати з ними є дуже і дуже багато.

Зараз ми будемо говорити про один дуже потужний (чи це слово вже ріже слух?) інструмент для роботи з цими структурами даних. Поїхали :)

Спочатку ми звернемося до значення слів «синтаксичний цукор». Syntactic sugar — це термін, що використовується в програмуванні для опису синтаксису, який не додає нових можливостей до мови, але робить код більш читабельним і зручним для написання. Наприклад: деструктуризація, стрілочні функції, метод constructor у класах тощо.

ЩО ТАКЕ ДЕСТРУКТУРИЗАЦІЯ?

Як ми вже зрозуміли, деструктуризація — це один із видів «синтаксичного цукру», представлений світу в ECMAScript2015 (ES6). Деструктуризація дозволяє «розпаковувати» значення з масивів або об’єктів й легко присвоювати їх змінним. Замість того, щоб звертатися до значень через індекси масивів або ключі об’єктів, можна зручно витягати їх безпосередньо під час ініціалізації змінних.

ОСНОВНІ АСПЕКТИ ДЕСТРУКТУРИЗАЦІЇ

Логіка роботи
В основі процесу «розбирання» лежить відповідність значень за ключами (для об’єктів) або за позицією (для масивів). Далі будуть приклади й там буде зрозуміліше.
Присвоєння за допомогою шаблонів
У деструктуризації використовується механізм паттерн-матчінгу (pattern matching), що дозволяє відповідати структуру масиву або об’єкта на шаблон, який ви задаєте в змінних. Це зручно, оскільки ви можете вибірково витягувати лише ті частини даних, які вас цікавлять, без необхідності звертатися до всіх елементів або властивостей. Якщо ми говоримо про великі обʼєкти, то це стає надзвичайно зручно.
Імперативний і декларативний підходи
До введення деструктуризації, JavaScript використовував імперативний підхід до присвоєння значень змінним, де кожен елемент об’єкта або масиву потрібно було вручну витягати та присвоювати. Деструктуризація ж впроваджує декларативний підхід, коли можна визначити бажану структуру й автоматично «розпакувати» дані.
Гнучкість і зручність
Деструктуризація підходить як для простих, так і для складних структур даних. Ви можете розпаковувати вкладені об’єкти, залишкові параметри (rest parameters) і використовувати значення за замовчуванням, що робить її дуже гнучкою. Це дозволяє мінімізувати кількість коду, зосереджуючи увагу лише на потрібних даних.

КОЛИ Ж ВИКОРИСТОВУВАТИ ДЕСТРУКТУРИЗАЦІЮ?

Коли потрібно отримати кілька властивостей об’єкта або елементів масиву, деструктуризація значно скорочує код.
Без деструктуризації доводилося б постійно звертатися до змінних і переписувати їх багато разів.
Деструктуризація робить код більш зрозумілим та інтуїтивним, що поліпшує його підтримку і читабельність, особливо при роботі з великими об’єктами або складними масивами.

НЕДОЛІКИ ДЕСТРУКТУРИЗАЦІЇ:

Зрозумілість
Хоча деструктуризація допомагає зберегти чистоту коду, її занадто часте використання ускладнює зрозумілість для новачків або людей, які не знайомі з цим синтаксисом.
Не завжди підходить для великих структур
Для деструктуризації дуже великих об’єктів або масивів код може стати менш зрозумілим, особливо якщо доводиться розбирати вкладені структури.

Опишімо спочатку коротко масиви й обʼєкти.

Масив у JavaScript — це набір елементів, до яких можна отримати доступ через числовий індекс. Елементи масиву можуть бути будь-якого типу даних, включно з числами, рядками й навіть іншими масивами або об'єктами. Вони мають ось такий вигляд:

const array = [ 30, ‘one’, 50, ‘four’ ];
console.log(array[2]); //буде виведено 50

Об’єкти в JavaScript — це колекції пар ключ-значення. Ключі в об’єкті є рядками, тоді як значення можуть мати будь-який тип даних.

Об’єкти створюються за допомогою фігурних дужок, а окремі властивості можна отримати за допомогою крапкової нотації або квадратних дужок. Ось приклад об’єкта в JavaScript:

const user = {
	firstName: ‘John’,
	lastName: ‘Doe’,
	age: 35,
	}
console.log(user.lastName); // виведе Doe

Тепер, повертаючись до деструктуризації, поглянемо на приклади.

ДЕСТРУКТУРИЗАЦІЯ МАСИВІВ

Масиви в JavaScript зберігають значення на основі порядку. Деструктуризація масиву дозволяє витягувати значення з масиву за їхньою позицією.

const numbers = [1, 2, 3];

// Використання деструктуризації
const [first, second, third] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(third); // 3

Ви можете пропускати елементи масиву, якщо вони вам не потрібні.

const colors = ['red', 'green', 'blue'];

// Пропуск другого елемента
const [primary, , tertiary] = colors;

console.log(primary);  // 'red'
console.log(tertiary); // 'blue'

Деструктуризація дозволяє встановлювати значення за замовчуванням для змінних, які можуть не містити даних.

const points = [8];
// Присвоєння значень за замовчуванням
const [x = 10, y = 20] = points;

console.log(x); // 8
console.log(y); // 20

ДЕСТРУКТУРИЗАЦІЯ ОБ’ЄКТІВ

Деструктуризація об’єкта дозволяє витягувати значення з властивостей об’єкта за їхніми ключами.

const person = {
  name: 'Alice',
  age: 30,
  city: 'Kyiv'
};

// Деструктуризація об'єкта
const { name, age, city } = person;

console.log(name); // 'Alice'
console.log(age);  // 30
console.log(city); // 'Kyiv'

Якщо вам потрібно використовувати інші імена змінних, ви можете змінити назву під час деструктуризації.

const user = {
  username: 'john_doe',
  email: 'john@example.com'
};

// Зміна імені змінної
const { username: userLogin, email: userEmail } = user;

console.log(userLogin); // 'john_doe'
console.log(userEmail); // 'john@example.com'

Подібно до масивів, ви також можете встановлювати значення за замовчуванням для об’єктів.

const car = {

make: 'Tesla',

model: 'Model 3'

};

// Значення за замовчуванням

const { make, model, year = 2020 } = car;

console.log(make); // 'Tesla'

console.log(model); // 'Model 3'

console.log(year); // 2020

ДЕСТРУКТУРИЗАЦІЯ ВКЛАДЕНИХ ОБ’ЄКТІВ

JavaScript також дозволяє деструктуризувати вкладені об’єкти. Це корисно, коли ви працюєте з об’єктами, що містять інші об’єкти.

const product = {
  title: 'Laptop',
  specs: {
    cpu: 'Intel i7',
    ram: '16GB',
  }
};

// Деструктуризація вкладеного об'єкта
const { title, specs: { cpu, ram } } = product;

console.log(title); // 'Laptop'
console.log(cpu);   // 'Intel i7'
console.log(ram);   // '16GB'

ДЕСТРУКТУРИЗАЦІЯ У ФУНКЦІЯХ

Деструктуризація також часто використовується у функціях, щоб спростити передачу параметрів.

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

// Використання деструктуризації в параметрах функції
function greet({ name, age }) {
  console.log(`Hello, my name is ${name} and I am ${age} years old.`);
}

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

ДЕСТРУКТУРИЗАЦІЯ МАСИВІВ І ФУНКЦІЇ

Деструктуризацію можна використовувати і для функцій, які повертають масиви. Це зручно, коли ви працюєте з функціями, що повертають декілька значень.

function getCoordinates() {
  return [50, 30];
}
const [latitude, longitude] = getCoordinates();

console.log(latitude);  // 50
console.log(longitude); // 30

ВИКОРИСТАННЯ ЗАЛИШКОВИХ ПАРАМЕТРІВ У ДЕСТРУКТУРИЗАЦІЇ

Залишкові параметри (rest parameters) дозволяють зберігати залишкові значення масиву або властивості об’єкта в окрему змінну.

const fruits = ['apple', 'banana', 'cherry', 'date'];

// Використання залишкових параметрів
const [first, second, ...rest] = fruits;

console.log(first);  // 'apple'
console.log(second); // 'banana'
console.log(rest);   // ['cherry', 'date']

Для об’єктів залишкові властивості можуть також бути дуже корисними.

const user = {
  name: 'Alice',
  age: 30,
  country: 'Ukraine'
};

// Використання залишкових властивостей
const { name, ...details } = user;

console.log(name);     // 'Alice'
console.log(details);  // { age: 30, country: 'Ukraine' }

Важливо не забувати, що надмірне використання деструктуризації може заплутати код, особливо для новачків. Однак за умови правильного використання деструктуризація значно поліпшує підтримку й читабельність коду, особливо при роботі з великими структурами даних. Тож цим точно варто користуватися. Можливо, перші декілька разів буде складно, але з вивченням цієї теми прийде й розуміння як і навіщо це робити та з часом, повірте, це полегшить вам життя.

ВИСНОВОК

Деструктуризація — це ваш інструмент для роботи з даними в JavaScript. Вона допомагає не «руйнувати», а навпаки — впорядковувати та витягати потрібну інформацію швидко й ефективно. Її сила в гнучкості та простоті, яка робить код компактним і зрозумілим. Тому, якщо ви ще не використовуєте її повною мірою, починайте експериментувати з цим інструментом, і ви відчуєте, як ваш код стане більш легким і керованим.

Деструктуризація — це один із ваших найбільш надійних помічників в оптимізації. А, як ми всі знаємо, оптимізація в наш час — ультраважлива штука.

Тож не бійтеся пробувати й винаходити нові шляхи оптимізації. А ми, як завжди, зустрінемося в той самий час і в цьому ж місці :)