JavaScript Default Parameters

In JavaScript, default function parameters are the parameters which are provided a default value while declaring JavaScript function. This is useful, as we can provide default values to the parameters, which can be used if a value is not provided when the function is called.

So default function parameters is used to initialize the named parameter with a default value if no value or undefined is passed during function call.

For example, if you define a function in which if you provide two variables, it divides the first parameter with the second parameter and returns the result of the division operator. Now if the user provides only one parameter, then the function call will fail. To avoid this, you can provide a defualt value to the second parameter as 1, which will divide the single parameter passed during function call with the default value 1, rather than giving an error.

By default, if a function parameter is not supplied with a value during function call, undefined is set in it.

JavaScript Default Parameters Syntax:

Following is the syntax for the default function parameters:

function function_name([param1[ = defaultValue1][, ..., paramN[ = defaultValueN ]]]) 
{
    statements
}

One important point to note here is that if you have multiple parameters in a function, let's say 2, and you provide a default value to the first one and leave the second parameter without a default value, then during the call, if that function is called with a single argument, it will get assigned to thre first parameter(the one with default parameter value) and the second will get undefined value, this is because, parameter assignment happens from left to right. So you should not have parameters without default value after default parameters.

For example,

function printValue(a=1, b) {
    console.log("a = " + a + " and b = " + b);
}

printValue();    // Logs: a = 1 and b = undefined
printValue(7);    // Logs: a = 7 and b = undefined
printValue(7, 3);    // Logs: a = 7 and b = 3

In the code above, when we provided no argument while calling the function then, a used its default value while b got undefined. Then, we provided one argument while calling the function, and that argument got assigned to the first parameter which is a, because argument assignment to parameters happens in order, hence b again got underfined.

So generally, we recommend to not provide default value to first parameter if you don't want to provide default values to other parameters as well, as that will make your code confusing.

JavaScript Default Parameters Example

In this example, we are setting default values for parameters and calling it without arguments.

// default function parameters

function add(a=10, b=20)
{
	return a+b;
}

console.log(" Sum is : " + add());   // No argument
console.log(" Sum is : " + add(1));   // with one argument
console.log(" Sum is : " + add(5,6));   // with both argument

Sum is : 30
Sum is : 21
Sum is : 11

JavaScript Default Parameters with null or empty Argument

If we do not provide any value for the function parameter then the default value is used, but what if someone provides null or an empty string as value. In that case null and empty value is considered valid and default parameter value is not used.

Let's take an example to see this:

function test(a = 1)
{
    console.log(typeof a);
    console.log("Value of a: " + a);
}

test();    // Logs: number Value of a: 1
test(undefined);    // Logs: number Value of a: 1

test('');    // Logs: string Value of a: 
test(null);    // Logs: object Value of a: null

As we can see in the example above, not providing any value for the parameter and providing undefined as value, both will lead to the function using the default parameter value, but when we provide an empty string as argument, or if we provide null as argument, then both are considered valid values and are used as parameter values rather than using the default values.

Default Parameters are evaluated at Call time

This is yet another important feature of default parameters to consider. The JavaScript default parameters are created every time the function is called and are not reused. Let's take an example to understand this:

function append(value, array = []) {
    array.push(value)
    return array
}

append(1)  // [1]
append(2)  // [2], not [1, 2]

JavaScript Default Parameter Live Example

Let's have another example to see the usage of default parameters in JavaScript functions:

So in this tutorial we learned the concept of default parameters. It is a useful concept and can help you make your functions better. In the next tutorial we will learn what are Rest parameters which is yet another important concept.