The rest operator (…) and the spread operator (…) in JavaScript are written the same way but are used for two different purposes.

The rest operator is used to collect all remaining iterable elements into an array. This can be particularly useful in function signatures.

Example:

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
 
console.log(sum(1, 2, 3, 4, 5)); // Output: 15

Here, the …numbers argument takes all passed numbers and puts them into an array called numbers.

The spread operator is used to expand elements of an iterable (such as an array, object, or string) where zero or more arguments (for function calls), elements (for array literals), or key-value pairs (for object literals) are expected.

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // Output: [1, 2, 3, 4, 5]

Here, the …arr1 spreads out the elements of arr1, so they become individual elements in arr2.

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // Output: { a: 1, b: 2, c: 3 }

Here, the …obj1 spreads out the properties of obj1, so they become individual properties in obj2.