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

Обычный способ достать данные из массива — обращаться по индексам: scores[0], scores[1]. Деструктуризация переворачивает запись: вы описываете слева ту же форму, что и справа, а движок раскладывает значения по местам.

const scores = [90, 75, 60];
const [gold, silver] = scores;
console.log(gold);
console.log(silver);

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

const row = ["ru", "Москва", "Казань", "Сочи"];
const [lang, , ...rest] = row;
console.log(lang);
console.log(rest);

Справа не обязан стоять массив — подойдёт любое перебираемое значение. Из строки "да" узор [a, b] достанет буквы: "д" и "а".

У объекта нет порядка — у него есть имена. Поэтому узор пишут в фигурных скобках, а переменные называют так же, как ключи.

const user = { name: "Аня", age: 25, city: "Пермь" };
const { city, name } = user;
console.log(name);
console.log(city);

Порядок внутри фигурных скобок не значит ничего: { city, name } и { name, city } работают одинаково. А вот отсутствующий ключ тихо превращается в undefined — это самый частый источник недоумения, когда данные пришли не в том виде, что ожидали.

const settings = { theme: "dark" };
const { theme, lang } = settings;
console.log(theme);
console.log(lang);

Чтобы пропущенный ключ не оборачивался undefined, значение по умолчанию пишут прямо в узоре через =. Работает это и для массивов, и для объектов.

const options = { title: "Меню" };
const { title, width = 200, tabs = [] } = options;
console.log(title);
console.log(width);
console.log(tabs.length);

Имя переменной не обязано совпадать с ключом. Двоеточие читается как «взять этот ключ и положить под этим именем»: слева ключ объекта, справа — ваша переменная. Умолчание дописывается в конец, после нового имени.

const row = { id: 7, nm: "Кофе" };
const { nm: productName, price: productPrice = 0 } = row;
console.log(productName);
console.log(productPrice);

const box = { width: 0, height: null, depth: undefined };
const { width = 50, height = 50, depth = 50 } = box;
console.log(width, height);
console.log(depth);

Узор повторяет форму данных на любой глубине: внутрь фигурных скобок вкладываются фигурные, внутрь квадратных — квадратные. Это особенно удобно с ответами API, где нужное поле лежит через три уровня.

const order = { id: 12, client: { name: "Лев", tags: ["vip", "new"] } };
const { client: { name, tags: [firstTag] } } = order;
console.log(name);
console.log(firstTag);

Важная деталь: переменной client в примере выше не появилось. Всё, что стоит слева от двоеточия, — только маршрут к данным; настоящими переменными становятся лишь имена на концах узора. Если нужен и объект целиком, и его поле, упомяните ключ дважды.

const order = { client: { name: "Лев", city: "Омск" } };
const { client, client: { name } } = order;
console.log(name);
console.log(client.city);

Самое частое применение деструктуризации — параметры функции. Когда аргументов много и половина необязательна, объект настроек читается лучше позиционного списка: на вызове видно, что означает каждое значение, и порядок больше не нужно помнить.

function makeButton({ text, size = "m", disabled = false }) {
  return `${text} / ${size} / ${disabled}`;
}
console.log(makeButton({ text: "ОК" }));
console.log(makeButton({ text: "Стоп", size: "l" }));

Одна ловушка: вызовите такую функцию совсем без аргументов — и разбирать будет нечего, получите ошибку «Cannot destructure property». Лечится умолчанием для всего параметра: = {} в конце.

function greet({ name = "гость" } = {}) {
  return `Привет, ${name}!`;
}
console.log(greet());
console.log(greet({ name: "Ира" }));

Раз слева стоит узор, а справа — обычное выражение, обмен двух переменных умещается в строку: справа собирается временный массив, слева он тут же разбирается обратно. Временная переменная tmp больше не нужна.

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a);
console.log(b);

Здесь стоит помнить про точку с запятой. Строка начинается с квадратной скобки, и если предыдущая строка её не закрыла, движок склеит две строки в обращение по индексу — получится загадочная ошибка. Заканчивайте предыдущую строку ; или начинайте эту с ;[a, b] = [b, a];.

let x = 0;
let y = 0;
({ x, y } = { x: 5, y: 9 });
console.log(x);
console.log(y);