Rest parameters in JavaScript

// Rest parameter collects all arguments into an array
function sum(...numbers: number[]): number {
  return numbers.reduce((total, num) => total + num, 0);
}

sum(1, 2, 3);       // 6
sum(10, 20);        // 30
sum();              // 0 (numbers is [])

// Rest parameter after named parameters — collects the "rest"
function log(level: string, ...messages: string[]): void {
  console.log(`[${level}]`, ...messages);
}

log('error', 'Connection failed', 'retrying in 5s');
// [error] Connection failed retrying in 5s

// The rest parameter is always a real Array
function example(...args: number[]) {
  console.log(Array.isArray(args)); // true
  args.map((n) => n * 2);          // Works — it's a real array
  args.filter((n) => n > 0);       // Works
  args.forEach((n) => console.log(n)); // Works
}

// ❌ Old way — arguments object (not a real array, no types)
function oldSum() {
  // arguments is array-like: { 0: 1, 1: 2, 2: 3, length: 3 }
  // Must convert to array to use array methods
  const args = Array.from(arguments);
  return args.reduce((total, num) => total + num, 0);
}

// ✅ Modern way — rest parameters (real array, typed)
function newSum(...numbers: number[]): number {
  // numbers is already a real Array — use methods directly
  return numbers.reduce((total, num) => total + num, 0);
}

// Arrow functions don't have 'arguments' at all
const multiply = (...factors: number[]) => {
  // 'arguments' would reference the outer function's arguments (or error)
  return factors.reduce((product, factor) => product * factor, 1);
};

// Rest in array destructuring — collect remaining elements
const [first, second, ...remaining] = [1, 2, 3, 4, 5];
// first = 1, second = 2, remaining = [3, 4, 5]

// Rest in object destructuring — collect remaining properties
const { id, name, ...metadata } = {
  id: 1,
  name: 'Alice',
  role: 'admin',
  createdAt: '2024-01-01',
};
// id = 1, name = 'Alice', metadata = { role: 'admin', createdAt: '2024-01-01' }

// Common React pattern — extract known props, forward the rest
type ButtonProps = {
  variant: 'primary' | 'secondary';
  size: 'sm' | 'md' | 'lg';
} & React.ButtonHTMLAttributes<HTMLButtonElement>;

function Button({ variant, size, ...htmlProps }: ButtonProps) {
  return (
    <button
      className={`btn-${variant} btn-${size}`}
      {...htmlProps} // Forward onClick, disabled, aria-label, etc.
    />
  );
}

// REST — collects into an array (in parameter position)
function logAll(...items: string[]) {  // REST: collects arguments
  console.log(items);
}

// SPREAD — expands an array (in argument position)
const fruits = ['apple', 'banana', 'cherry'];
logAll(...fruits);  // SPREAD: expands array into individual arguments

// REST in destructuring — collects remaining
const [head, ...tail] = [1, 2, 3, 4];  // REST: tail = [2, 3, 4]

// SPREAD in array literal — expands into new array
const extended = [0, ...tail, 5];  // SPREAD: [0, 2, 3, 4, 5]

// Quick rule:
// Collecting (left side of =, in params) → REST
// Expanding (right side of =, in calls)  → SPREAD