Mire használják a spread és rest operátorokat JavaScriptben?

A spread (...) operátor arra szolgál, hogy iterálható objektumokat (például tömböket vagy sztringeket) "kiterjesszen" olyan helyeken, ahol nulla vagy több argumentumot (függvényhíváskor) vagy elemet (tömbök létrehozásakor) várnak. Emellett arra is használják, hogy objektumok tulajdonságait egy új objektumba egyesítsék.

// Spread használata függvényhívásban
const numbers = [1, 2, 3];
console.log(...numbers); // 1 2 3

// Tömbök összefűzése spread segítségével
const arr1 = [1, 2];
const arr2 = [3, 4];
const combinedArr = [...arr1, ...arr2]; // [1, 2, 3, 4]

// Objektumok összefűzése spread segítségével
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObj = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

A rest (...) operátor a függvény paraméter szintaxisában használatos, hogy az összes hátramaradt argumentumot tömbbe gyűjtse. Ez lehetővé teszi, hogy a függvény tetszőleges számú argumentumot fogadjon. Emellett a tömbök vagy objektumok destrukturálásakor is alkalmazzák, hogy a hátramaradt elemeket vagy tulajdonságokat összegyűjtsék.

// Rest használata függvény paramétereiben
function sum(...args) {
  // args most egy [1, 2, 3] tömb
  return args.reduce((total, current) => total + current, 0);
}
console.log(sum(1, 2, 3)); // 6

// Rest használata tömb destrukturálásakor
const [first, second, ...restOfArray] = [1, 2, 3, 4, 5];
// first = 1, second = 2, restOfArray = [3, 4, 5]

// Rest használata objektum destrukturálásakor
const { a, b, ...restOfObject } = { a: 1, b: 2, c: 3, d: 4 };
// a = 1, b = 2, restOfObject = { c: 3, d: 4 }

Fő különbség:

• A spread "kiterjeszti" az elemeket vagy tulajdonságokat.
• A rest "összegyűjti" az elemeket vagy tulajdonságokat egy tömbbe vagy objektumba.