Spread (...) та Rest (...) оператори є потужними інструментами в JavaScript, які допомагають маніпулювати масивами та об’єктами. У цьому уроці ми розглянемо, як використовувати spread та rest оператори та надамо приклади їх застосування.

Spread оператор

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

Використання в масивах

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

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

Використання в об’єктах

const person = { name: "John", age: 30 };
const newPerson = { ...person, gender: "male" };

console.log(newPerson);
// { name: "John", age: 30, gender: "male" }

Важливо пам’ятати, що ключі в об’єкті мають унікальні імена. Тому якщо ви “розпиляєте” властивості одного об’єкта в інший і обидва об’єкти мають ключі з однаковим іменем то в результаті ви отриаєте те значення яке було вказано останнім.

const person = {name: 'John', age: 30};
const newPerson = {...person, gender: 'female', name: 'Alice'};

console.log(newPerson);
// { name: 'Alice', age: 30, gender: 'male' }

const person = {name: 'John', age: 30};
const newPerson = {
	gender: 'female',
	name: 'Alice',
	...person,
	age: 42
};

console.log(newPerson);
// { gender: 'female', name: 'John', age: 42 }

Rest оператор

Rest оператор дозволяє збирати залишкові аргументи в масив або об’єкт.

Використання в функціях

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

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

Використання в деструктуризації

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

Використання обох операторів разом

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

function add(...nums) {
  return nums.reduce((total, num) => total + num, 0);
}

console.log(add(...numbers)); // 6

Spread та Rest оператори розроблюють код більш зрозумілим, дозволяють легко об’єднувати або розділяти дані та покращують ефективність роботи з масивами та об’єктами.