Spread и Rest

Цель урока

В этом уроке ты научишься:

Использовать spread для расширения
Использовать rest для сбора
Понимать разницу между ними

Spread-оператор (...)

Spread "разворачивает" массив или объект на отдельные элементы.

Копирование массива

let original = [1, 2, 3];
let copy = [...original];

copy.push(4);

console.log(original); // [1, 2, 3]
console.log(copy);     // [1, 2, 3, 4]

Объединение массивов

let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = [5, 6];

let combined = [...arr1, ...arr2, ...arr3];
console.log(combined); // [1, 2, 3, 4, 5, 6]

// С дополнительными элементами
let extended = [0, ...arr1, 2.5, ...arr2];
console.log(extended); // [0, 1, 2, 2.5, 3, 4]

Копирование объекта

let user = { name: "Иван", age: 25 };
let copy = { ...user };

copy.age = 30;

console.log(user); // { name: "Иван", age: 25 }
console.log(copy); // { name: "Иван", age: 30 }

Объединение объектов

let defaults = { theme: "light", lang: "ru" };
let settings = { theme: "dark", fontSize: 14 };

let merged = { ...defaults, ...settings };
console.log(merged);
// { theme: "dark", lang: "ru", fontSize: 14 }

Порядок важен

При одинаковых ключах побеждает последнее значение.

Передача в функцию

let numbers = [5, 2, 9, 1, 7];

console.log(Math.max(...numbers)); // 9
console.log(Math.min(...numbers)); // 1

// Вместо apply
console.log(Math.max.apply(null, numbers)); // старый способ

Строка в массив

let str = "Hello";
let chars = [...str];

console.log(chars); // ["H", "e", "l", "l", "o"]

Rest-оператор (...)

Rest "собирает" оставшиеся элементы в массив или объект.

В параметрах функции

function sum(...numbers) {
  return numbers.reduce((acc, n) => acc + n, 0);
}

console.log(sum(1, 2, 3));     // 6
console.log(sum(1, 2, 3, 4, 5)); // 15

Комбинация с обычными параметрами

function greet(greeting, ...names) {
  for (let name of names) {
    console.log(`${greeting}, ${name}!`);
  }
}

greet("Привет", "Иван", "Мария", "Пётр");
// Привет, Иван!
// Привет, Мария!
// Привет, Пётр!

В деструктуризации массива

let [first, second, ...rest] = [1, 2, 3, 4, 5];

console.log(first);  // 1
console.log(second); // 2
console.log(rest);   // [3, 4, 5]

В деструктуризации объекта

let user = {
  name: "Иван",
  age: 25,
  city: "Москва",
  country: "Россия"
};

let { name, ...details } = user;

console.log(name);    // "Иван"
console.log(details); // { age: 25, city: "Москва", country: "Россия" }

Spread vs Rest

Контекст	Spread	Rest
Назначение	Разворачивает	Собирает
Где	Вызов функции, литералы	Параметры, деструктуризация
Пример	`fn(...arr)`	`function fn(...args)`

// Spread — разворачиваем массив
let arr = [1, 2, 3];
console.log(...arr); // 1 2 3

// Rest — собираем в массив
function fn(...args) {
  console.log(args); // [1, 2, 3]
}
fn(1, 2, 3);