Default parameters

A coffee machine has buttons for the cup size. If you choose nothing, the machine does not stand waiting; it pours a medium cup, because it was set up that way in advance. Functions sometimes need such a factory setting too.

If a function is called without an argument, the parameter gets undefined. This happens when an argument is forgotten or is not needed in most calls. Let's see what comes out when a string is added to undefined:

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

console.log(greet("Ann")); // Hello, Ann
console.log(greet()); // Hello, undefined

Let's go line by line:

1. greet("Ann") puts "Ann" into name and returns Hello, Ann.
2. greet() calls the function without an argument, and name gets undefined.
3. The string is added to undefined, and the word undefined appears in the result: Hello, undefined.

A user must not see such a greeting. You need a fallback value for the case when there is no argument.

A default value

A fallback value can be set with a check inside the function: if (name === undefined) { name = "guest"; }. It is shorter to put = and a value right after the parameter's name. Such a parameter is called a default parameter: it gets that value when there is no argument.

function welcome(name = "guest") {
    return "Hello, " + name;
}

console.log(welcome()); // Hello, guest
console.log(welcome(undefined)); // Hello, guest
console.log(welcome("Ann")); // Hello, Ann

Let's walk through the three calls:

1. welcome(): there is no argument, and name gets "guest".
2. welcome(undefined): an undefined passed on purpose acts the same as a missing argument.
3. welcome("Ann"): there is an argument, and the default is not needed.

The default is visible in the function's first line, so it is clear at once which argument can be left out. It is like the label on a coffee machine button: "default: medium cup".

Here the picture stops working: a coffee machine has no "nothing chosen" button, but a function can be passed undefined on purpose. Such an argument switches the default on too.

A default from another parameter

The default value is computed on every call that needs it, not once in advance. That is why it can use a parameter that comes earlier: in function area(width, height = width), the call area(3) gives the parameter height the value 3. The call area(5) gives it 5.

The order of parameters

Parameters with defaults usually go last, so that they can be left out at the end of a call. Arguments fill the parameters from left to right, so only the last parameters are left without an argument.

To skip a parameter in the middle, undefined is passed in its place. For function box(width = 1, height = 1), the call box(undefined, 5) gives width the value 1 and height the value 5.

Only for undefined

The default applies only when the argument is undefined. Any other value is kept as it was passed, even a falsy one: 0, "", null or false. That is why limit(0) returns 0: zero is a valid count, and the function keeps it.

function limit(count = 10) {
    return count;
}

console.log(limit(), limit(0), limit(null), limit(false)); // 10 0 null false

Interviewers like to ask this: "How does a default parameter differ from || and ???" Each of the three replaces its own set of values:

• the || operator replaces any falsy value, so 0 || 10 gives 10;
• the ?? operator replaces null and undefined;
• a default parameter reacts to one value: undefined.

Common mistake

Expecting null to be replaced by the default value too:

console.log(welcome(null)); // ✗

The program prints Hello, null: null is a real argument, and the default does not apply. null is passed to say "no value" on purpose, and the function receives it as it is.

If null must be replaced too, drop the default and use ?? inside the function: return "Hello, " + (name ?? "guest");. Then both null and undefined are replaced with the string "guest".

Key points

• A default parameter is written as name = "guest" in the parameter list.
• The default applies only when the argument is undefined: left out or passed on purpose.
• 0, "", null and false are kept as they are, unlike a replacement with ||.
• To skip a parameter in the middle, undefined is passed in its place.