Spread и rest: три точки в двух ролях

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

Многие функции принимают отдельные аргументы, а данные у нас лежат в массиве. Math.max — классический пример: он ждёт числа через запятую и совершенно не понимает, что делать с массивом.

js

const nums = [7, 2, 9];
console.log(Math.max(...nums));
console.log(Math.max(nums));

Сначала предположите, что выведет код

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

js

function greet(a, b, c) {
  return `${a}-${b}-${c}`;
}
const parts = ["раз", "два"];
console.log(greet(...parts, "три"));

Сначала предположите, что выведет код

Внутри квадратных или фигурных скобок те же три точки высыпают содержимое в новый литерал. Самое частое применение — копия: получаем новый массив с теми же элементами, а оригинал остаётся нетронутым.

js

const base = [1, 2];
const copy = [...base];
copy.push(3);
console.log(base);
console.log(copy);

Сначала предположите, что выведет код

js

const a = [1, 2];
const b = [3];
console.log([...a, 0, ...b]);
console.log([..."абв"]);

Сначала предположите, что выведет код

С объектами работает так же, только копируются пары «ключ — значение». Если ключ встретился дважды, побеждает тот, что записан правее — отсюда удобный приём «настройки по умолчанию плюс пользовательские».

js

const defaults = { theme: "dark", lang: "ru" };
const user = { lang: "en" };
console.log({ ...defaults, ...user });

Сначала предположите, что выведет код

Spread копирует только верхний уровень. Вложенные массивы и объекты попадают в копию теми же ссылками, поэтому изменение «в глубине» видно и в оригинале.

js

const original = { name: "кот", tags: ["рыжий"] };
const copy = { ...original };
copy.tags.push("пушистый");
console.log(original.tags);

Сначала предположите, что выведет код

Если нужна полностью независимая копия со всеми уровнями, в современных браузерах есть structuredClone(original) — обе глубины копирования разобраны в статье «Копирование объектов: поверхностное и глубокое».

Те же три точки в списке параметров означают обратное действие: «всё, что передали сюда и дальше, сложи в массив». Такой параметр называется rest — остаточный.

js

function sum(...nums) {
  return nums.reduce((acc, n) => acc + n, 0);
}
console.log(sum(1, 2, 3));
console.log(sum());

Сначала предположите, что выведет код

Rest-параметр может стоять только последним, но до него разрешены обычные параметры — они разберут первые аргументы, а остальное достанется массиву.

js

function log(level, ...messages) {
  return `[${level}] ${messages.join(" ")}`;
}
console.log(log("INFO", "всё", "готово"));

Сначала предположите, что выведет код

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

js

function old(a, b) {
  return Array.isArray(arguments);
}
function modern(...args) {
  return Array.isArray(args);
}
console.log(old(1, 2));
console.log(modern(1, 2));

Сначала предположите, что выведет код

При разборе массива или объекта rest собирает всё, что не досталось названным переменным. Для массива это новый массив, для объекта — новый объект.

js

const [first, ...others] = [10, 20, 30, 40];
console.log(first);
console.log(others);

Сначала предположите, что выведет код

js

const user = { id: 1, name: "Аня", token: "secret" };
const { token, ...safe } = user;
console.log(safe);

Сначала предположите, что выведет код

Второй пример — типовой способ «выбросить» поле: мы не удаляем свойство из оригинала, а собираем новый объект без него. И здесь то же ограничение: const [...all, last] = arr — синтаксическая ошибка, ведь остаток не может закончиться раньше конца.

Символ один и тот же, поэтому запоминать нужно не его, а позицию. Значения читают — в вызове и в литерале — значит spread. Значения объявляют — в параметрах и слева от = — значит rest.

Где стоят три точки	Роль	Что происходит
Вызов: `f(...arr)`	spread	массив → отдельные аргументы
Литерал: `[...a]`, `{ ...o }`	spread	содержимое высыпается в новый литерал
Параметры: `function f(...args)`	rest	аргументы → один массив
Слева от `=`: `const [a, ...rest] =`	rest	остаток → новый массив или объект

js

function middle(first, ...rest) {
  return rest;
}
const arr = [1, 2, 3];
console.log(middle(...arr));

Сначала предположите, что выведет код

Три точки — не самостоятельный оператор: строка const x = ...arr не работает, потому что разворачивать не во что.

Три точки — не отдельный оператор: смысл им придаёт место, где они написаны.
Spread стоит в вызове функции или в литерале и разворачивает коллекцию: f(...arr), [...a, ...b], { ...defaults, ...user }.
Rest стоит в списке параметров или слева от = и, наоборот, собирает остаток в новый массив или объект; он всегда последний.
Копия через spread поверхностная — вложенные объекты остаются общими с оригиналом.
При слиянии объектов выигрывает свойство, записанное правее.

1/3Что выведет console.log(Math.max(...[3, 1, 2]))?

2/3const { a, ...rest } = { a: 1, b: 2, c: 3 }; что лежит в rest?

3/3Какая копия получится из const copy = { ...original }?

Среднее из любого числа аргументов

Напишите функцию avg, которая принимает сколько угодно чисел и возвращает их среднее арифметическое. Для вызова без аргументов верните 0, чтобы не получить деление на ноль.

js

function avg() {
  // ваш код
}
console.log(avg(2, 4, 6)); // 4
console.log(avg(10)); // 10
console.log(avg()); // 0

Сначала предположите, что выведет код

Rest-параметр даёт настоящий массив, поэтому сразу доступны reduce и length. Проверку на пустоту делаем до деления.

jsлистинг · не запускается

function avg(...nums) {
  if (nums.length === 0) return 0;
  return nums.reduce((acc, n) => acc + n, 0) / nums.length;
}
console.log(avg(2, 4, 6)); // 4
console.log(avg()); // 0

function avg(...nums) {
  if (nums.length === 0) return 0;
  return nums.reduce((acc, n) => acc + n, 0) / nums.length;
}
console.log(avg(2, 4, 6)); // 4
console.log(avg()); // 0

Если данные лежат в массиве, функция всё равно подходит — разверните его при вызове: avg(...[2, 4, 6]).

Скидка, не портящая оригинал

Функция withDiscount должна вернуть новый товар с уменьшенной ценой. Исходный объект менять нельзя — это частая причина трудных багов в приложениях.

js

const product = { name: "Кофе", price: 200 };
function withDiscount(item, percent) {
  // ваш код
}
console.log(withDiscount(product, 25)); // { name: "Кофе", price: 150 }
console.log(product.price); // 200

Сначала предположите, что выведет код

Копируем объект через spread и тут же перезаписываем нужное свойство: ключ, записанный после развёртывания, побеждает.

jsлистинг · не запускается

function withDiscount(item, percent) {
  return { ...item, price: item.price - (item.price * percent) / 100 };
}
console.log(withDiscount(product, 25)); // { name: "Кофе", price: 150 }
console.log(product.price); // 200

function withDiscount(item, percent) {
  return { ...item, price: item.price - (item.price * percent) / 100 };
}
console.log(withDiscount(product, 25)); // { name: "Кофе", price: 150 }
console.log(product.price); // 200

Порядок важен: если написать { price: ..., ...item }, старая цена из item затрёт новую.

Spread и rest: три точки в двух ролях

Видеоразбор темы за 5–7 минут

Spread при вызове функциимассив превращается в список аргументов

Spread в литералах: копия и слияниекопируем и склеиваем без циклов

Rest в параметрах: собрать хвостфункция принимает сколько угодно аргументов

Rest в деструктуризациизабираем первое, остальное в переменную

Как отличить одно от другогосмотрим не на точки, а на место

Итогошпаргалка по теме

Проверьте себятри быстрых вопроса

Задачидве задачи с решениями

Среднее из любого числа аргументов

Скидка, не портящая оригинал