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

Деструктуризация — способ разложить массив или объект на отдельные переменные: const { name, age } = user. Spread (...) — разворачивает массив/объект: [...arr1, ...arr2]. Rest (...) — собирает остаток: const [first, ...rest] = arr.

Деструктуризация массивов: const [a, b, c] = [1, 2, 3]; // a = 1, b = 2, c = 3

Пропуск элементов: const [first, , third] = [1, 2, 3]; // first = 1, third = 3

Деструктуризация объектов: const { name, age } = { name: 'Анна', age: 25 }; // name = 'Анна', age = 25

С переименованием: const { name: userName } = { name: 'Анна' }; // userName = 'Анна'

С значением по умолчанию: const { name, age = 0 } = { name: 'Анна' }; // name = 'Анна', age = 0

Spread (...) — разворачивает: const arr1 = [1, 2]; const arr2 = [3, 4]; const merged = [...arr1, ...arr2]; // [1, 2, 3, 4]

const obj1 = { a: 1 }; const obj2 = { b: 2 }; const mergedObj = { ...obj1, ...obj2 }; // { a: 1, b: 2 }

Rest (...) — собирает остаток: const [first, ...rest] = [1, 2, 3, 4]; // first = 1, rest = [2, 3, 4]

const { name, ...rest } = { name: 'Анна', age: 25, city: 'Москва' }; // name = 'Анна', rest = { age: 25, city: 'Москва' }

Деструктуризация — как распаковка подарка: открываете коробку (массив/объект) и достаёте конкретные вещи (переменные). Spread — как высыпать содержимое коробки. Rest — как собрать всё, что не достали по отдельности.

**Самый простой:**

const [a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

Деструктуризация массива: разложили на две переменные.

**Простой:**

const user = { name: 'Анна', age: 25, city: 'Москва' };
const { name, age } = user;
console.log(name); // 'Анна'
console.log(age);  // 25

Деструктуризация объекта: извлекаем name и age, city игнорируется.

**Реальный пример:**

function createUser(name, options = {}) {
  const { age = 0, active = true } = options;
  return { name, age, active };
}

const user = createUser('Анна', { age: 25 });
console.log(user); // { name: 'Анна', age: 25, active: true }

Деструктуризация + значения по умолчанию — мощный паттерн для параметров функций.

**Неправильно:** Путать spread и rest

**Почему:** Spread разворачивает (...arr), rest собирает (...args). Символ один — смысл противоположный.

**Правильно:** Spread: const arr2 = [...arr1]. Rest: const [first, ...rest] = arr.

**Неправильно:** Забывать, что rest должен быть последним

**Почему:** const [a, ...rest, b] = [1,2,3,4]; — SyntaxError! Rest не может быть в середине.

**Правильно:** Rest должен быть последним элементом: const [a, ...rest] = arr.

**Неправильно:** Думать, что spread создаёт глубокую копию

**Почему:** Spread создаёт поверхностную копию. Вложенные объекты остаются ссылками.

**Правильно:** Для глубокой копии: structuredClone(obj) или JSON.parse(JSON.stringify(obj)).

• Деструктуризация извлекает значения в переменные
• Spread (...) разворачивает массив/объект
• Rest (...) собирает остаток
• Spread создаёт поверхностную копию
• Rest должен быть последним элементом

Назад: Вы знаете объекты и массивы (J11-J17) — теперь у вас есть мощный синтаксис для работы с ними.

Вперёд: Следующий урок (J19) — Date: работа с датами и временем в JavaScript.