Що робить оператор ...?

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

1. Spread-оператор (розповсюдження)

Spread використовується для розпакування (розкриття) масиву або об'єкта на окремі елементи.

Приклад з масивом

javascript

const numbers = [1, 2, 3];
const moreNumbers = [0, ...numbers, 4, 5];

console.log(moreNumbers); // [0, 1, 2, 3, 4, 5]

Тут ...numbers "розкрив" масив [1, 2, 3] всередину нового масиву.

Копіювання масивів

javascript

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

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

Це поверхнева копія (shallow copy).

Об'єднання масивів

javascript

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

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

У функціях - розкриття аргументів

javascript

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

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

...nums перетворює [1, 2, 3] -> sum(1, 2, 3)

Приклад з об'єктом

javascript

const user = { name: 'Alex', age: 25 };
const newUser = { ...user, city: 'Paris' };

console.log(newUser); // { name: 'Alex', age: 25, city: 'Paris' }

Розпакування властивостей з одного об'єкта в інший. Якщо ключі збігаються, пізніше значення перезапише раніше:

javascript

const merged = { a: 1, ...{ a: 2, b: 3 } };
console.log(merged); // { a: 2, b: 3 }

2. Rest-оператор (залишок)

Rest використовується для збирання елементів, що залишилися, у масив або об'єкт. Працює у зворотний бік - не розпаковує, а збирає.

У масивах:

javascript

const [first, ...rest] = [1, 2, 3, 4];

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

В об'єктах:

javascript

const user = { name: 'Alex', age: 25, city: 'Paris' };
const { name, ...info } = user;

console.log(name); // Alex
console.log(info); // { age: 25, city: 'Paris' }

У функціях:

javascript

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

console.log(sum(1, 2, 3, 4)); // 10

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

Spread vs Rest - різниця

Особливість	Spread	Rest
Що робить	Розпаковує	Збирає
Де використовується	При виклику функції, створенні масиву/об'єкта	В оголошенні функції або деструктуризації
Приклад	`[...arr]`, `{...obj}`, `fn(...args)`	`function fn(...args)`, `[a, ...rest]`

Приклади "до і після"

До ES6	З ES6
`arr1.concat(arr2)`	`[...arr1, ...arr2]`
`Object.assign({}, obj1, obj2)`	`{...obj1, ...obj2}`
`Array.prototype.slice.call(arguments)`	`(...args) => {}`

Важливо пам'ятати

Spread / Rest - поверхневі -> вкладені об'єкти або масиви копіюються за посиланням.

javascript

const obj = { nested: { a: 1 } };
const copy = { ...obj };
copy.nested.a = 2;
console.log(obj.nested.a); // 2

Spread не можна використовувати у правій частині присвоєння без контексту Неправильно: const ...rest = arr; - помилка Правильно: const [a, ...rest] = arr;

Підсумок

Контекст	Поведінка `...`	Приклад
Spread (розпакування)	Розгортає масив/об'єкт	`[...arr]`, `{...obj}`, `sum(...nums)`
Rest (залишок)	Збирає залишок елементів	`[a, ...rest]`, `function fn(...args)`

Коротка відповідь

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

Premium

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