</> Praktum

Главная / JavaScript / Деструктуризация

JavaScript · данные

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

Деструктуризация извлекает нужные значения из объекта или массива и сразу создаёт переменные. Она делает код короче, если структура данных заранее понятна.

Объекты

Имена переменных обычно совпадают с ключами. Через двоеточие можно выбрать другое имя, а через знак равенства — запасное значение.

const user = { name: 'Ирина', role: 'editor' };
const { name, role: userRole, city = 'Москва' } = user;

Массивы

В массиве важна позиция. Ненужный элемент пропускается пустым местом, а остаток собирается оператором rest.

const colors = ['red', 'green', 'blue'];
const [first, , third] = colors;
const [main, ...others] = colors;

Параметры функции

Функция может сразу достать нужные поля аргумента. Значение по умолчанию для всего объекта защищает вызов без параметров.

function greet({ name, greeting = 'Привет' } = {}) {
  return `${greeting}, ${name ?? 'гость'}!`;
}

Частые ошибки

Практика

Создай объект статьи с title, author и tags. Достань title, переименуй author в authorName и получи первый тег из массива.

Связанные темы

Объекты · Массивы · Spread и rest

Ещё в разделе JavaScript