Default & rest parameters

Five tools for function inputs

A parameter is a name in the brackets of a function, like customer in function showOrder(customer). An argument is the value you pass in when you call the function, like "Asha". You met both in Declaring & calling functions. This lesson shows five tools that make function inputs easier to work with.

JavaScript doesn't check how many arguments you pass. A missing argument becomes undefined. An extra argument is ignored, unless the function asks for it. The five tools let a function say clearly what it wants:

• Default parameters give a parameter a value to use when its argument is missing.
• Rest parameters collect any number of arguments into one array. An array is a list of values in square brackets, like [1, 2, 3].
• Spread in a call does the opposite. It takes the values out of an array and passes them as separate arguments.
• The arguments object is an older way to see every argument that was passed.
• An options object passes many settings as one object, each with a name. It lets one function be called in several ways.

function showOrder(customer, drink) {
  console.log(customer, drink);
}
showOrder("Asha", "tea");
showOrder("Asha");
showOrder("Asha", "tea", "cake");

Line 1 makes a function with two parameters, customer and drink. Line 2 prints both. Line 4 passes two arguments, so customer is "Asha" and drink is "tea". It prints Asha tea.

Line 5 passes only one argument, so drink is undefined. It prints Asha undefined. Line 6 passes three arguments. The function has no third parameter, so "cake" is ignored. It prints Asha tea.

Keep one rule in mind for this lesson: a default is used only when an argument is missing. It is not used for every value that looks empty, like 0 or "". This is different from ||, which you may have seen used for fallback values. || replaces any falsy value: a value that counts as false in an if.

To give a parameter a default, write = value after its name, inside the function's brackets. It means: "If the caller doesn't give me this value, use this one."

function greet(name = "friend") {
  return "Hello, " + name;
}

greet();        // "Hello, friend"
greet("Ada");  // "Hello, Ada"

Line 1 gives name the default "friend". Line 5 calls greet() with no argument, so name is "friend". Line 6 passes "Ada", so the default is not used.

Which values use the default, exactly? Step through this run. You can change the call on line 5. Watch null and 0 closely: they do not use the default.

1function greet(name = "friend") {2  const message = "Hello, " + name;3  console.log(message);4}5greet();Run

A default can use a parameter that comes before it. JavaScript fills parameters from left to right, so the earlier one already has its value. This helps when two values are often the same:

function box(width, height = width) {
  return width + " × " + height;
}

box(5);     // "5 × 5"
box(5, 2);  // "5 × 2"

Line 1 says: if height is missing, use width. Line 5 passes only 5, so it returns "5 × 5". Line 6 passes both values, so it returns "5 × 2".

Be careful with order. Look at function label(prefix = "Item", text). The call label("Save") puts "Save" into prefix, the first parameter, not into text. So text is undefined. Put the parameters the caller must give first, and the ones with defaults after them. If there are many optional values, use an options object. You'll see one later in this lesson.

JavaScript works out a default's value each time a call needs it. It does not work it out once, when the function is made. So Date.now() as a default would give the current time for each call. And [] as a default makes a new, empty array for each call.

1function remember(item, list = []) {2  list.push(item);3  console.log(list.join(","));4}5remember("tea");Run6remember("cake");

Lines 5 and 6 each call remember with no list. Each call gets its own new array. So the second call prints cake, not tea,cake. Some other languages make a default array only once and share it between calls. JavaScript doesn't.

function update(name, user) {
  name = "Mina";
  user.name = "Mina";
}
const name = "Asha";
const user = { name: "Asha" };
update(name, user);
console.log(name);
console.log(user.name);

Line 7 calls update with a string and an object. The parameter name gets its own copy of the string "Asha". Line 2 changes only that copy, so line 8 still prints Asha.

The parameter user points to the same object as the outer user. Line 3 changes that object's name property, so line 9 prints Mina.

Sometimes a function should take any number of values: no scores, three tags, or five names. A rest parameter does this. Write three dots before the last parameter's name, like ...numbers. Every argument that is left over goes into an array with that name.

1function sum(...numbers) {2  let total = 0;3  for (const number of numbers) {4    total = total + number;5  }6  return total;7}

Pick a few calls above. Each time, numbers is a real array, even when it is empty.

A rest parameter must be the last parameter. It takes every argument that is left. If another parameter came after it, no argument would be left for that one.

function log(level, ...messages) { // OK: rest is last
  return messages.length;
}

function bad(...items, last) { // SyntaxError: rest is not last
  return last;
}

Line 1 is fine: level takes the first argument, and messages takes the rest. Line 5 puts last after the rest parameter. JavaScript refuses to run this code and throws a SyntaxError. A syntax error means the code is not written in a form JavaScript accepts.

A rest parameter is a real array, so you can loop over it with the for...of loop from earlier. Arrays get their own lessons in Stage 3. For now, you only need to know that a rest array has:

• a length, which says how many values it holds,
• numbered positions starting at 0, like numbers[0],
• array methods, like .join and .map.

Before rest parameters existed, functions used the arguments object. JavaScript makes it for you inside every function written with the function keyword. It holds every argument that was passed. You'll see it in older code. In new code, use a rest parameter instead.

1function inspect() {2  console.log(arguments.length);3  console.log(arguments[0]);4  console.log(Array.from(arguments).join(" | "));5}6inspect("Ada", "Grace", "Lin");Run

Line 2 prints how many arguments there are: 3. Line 3 reads the first one, "Ada", at position 0. Line 4 turns arguments into a real array with Array.from, then joins the names into one string.

function broken() {
  return arguments.map((value) => value);
}
broken(1, 2, 3);

Line 2 throws a TypeError. The arguments object is array-like: it has numbered positions and a length, like an array. But it doesn't have array methods such as .map.

To fix it, turn it into an array first with Array.from(arguments). Or better, write function broken(...values) and use values.map.

The same three dots do the opposite job inside a function call. Rest collects many arguments into one array. Spread takes one array and passes each of its values as a separate argument. Spread works on arrays, and on other values you can loop over with for...of, like strings.

const scores = [18, 7, 21];
console.log(Math.max(...scores));
console.log(Math.max(10, ...scores, 30));

Line 1 makes an array of three scores. Math.max is a built-in function that returns the biggest of its arguments. It wants separate numbers, not one array.

Line 2 spreads the array, so it works like Math.max(18, 7, 21) and prints 21. Line 3 mixes normal arguments with spread. It works like Math.max(10, 18, 7, 21, 30) and prints 30.

Rest and spread both use three dots, so they are easy to mix up. Each row of the table below asks one question and answers it for rest and for spread.

One function, many ways to call it

In some languages, you can write several functions with the same name but different parameters. The language picks one, based on what you pass. This is called overloading. JavaScript doesn't have it. If you write two functions with the same name, the second one replaces the first.

Instead, write one function that checks what it was given. For small cases, it can check:

• arguments.length: how many arguments came in,
• typeof: what type a value is, like "string",
• Array.isArray: whether a value is an array.

For real code, the most common way is an options object: one object argument with named settings, each with a default.

function createUser({ name = "Anonymous", role = "viewer" } = {}) {
  return name + " (" + role + ")";
}
console.log(createUser({ name: "Ada" }));
console.log(createUser({ name: "Grace", role: "admin" }));
console.log(createUser());

Line 1 has one parameter: an object in curly braces. The braces take the name and role properties out of that object and make them into variables. This is called destructuring. A later lesson covers it fully.

• name and role each have their own default.
• The = {} at the end gives the whole object a default. So createUser() with nothing passed doesn't throw.

Line 4 gives only a name, so role is "viewer". Line 5 gives both. Line 6 gives nothing, so both defaults are used, and it prints Anonymous (viewer).

function badge({ label = "New", count = 0 } = {}) {
  return label + ":" + count;
}
console.log(badge({ label: "Cart" }));
console.log(badge({ label: undefined, count: null }));

Line 4 leaves out count, so count uses its default, 0. It prints Cart:0.

Line 5 passes undefined for label, so label uses its default, "New". It passes null for count, and null is kept. It prints New:null.

Common mix-ups

Start by guessing what a short program prints. Then write small functions that use rest, spread, and an options object. Try each one first, then use the hints if you get stuck.

function label(value = "empty") {
  console.log(value);
}
label(undefined);
label(null);
label(0);

function average(...nums) {
  // return 0 when there are no numbers
}

function average(...nums) {
  if (nums.length === 0) return 0;
  let total = 0;
  for (const num of nums) {
    total += num;
  }
  return total / nums.length;
}
console.log(average());
console.log(average(2, 4, 6));

function listNames() {
  return Array.from(arguments).join(", ");
}

function listNames(...names) {
  return names.join(", ");
}
console.log(listNames("Ada", "Grace"));

const scores = [9, 4, 12];
// print the smallest score

const scores = [9, 4, 12];
console.log(Math.min(...scores));

function createUser(/* options */) {
  // name defaults to "Anonymous"
  // role defaults to "viewer"
}

function createUser({ name = "Anonymous", role = "viewer" } = {}) {
  return name + " (" + role + ")";
}
console.log(createUser({ name: "Ada" }));
console.log(createUser({ name: "Grace", role: "admin" }));
console.log(createUser());

Work out each answer from the code, not from memory. Every answer explains why it is right or wrong.

Key takeaways

• A default parameter is used only when its argument is missing or undefined.
• JavaScript works out a default during each call, so [] makes a new array for every call that needs it.
• A rest parameter collects the leftover arguments into a real array. It must be the last parameter.
• arguments is older and array-like, and arrow functions don't have their own. Use a rest parameter instead.
• Spread in a call takes the values out of an array and passes them as separate arguments.
• JavaScript has no overloading. Write one function that checks its inputs, or have it take an options object.

Up next: Function expressions & callbacks.