Оператор ... spread

JavaScriptJunior~1 хв читання

Коли він використовується з масивом, він "розкриває" цей масив, тобто розкладає його елементи по місцях.

Приклад:

javascript

const arr = [1, 2, 3];
console.log(...arr); // 1 2 3

...arr розпаковує масив, перетворюючи його на послідовність значень. Без нього ти б отримав [1, 2, 3], а з ним - просто 1 2 3.

javascript

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

console.log(copy); // [1, 2, 3]
console.log(copy === numbers); // false (новий масив)

Так створюється поверхнева копія масиву.

javascript

const a = [1, 2];
const b = [3, 4];
const merged = [...a, ...b];

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

Можна вставляти і між іншими елементами:

javascript

const result = [0, ...a, 99, ...b];
console.log(result); // [0, 1, 2, 99, 3, 4]

javascript

const arr = [2, 3];
const newArr = [1, ...arr, 4];
console.log(newArr); // [1, 2, 3, 4]

javascript

const nums = [10, 20, 30];

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

console.log(sum(...nums)); // 60

...nums розкриває масив в аргументи функції.

javascript

const arr = [1, 2, 3];
const newArr = [...arr.slice(0, 1), 99, ...arr.slice(2)];
console.log(newArr); // [1, 99, 3]

Чудовий прийом для React та інших місць, де не можна мутувати дані.

javascript

const str = "hello";
const chars = [...str];
console.log(chars); // ["h", "e", "l", "l", "o"]

Spread працює з усіма ітерованими об'єктами - рядками, Set, Map, NodeList тощо.

Робить лише поверхневу копію (вкладені об'єкти копіюються за посиланням).
Працює тільки з ітерованими об'єктами (наприклад, не зі звичайними об'єктами, якщо не використовувати {...obj}).

Що робить	Розкриває (розпаковує) елементи масиву
Тип операції	"Розширення"
Повертає	Набір значень
Змінює вихідний масив	Ні
Підходить для	копіювання, об'єднання, передачі аргументів
Приклад	`[...arr] -> [1, 2, 3]`

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.