Default and Rest Parameters

Functions in JavaScript are incredibly flexible. You don’t always have to pass the exact number of arguments that a function expects. Sometimes you want optional parameters with fallback values, and other times you want to accept an indefinite number of arguments.

JavaScript provides two powerful features for this: default parameters and rest parameters.

Default Parameters

Default function parameters allow named parameters to be initialized with default values if no value or undefined is passed.

function multiply(a, b = 1) {
  return a * b;
}
console.log(multiply(5, 2));
console.log(multiply(5));

10
5

When we omit the second argument, b takes the default value of 1.

Undefined vs Null

A common trap is assuming that any falsy value triggers a default parameter. This is not true! Only undefined triggers default parameters. Falsy values like false, 0, or null do not.

function greet(name = "Guest") {
  return name;
}
console.log(greet(undefined));
console.log(greet(null));

Guest
null

As you can see, passing null explicitly sets the value to null, overriding the default.

Referencing Previous Parameters

One unique feature of JavaScript’s default parameters is that parameters defined earlier (to the left) are available to later default parameters.

function greet(name, greeting = name) {
  return greeting;
}
console.log(greet("Alice"));

Alice

In this example, the greeting parameter defaults to the value of name if not explicitly provided!

Rest Parameters

The rest parameter syntax allows a function to accept an indefinite number of arguments as an array. This is extremely useful when you want to write a function that can take any number of inputs.

function sum(...args) {
  return args.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3));

6

By prefixing the parameter with three dots (...), JavaScript bundles all remaining arguments into a true array. Unlike the old arguments object, rest parameters are real arrays, which means you can use array methods like map, filter, and reduce.

Ordering Rules

There is one strict rule: the rest parameter must be the last parameter in the function definition.

try {
  new Function("function f(a, ...theArgs, b) { return theArgs; }");
} catch (e) {
  console.log(e.name + ": " + e.message);
}

SyntaxError: Rest parameter must be last formal parameter

Because it’s a syntax error, the code won’t even execute! You can only have one rest parameter, and it must sit at the very end of your parameter list.

function multiply(multiplier, ...theArgs) {
  return theArgs.map(element => multiplier * element);
}
console.log(multiply(2, 1, 2, 3).join(","));

2,4,6

Here, multiplier captures the first argument (2), and theArgs collects the rest ([1, 2, 3]).

Empty Rest Parameters

If there are no additional arguments, the rest parameter will be an empty array.

function getRest(...args) {
  return args.length;
}
console.log(getRest());

Step through the visualizer above to see how args is initialized as an empty array [] rather than undefined when no arguments are passed.

Visual Summary

Here is a conceptual look at how regular parameters, default parameters, and rest parameters fit together in a function signature: