Spread operator, который выглядит следующим образом (...) — это инструмент в JavaScript, который позволяет “разворачивать” элементы массивов или свойства объектов.

Spread operator обозначается тремя точками (...). Его основная задача — “развернуть” элементы массива или свойства объекта, чтобы их можно было использовать в других контекстах. Например, он позволяет легко копировать массивы, объединять объекты, передавать элементы массива в функцию и многое другое.

Spread Operator очень часто используется с массивами. Разберем пример с клонированием массива. Эта возможность очень полезна когда нужно избежать изминений исходного массива

const arr = [1, 2, 3];
const arr2 = [...arr];

console.log(arr2); // [1, 2, 3]

Так же можно объеденять два массива в один

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

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

Можно добавить данные в уже существующий массив

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];

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

Не менее часто spread оператор используется при работе с объектами. Разберем немного простых примеров.

Как и при работе с массивами, объекты можно клонировать с помощью spread орератора.

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

console.log(obj2); // { a: 1, b: 2 }

Так же мы можем объеденить несколько объектов в один

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

console.log(mergedObject); // { a: 1, b: 3, c: 4 }

Spread оператор позволяет добавить свойства в уже существующий объект

const obj1 = { a: 1, b: 2 };
const newObject = { ...obj1, c: 3 };

console.log(newObject); // { a: 1, b: 2, c: 3 }

Можно использовать при работе со строками, небольшой пример

const str = "Elle";
const chars = [...str];

console.log(chars); // ['E', 'l', 'l', 'e']

Важно запомнить что spread оператор работает только со строками, объектами и массивами. Если попытаться использовать его при работе с числами, это вызовет ошибку.