JavaScript Default Parameters

Default parameters are an ES6 feature that allows you to assign default values to function parameters. These values are used when a function is called without providing an argument for a parameter or when the argument provided is undefined.

Default parameters make JavaScript functions more flexible and reduce the need to write extra conditional statements to handle missing arguments.

In this tutorial, you will learn how default function parameters work, how to use multiple default parameters, and how to avoid common mistakes.

What Are Default Parameters in JavaScript?

In JavaScript, a function can accept values through parameters. Normally, if an argument is not provided, the corresponding parameter receives the value undefined.

Default parameters allow you to specify a fallback value directly in the function definition.

Example Without Default Parameters

Consider the following function:

function greet(name) {
    console.log("Hello, " + name);
}

greet("Rahul");
greet();

Output:

Hello, Rahul
Hello, undefined

When you call greet() without an argument, the name parameter becomes undefined. As a result, the output is not what you might expect.

Example With Default Parameters

You can solve this problem by assigning a default value to the parameter.

function greet(name = "Guest") {
    console.log("Hello, " + name);
}

greet("Rahul");
greet();

Output:

Hello, Rahul
Hello, Guest

In this example, "Guest" is the default value of the name parameter. When an argument is not supplied, JavaScript uses the default value.

If an argument is supplied, JavaScript uses that value instead.

Default Function Parameters

Default function parameters let you define fallback values for individual parameters in a function.

The syntax is simple:

function functionName(parameter = defaultValue) {
    // Function body
}

Here, parameter represents the function parameter, and defaultValue is the value JavaScript uses when the argument is missing or explicitly passed as undefined.

Using a Default Parameter

Let’s create a function that displays a user’s name.

function displayName(name = "Unknown") {
    console.log("User name:", name);
}

displayName("Priya");
displayName();
displayName(undefined);

Output:

User name: Priya
User name: Unknown
User name: Unknown

The function behaves differently depending on the argument:

• displayName("Priya") uses "Priya".
• displayName() uses the default value "Unknown".
• displayName(undefined) also uses the default value "Unknown".

A default parameter is used when the argument is missing or undefined.

However, other values such as null, 0, false, and an empty string do not trigger the default parameter.

function showValue(value = 100) {
    console.log(value);
}

showValue();
showValue(undefined);
showValue(null);
showValue(0);
showValue(false);

Output:

100
100
null
0
false

This distinction is important when handling user input or data received from an API.

Multiple Default Parameters

JavaScript allows you to assign default values to multiple parameters in the same function. Each parameter can have its own default value.

Example of Multiple Default Parameters

function createUser(name = "Guest", age = 18, city = "Hyderabad") {
    console.log("Name:", name);
    console.log("Age:", age);
    console.log("City:", city);
}

createUser();

Output:

Name: Guest
Age: 18
City: Hyderabad

Because no arguments are provided, JavaScript uses the default value for each parameter.

You can also provide some arguments and allow the remaining parameters to use their defaults.

function createUser(name = "Guest", age = 18, city = "Hyderabad") {
    console.log(name, age, city);
}

createUser("Rahul");
createUser("Priya", 25);
createUser("Arun", 30, "Vijayawada");

Output:

Rahul 18 Hyderabad
Priya 25 Hyderabad
Arun 30 Vijayawada

In the first call, only the name is supplied. In the second call, the name and age are supplied. In the third call, all three arguments are provided.

JavaScript uses default values only for parameters whose corresponding arguments are missing or undefined.

Using Default Parameters in Calculations

Default parameters are useful when creating functions that perform calculations.

For example, consider a function that calculates the total price after adding tax.

function calculateTotal(price, tax = 0.10) {
    return price + (price * tax);
}

console.log(calculateTotal(1000));
console.log(calculateTotal(1000, 0.05));

Output:

1100
1050

In this example, the default tax rate is 0.10, which represents 10%.

When you call calculateTotal(1000), JavaScript uses the default tax rate. When you provide 0.05, the function uses the supplied 5% rate instead.

Default parameters are helpful when a function has a common value that users can override when needed.

Default Parameters with Arrow Functions

Default parameters also work with arrow functions. The syntax is almost identical to regular function declarations.

const greet = (name = "Guest") => {
    return `Hello, ${name}!`;
};

console.log(greet("Rahul"));
console.log(greet());

Output:

Hello, Rahul!
Hello, Guest!

You can also use multiple default parameters in an arrow function.

const calculateArea = (length = 10, width = 5) => {
    return length * width;
};

console.log(calculateArea());
console.log(calculateArea(8));
console.log(calculateArea(8, 4));

Output:

50
40
32

The function uses the default length and width when no arguments are supplied. When you provide one or both arguments, the supplied values are used wherever they are not undefined.

For a deeper understanding of function syntax, explore JavaScript Arrow Functions.

Default Parameters and Undefined

One important rule is that JavaScript uses a default parameter value when the corresponding argument is undefined, not whenever the argument is falsy.

Consider this example:

function showMessage(message = "Welcome!") {
    console.log(message);
}

showMessage();
showMessage(undefined);
showMessage(null);
showMessage("");

Output:

Welcome!
Welcome!
null

The final call prints an empty string, so the output appears blank on that line.

Here is what happens:

Argument	Value used
No argument	"Welcome!"
undefined	"Welcome!"
null	null
""	Empty string
0	0
false	false

If you want to use a fallback value for null, an empty string, or other falsy values, you may need a different approach, such as the nullish coalescing operator (??) or logical OR (||), depending on the behavior you want.

Default Parameters Can Use Earlier Parameters

A default parameter can use the value of a parameter that appears before it in the parameter list.

function calculateTotal(price, quantity = 1, total = price * quantity) {
    return total;
}

console.log(calculateTotal(100));
console.log(calculateTotal(100, 3));
console.log(calculateTotal(100, 3, 250));

Output:

100
300
250

In this example, quantity defaults to 1, and total defaults to the result of price * quantity.

The third argument overrides the calculated total when it is provided.

A default parameter cannot directly access a later parameter that is still uninitialized.

Common Mistakes with Default Parameters

Expecting Null to Trigger a Default Value

A default parameter does not replace null.

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

greet(null);

Output:

null

If you want null to trigger a fallback value, handle it explicitly.

Confusing Default Parameters with Falsy Values

Values such as 0, false, and "" are valid arguments and do not trigger a default parameter.

function setCount(count = 10) {
    console.log(count);
}

setCount(0);

Output:

0

The value 0 is used because it was explicitly provided.

Forgetting Argument Position

Function arguments are matched to parameters by position.

function displayUser(name = "Guest", city = "Hyderabad") {
    console.log(name, city);
}

displayUser(undefined, "Vijayawada");

Output:

Guest Vijayawada

Passing undefined for the first argument activates its default value, while the second argument is assigned to city.

Frequently Asked Questions

What are default parameters in JavaScript?

Default parameters let you assign fallback values to function parameters. JavaScript uses these values when the corresponding argument is missing or undefined.

Can a JavaScript function have multiple default parameters?

Yes. You can assign default values to as many parameters as needed.

function showDetails(name = "Guest", age = 18, city = "Hyderabad") {
    console.log(name, age, city);
}

Do default parameters work with arrow functions?

Yes. Both regular functions and arrow functions support default parameters.

Does null activate a default parameter?

No. Passing null explicitly uses null as the argument. Default parameters are activated when the argument is missing or undefined.

Can a default parameter depend on another parameter?

Yes. A parameter can use an earlier parameter in its default expression, provided that earlier parameter has been initialized.

Why are default parameters useful?

They make functions easier to use by providing fallback values, reducing repetitive checks, and allowing arguments to be optional.

Conclusion

Default parameters are a useful ES6 feature that makes JavaScript functions more flexible and readable. They allow you to define fallback values directly in the function declaration instead of checking for missing arguments manually.

You can use a single default parameter or multiple default parameters in regular functions and arrow functions. Remember that default values apply when an argument is missing or undefined, but not when it is null, 0, false, or an empty string.