Зачем нужен spread оператор?

Spread оператор в JavaScript

Spread оператор (...) — это синтаксический инструмент, который позволяет развернуть элементы iterable (массивы, строки, объекты) на месте. Он один из самых полезных и часто используемых операторов в современном JavaScript.

Основные применения

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

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

copied.push(4);
console.log(original); // [1, 2, 3] — исходный не изменился
console.log(copy);     // [1, 2, 3, 4]

Bез spread оператора пришлось бы использовать Array.prototype.slice() или Array.from():

// Старый способ
const copy = original.slice();
const copy2 = Array.from(original);

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

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

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

// Можно вставлять элементы в нужные позиции
const withExtra = [...arr1, 'extra', ...arr2];
console.log(withExtra); // [1, 2, 'extra', 3, 4]

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

const user = { name: 'Alice', age: 30 };
const userCopy = { ...user };

userCopy.name = 'Bob';
console.log(user.name);     // 'Alice' — исходный не изменился
console.log(userCopy.name); // 'Bob'

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

const defaults = { theme: 'light', lang: 'en' };
const userSettings = { lang: 'ru', notifications: true };

const config = { ...defaults, ...userSettings };
console.log(config);
// { theme: 'light', lang: 'ru', notifications: true }
// Свойства userSettings перезаписали свойства defaults

5. Добавление/изменение свойств в объекте

const person = { name: 'Alice', age: 30 };

// Добавить новое свойство
const personWithEmail = { ...person, email: 'alice@example.com' };
console.log(personWithEmail);
// { name: 'Alice', age: 30, email: 'alice@example.com' }

// Изменить свойство
const olderPerson = { ...person, age: 31 };
console.log(olderPerson);
// { name: 'Alice', age: 31 }

6. Передача аргументов функции

function sum(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];
const result = sum(...numbers);
console.log(result); // 6

// Без spread пришлось бы:
const result2 = sum(numbers[0], numbers[1], numbers[2]);

7. Использование в React компонентах

// Spread для props
const buttonProps = { 
  type: 'button', 
  disabled: false,
  className: 'btn-primary'
};

function MyButton(props) {
  return <button {...props}>Click me</button>;
}

// Эквивалентно:
// <button type="button" disabled={false} className="btn-primary">Click me</button>

8. Rest параметры функции (обратное использование)

function logNumbers(...numbers) {
  console.log(numbers); // numbers — это массив всех аргументов
}

logNumbers(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

Практические примеры из реальной разработки

Фильтрация свойств в React:

function Card({ title, description, ...rest }) {
  // rest содержит все остальные props
  return (
    <div {...rest}>
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

// Использование
<Card 
  title="Hello" 
  description="World"
  className="card-primary"
  onClick={() => {}}
/>

Отправка данных на сервер:

const baseData = { userId: 123 };
const formData = { title: 'New Post', content: 'Some content' };

const payload = { ...baseData, ...formData };
// { userId: 123, title: 'New Post', content: 'Some content' }

fetch('/api/posts', {
  method: 'POST',
  body: JSON.stringify(payload)
});

Обновление состояния в Redux:

const state = { user: { name: 'Alice', age: 30 }, theme: 'light' };

// Обновление вложенного объекта
const newState = {
  ...state,
  user: { ...state.user, age: 31 }
};

Важные моменты

1. Поверхностное копирование — Spread копирует только первый уровень:

const nested = { a: { b: 1 } };
const copy = { ...nested };

copy.a.b = 2;
console.log(nested.a.b); // 2 — исходный объект ИЗМЕНИЛСЯ!

// Для глубокого копирования используй JSON или lodash
const deepCopy = JSON.parse(JSON.stringify(nested));

1. Порядок имеет значение:

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const result1 = { ...obj1, ...obj2 }; // { a: 1, b: 3, c: 4 }
const result2 = { ...obj2, ...obj1 }; // { b: 2, c: 4, a: 1 }
// Последний spread перезаписывает предыдущий!

1. Производительность — для больших массивов и объектов может быть медленнее, чем императивный код.

Spread оператор — это мощный инструмент для написания чистого, функционального и читаемого кода в JavaScript и React.