Rest Parameters

ES6+ Rest Parameters Overview

Rest parameters allow a function to accept an unlimited number of arguments as an array using the ... syntax. They replace older patterns such as the arguments object with a cleaner and more predictable approach.

Rest parameters are useful for utility functions, math helpers, logging wrappers, and any function that needs to work with a variable number of inputs.

Basic Rest Parameter Example

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

console.log(sum(1, 2, 3));
console.log(sum(10, 20, 30, 40));

The rest parameter ...numbers collects all passed arguments into a real array, making array methods such as reduce() easy to use.

How Rest Parameters Work

When a function is called, JavaScript assigns named parameters first. Any remaining arguments are gathered into the rest parameter array.

Rest with Regular Parameters

function introduce(
  greeting,
  ...names
) {
  return names.map(
    (name) => `${greeting}, ${name}!`
  );
}

console.log(
  introduce(
    "Hello",
    "Alex",
    "Sam",
    "Riya"
  )
);

Rest parameters can appear after normal parameters. In this example, greeting gets the first argument and names collects the rest.

Flexible Logging Function

function logMessage(
  level,
  ...messages
) {
  const output =
    messages.join(" | ");

  console.log(
    `[${level.toUpperCase()}] ${output}`
  );
}

logMessage(
  "info",
  "App started",
  "Port 3000"
);

logMessage(
  "error",
  "Failed to load user"
);

Rest parameters are ideal for functions that accept one required value plus any number of optional additional values.

Rest Parameters in Arrow Functions

const multiplyAll = (
  multiplier,
  ...values
) =>
  values.map(
    (value) => value * multiplier
  );

console.log(
  multiplyAll(2, 3, 4, 5)
);

Arrow functions also support rest parameters. This makes concise utility functions easier to write in modern JavaScript.

Rest in Destructuring

const scores = [95, 88, 76, 91, 84];

const [first, second, ...remaining] =
  scores;

console.log(first);
console.log(second);
console.log(remaining);

const user = {
  id: 1,
  name: "Alex",
  role: "admin",
  theme: "dark"
};

const { id, ...profile } = user;

console.log(id);
console.log(profile);

Rest syntax also appears in destructuring, where it collects the remaining array items or object properties into a new value.

Rest Parameters vs arguments Object

function oldSum() {
  let total = 0;

  for (let i = 0; i < arguments.length; i += 1) {
    total += arguments[i];
  }

  return total;
}

function newSum(...values) {
  return values.reduce(
    (total, value) => total + value,
    0
  );
}

console.log(oldSum(1, 2, 3));
console.log(newSum(1, 2, 3));

The arguments object is array-like but not a true array. Rest parameters give you a real array with all standard array methods.

Rest vs Spread Operator

// Rest: collects values

function collect(...items) {
  console.log(items);
}

collect(1, 2, 3);

// Spread: expands values

const nums = [4, 5, 6];
console.log([...nums]);

Rest and spread use the same ... syntax, but rest gathers values into an array while spread expands an array or iterable outward.

Function Wrapper Example

function withTimestamp(fn) {
  return function (...args) {
    console.log(
      `[${new Date().toISOString()}] Function called`
    );

    return fn(...args);
  };
}

const add = (a, b) => a + b;

const trackedAdd =
  withTimestamp(add);

console.log(
  trackedAdd(8, 12)
);

Rest parameters are commonly used in wrapper functions that need to forward any number of arguments to another function with spread.

Rest Parameter Rules

• A rest parameter must be the last parameter in the list.
• Only one rest parameter is allowed per function.
• Rest parameters create a real array, not an array-like object.
• If no extra arguments are passed, the rest array is empty.
• Rest parameters work in arrow functions and regular functions.
• Rest syntax in destructuring follows similar "remaining values" rules.

Common Rest Parameter Use Cases

• Functions that accept unlimited numeric inputs.
• Logging and debugging wrappers.
• Forwarding arguments in higher-order functions.
• Building utility helpers such as max() or merge().
• Collecting optional trailing arguments after required ones.
• Destructuring the remaining items from arrays and objects.

Rest Parameter Best Practices

• Use rest parameters instead of the arguments object in modern code.
• Give rest parameters clear names such as ...items or ...values.
• Place rest parameters last in the parameter list.
• Use rest with spread when forwarding arguments to another function.
• Validate or handle empty rest arrays when needed.
• Prefer rest for variable argument lists instead of manual indexing.
• Keep function signatures readable when mixing normal and rest parameters.

Common Rest Parameter Mistakes

• Placing a rest parameter before other parameters.
• Using more than one rest parameter in the same function.
• Confusing rest with spread syntax.
• Expecting rest parameters to work like optional positional arguments without defaults.
• Using the arguments object and rest parameters together unnecessarily.
• Forgetting that rest creates a new array on each function call.
• Assuming rest parameters exist outside function parameter lists.

Rest Parameters vs Default Parameters

Key Takeaways

• Rest parameters collect remaining function arguments into an array.
• Use the syntax ...parameterName as the last parameter.
• They replace many uses of the old arguments object.
• Rest gathers values, while spread expands values.
• They are ideal for flexible functions and argument forwarding.