Без сомнений, JavaScript — крайне популярный язык программирования. И разработчики постоянно создают обновления, которые позволяют писать код проще, короче и понятнее. Одним из таких инструментов стала деструктуризация.

Привет, Хабр! Меня зовут Александр Дудукало, я автор базового курса по JavaScript. В этом тексте на примерах разберемся, как работает синтаксис и как деструктуризировать массив. Подробности под катом!

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

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

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

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

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 или объявлять дополнительные константы.

Бесплатный базовый курс по JS

Рассказываем, как работать с переменными, типами данных, функциями и многом другом!

Начать изучение →

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

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

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

Создает константу 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 = () => {
 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) => {
 const itemEl = document.createElement('li');
 itemEl.textContent = ${index + 1}) ${item.name}, стоимость: ${item.price} руб.;

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

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

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

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

 for (let i = 0; i < 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 = () => {
 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 }) => {
 const itemEl = document.createElement('li');
 itemEl.textContent = ${index + 1}) ${name}, стоимость: ${price} руб.;

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

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

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

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

 for (let i = 0; i < 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);

Получилось найти деструктуризацию? Пишите в комментариях, что именно изменилось в коде. Мне будет интересно почитать. 

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

Заключение

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

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