Για ποιο λόγο χρησιμοποιούνται οι τελεστές spread και rest στη JavaScript;

Ο τελεστής spread (...) χρησιμοποιείται για την "επεκταση" επαναλαμβανόμενων αντικειμένων (όπως πίνακες ή συμβολοσειρές) σε σημεία όπου αναμένονται μηδέν ή περισσότερα επιχειρήματα (κατά την κλήση συναρτήσεων) ή στοιχεία (κατά τη δημιουργία πινάκων). Επίσης, χρησιμοποιείται για τη συνένωση ιδιοτήτων αντικειμένων σε ένα νέο αντικείμενο.

// Χρήση του spread στην κλήση μιας συνάρτησης
const numbers = [1, 2, 3];
console.log(...numbers); // 1 2 3

// Χρήση του spread για συνένωση πινάκων
const arr1 = [1, 2];
const arr2 = [3, 4];
const combinedArr = [...arr1, ...arr2]; // [1, 2, 3, 4]

// Χρήση του spread για συνένωση αντικειμένων
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObj = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

Ο τελεστής rest (...) χρησιμοποιείται στη σύνταξη των παραμέτρων της συνάρτησης για τη συλλογή όλων των υπόλοιπων επιχειρημάτων σε έναν πίνακα. Αυτό επιτρέπει στη συνάρτηση να λαμβάνει άγνωστο αριθμό επιχειρημάτων. Χρησιμοποιείται επίσης στην αποδόμηση πινάκων ή αντικειμένων για τη συλλογή των υπόλοιπων στοιχείων ή ιδιοτήτων.

// Χρήση του rest στις παραμέτρους της συνάρτησης
function sum(...args) {
  // args τώρα είναι ένας πίνακας [1, 2, 3]
  return args.reduce((total, current) => total + current, 0);
}
console.log(sum(1, 2, 3)); // 6

// Χρήση του rest στην αποδόμηση πίνακα
const [first, second, ...restOfArray] = [1, 2, 3, 4, 5];
// first = 1, second = 2, restOfArray = [3, 4, 5]

// Χρήση του rest στην αποδόμηση αντικειμένου
const { a, b, ...restOfObject } = { a: 1, b: 2, c: 3, d: 4 };
// a = 1, b = 2, restOfObject = { c: 3, d: 4 }

Βασική διαφορά:

• Το spread "επεκτείνει" στοιχεία ή ιδιότητες.
• Το rest "συλλέγει" στοιχεία ή ιδιότητες σε έναν πίνακα/αντικείμενο.