Деструктуризация в JavaScript

Учим писать код на JavaScript проще. В тексте разберемся на примерах, как работает синтаксис и как деструктуризировать массив.

Java Script — популярный язык программирования. Его используют в создании сайтов, приложений и интерфейсов. Разработчики постоянно развивают язык и создают обновления, которые позволяют писать код короче и понятнее. Одним из таких инструментов стала деструктуризация — способ получения данных.

Что такое деструктуризация

Деструктуризация — это способ «распаковки» значений из массивов или свойств объектов в отдельные переменные с помощью специального синтаксиса.

Понимаю, термин новый и на первый взгляд может кого-то напугать. Но если внимательно разобраться, то в нем нет ничего сложного.

Для начала возьмем простой пример вывода данных пользователя в консоль:


      const user = { name: "Саша", age: 25 };

const name = user.name;
const age = user.age;

console.log(
 'Имя:', name,
 'возраст:', age,
);

Наверняка читатель задастся вопросом: «Зачем присваивать значения в одноименные константы, если можно сразу обратиться к свойствам объекта?». И ведь действительно, можно же просто сделать так:


      const user = { name: "Саша", age: 25 };


console.log(
 'Имя:', user.name,
 'возраст:', user.age,
);

Все верно. Разница только в том, что в первом случае избавились от контекста user и сохранили значения в отдельные переменные. Это удобно, если дальше по коду мы планируем часто обращаться к name и age. Таким образом можно не писать каждый раз user.name или user.age.

Важно понимать, что избавляться от контекста не всегда полезно. Это может вызвать проблемы с читаемостью, областью видимости и переиспользованием. Рассмотрим их на примере нашего кода.

Читаемость. Если посмотреть на переменную name, уже не очевидно, к чему она относится — к имени пользователя, автору статьи или, может, товару.
Область видимости. Если в коде есть несколько переменных name, то можно с легкостью их перепутать.
Переиспользование. Когда у вас разные объекты с одинаковыми свойствами, становится сложно понять, к чему относится конкретная переменная.

Бывают ситуации, когда потеря контекста не мешает, а наоборот упрощает код. Например, если контекст очевиден:


      function logUser(user) {
 const name = user.name;
 const age = user.age;

 console.log(
   'Имя:', name,
   'возраст:', age,
 );
}

logUser({ name: "Саша", age: 25 });

Здесь контекст подсказывает функция logUser, которая ясно говорит, что речь идет именно о пользователе. Переменные name и age внутри функции воспринимаются однозначно.

Вместо ручного присвоения свойств в переменные современный JavaScript предлагает удобный синтаксис — деструктуризацию. Смотрим, как это выглядит в коде:


      const user = { name: "Alex", age: 25 };

const { name, age } = user; // деструктуризация

console.log(
 'Имя:', name,
 'возраст:', age,
);

Результат получился тот же, но код явно стал короче.

Также удобно применять деструктуризацию в параметрах функций:


      function logUser({ name, age }) {
 console.log(
   'Имя:', name,
   'возраст:', age,
 );
}

logUser({ name: "Саша", age: 25 });

Здесь объект распаковывается прямо в объявлении параметров: функция сразу получает отдельные значения. Не нужно писать user.name или объявлять дополнительные константы.

Как работает синтаксис деструктуризации

Существует несколько примеров использования синтаксиса. Давайте чуть подробнее рассмотрим каждый.

Базовая форма

Создает константу name со значением user.name.


      const user = { name: "Alex", age: 25 };
const { name } = user;

Переименование

При деструктуризации можно гибко управлять названием идентификатора с помощью переименования. Например, name будет называться userName.


      const user = { name: "Alex", age: 25 };
const { name: userName } = user;

Значения по умолчанию

Кажется, это лучшее, что предлагает деструктуризация. Поскольку в объекте user отсутствует свойство age, то в константу age присваивается 18, как значение по умолчанию. И никакие проверки не нужны.


      const user = { name: "Alex" };
const { name: userName, age = 18 } = user;

Вложенные объекты

Также можно распаковывать и вложенные объекты. Обратите внимание, здесь создается константа city, значение которой будет присвоено из user.address.city.


      const user = {
 name: "Alex",
 age: 25,
 address: {
   city: "Воронеж",
   street: "Вавилова"
 }
};
const { address: { city } } = user;

Хранить данные в объектах удобно, но есть и массивы. Что же «думает» деструктуризация по этому поводу? Разберемся дальше.

Больше полезных материалов

Как деструктуризировать массив

Часто нам нужно извлечь значения из массива. Сделать это можно с помощью индексов:


      const timers = [10, 20, 30];

const first = timers[0];
const second = timers[1];
const third = timers[2];

console.log(first, second, third);

Такой вариант рабочий, но выглядит громоздко. Его можно сделать гораздо короче и элегантнее через деструктуризации массива:


      const timers = [10, 20, 30];

const [first, second, third] = timers; // деструктуризация

console.log(first, second, third);

Пропуск элементов

А что, если нужно пропустить, например, элемент с индексом 1? Легко, просто оставляем пустое место между запятыми:


      const timers = [10, 20, 30];

const [first, , third] = timers;

Значения по умолчанию

При деструктуризации массива, как и в случае с объектами, можно задавать значения по умолчанию. Это удобно, если элементов в массиве меньше, чем ожидается:


      const timers = [10, 20];

const [first, second, third = 7] = timers;

console.log(first, second, third);

Деструктуризация массивов позволяет доставать значения быстро и удобно, без лишнего кода и обращения к индексам. С ее помощью код становится компактнее и нагляднее. Особенно при использовании оператора rest, но об этом — в следующей статье.

Практическое задание

Под конец предлагаю разобрать небольшой пример, который я уже показывал в статье о стрелочных функциях. Конечно, можно было сделать по-другому — например, использовать встроенные методы и более продвинутые способы создания UI, но в примере я использовал только те конструкции и способы, которые мы уже проходили.

Итак, пример кода мини-приложения расчета стоимости покупки:


      const products = [];

// <ul> для списка товаров

const listEl = document.createElement('ul');

// Кнопка "Добавить"
const addButtonEl = document.createElement('button');
addButtonEl.textContent = 'Добавить';

// Обработчик клика — стрелочная функция
addButtonEl.onclick = () =&gt; {
 const productName = prompt('Введите название товара');
 const productPrice = Number(prompt('Введите стоимость товара'));

 // Проверка введённых значений
 if (!productName || !productPrice) {
   alert('Введите корректное значение');
   return;
 }

 products.push({
   name: productName,
   price: productPrice,
 });

 renderList();
};

// <div> для общей стоимости
const totalPriceEl = document.createElement('div');

// Стрелочная функция, создающая <li> для товара
const getItemEl = (index, item) =&gt; {
 const itemEl = document.createElement('li');
 itemEl.textContent = `${index + 1}) ${item.name}, стоимость: ${item.price} руб.`;

 const deleteButtonEl = document.createElement('button');
 deleteButtonEl.textContent = 'Удалить';

 deleteButtonEl.onclick = () =&gt; {
   products.splice(index, 1);
   renderList();
 };

 itemEl.append(deleteButtonEl);
 return itemEl;
};

// Отрисовка списка и подсчёт стоимости (тоже стрелочная)
const renderList = () =&gt; {
 let totalPrice = 0;
 listEl.textContent = '';

 for (let i = 0; i &lt; products.length; i++) {
   listEl.append(getItemEl(i, products[i]));
   totalPrice += products[i].price;
 }

 totalPriceEl.textContent = `Стоимость покупки: ${totalPrice} руб.`;
};

document.body.append(listEl, totalPriceEl, addButtonEl);

А теперь посмотрим, как будет выглядеть этот же код с деструктуризацией:


      const products = [];

// <ul> для списка товаров
const listEl = document.createElement('ul');

// Кнопка "Добавить"
const addButtonEl = document.createElement('button');
addButtonEl.textContent = 'Добавить';

// Обработчик клика — стрелочная функция
addButtonEl.onclick = () =&gt; {
 const productName = prompt('Введите название товара');
 const productPrice = Number(prompt('Введите стоимость товара'));

 // Проверка введённых значений
 if (!productName || !productPrice) {
   alert('Введите корректное значение');
   return;
 }

 products.push({
   name: productName,
   price: productPrice,
 });

 renderList();
};

// <div> для общей стоимости
const totalPriceEl = document.createElement('div');

// Стрелочная функция, создающая <li> для товара
const getItemEl = (index, { name, price }) =&gt; {
 const itemEl = document.createElement('li');
 itemEl.textContent = `${index + 1}) ${name}, стоимость: ${price} руб.`;

 const deleteButtonEl = document.createElement('button');
 deleteButtonEl.textContent = 'Удалить';

 deleteButtonEl.onclick = () =&gt; {
   products.splice(index, 1);
   renderList();

 };

 itemEl.append(deleteButtonEl);
 return itemEl;
};

// Отрисовка списка и подсчёт стоимости (тоже стрелочная)
const renderList = () =&gt; {
 let totalPrice = 0;
 listEl.textContent = '';

 for (let i = 0; i &lt; products.length; i++) {
   listEl.append(getItemEl(i, products[i]));

   // деструктуризация для извлечения price
   const { price } = products[i];
   totalPrice += price;
 }

 totalPriceEl.textContent = `Стоимость покупки: ${totalPrice} руб.`;
};

document.body.append(listEl, totalPriceEl, addButtonEl);

При изучении языка программирования очень важны практика и самостоятельная работа. Рекомендую переписать пример кода и попробовать добавить в него что-то свое. Такой подход точно поможет лучше понять тему и закрепить ее на практике.

Заключение

Деструктуризация — это способ быстро извлекать значения из объектов и массивов. С ее помощью можно сделать код короче, понятнее и аккуратнее. Главное, следить за контекстом переменных и, при необходимости, использовать переименование.

А теперь домашнее задание. Попробуйте переписать свои примеры с деструктуризацией. Так вы быстрее освоите инструмент и сможете использовать в реальных проектах.

Увидимся в следующей статье!