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

Аккуратно извлекай данные из объектов и массивов, а затем копируй и объединяй структуры с помощью оператора spread.

8 мин · 3 вопросов

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

const user = {
  id: 42,
  name: "Lea",
  address: { city: "Lyon", zip: "69001" }
};

const { name, address: { city } } = user;
const { role = "guest" } = user;

console.log(name, city, role); // "Lea" "Lyon" "guest"

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

const podium = ["gold", "silver", "bronze"];
const [first, , third] = podium;
console.log(first, third); // "gold" "bronze"

function formatUser({ name, role = "guest" }) {
  return `${name} (${role})`;
}

console.log(formatUser({ name: "Sam" }));
// "Sam (guest)"

У одного и того же оператора ... два лица. Как spread он разворачивает массив или объект, чтобы скопировать или объединить его: широко применяется, чтобы задать настройки по умолчанию и затем их переопределить. Как rest он собирает "всё оставшееся" в массив, например чтобы принимать переменное число аргументов.

const baseConfig = { theme: "dark", lang: "fr" };
const overrides = { lang: "en" };
const config = { ...baseConfig, ...overrides };
// { theme: "dark", lang: "en" }

const scores = [12, 18, 9];
const allScores = [...scores, 20]; // [12, 18, 9, 20]

function sumAll(...numbers) {
  return numbers.reduce((sum, n) => sum + n, 0);
}
console.log(sumAll(1, 2, 3)); // 6

Задача на подумать перед квизом: в { ...baseConfig, ...overrides } что произойдёт, если оба объекта задают lang? Побеждает тот, что написан последним. Именно эта деталь порядка и делает возможным паттерн "значения по умолчанию, затем переопределения".

Проверка знаний

Убедись, что запомнил ключевые моменты этого урока.

1. Что делает строка const { city } = user;?
   • Она создаёт переменную city со значением user.city
   • Она переименовывает объект user в city
   • Она создаёт новый пустой объект с именем city
2. В function log(...args) чем является args внутри функции?
   • Объектом ключ-значение
   • Настоящим массивом со всеми полученными аргументами
   • Строкой
   • Только первым аргументом
3. После const copy = { ...original }; дублируются ли вложенные объекты?
   • Да, копия полностью независима
   • Нет, они остаются общими: копия поверхностная
   • Они удаляются из копии