JavaScript Default Parameters

The term default can be understood as an option that is always available when no other options are appropriate. Similarly, a default value is a value that will always be available. In terms of computer programming language, almost every programming language has one or the other specified default values for the in-built functions or properties. The same applies to JavaScript also where it enables the functions to have their default values.

In this section, we will learn about JavaScript default parameters and look at some examples to understand the default parameters' usage. Also, the prerequisite needed is one should know the difference between the terms parameter and argument as both these terms are different from one another.

Arguments vs. Parameters

Many people confuse both terms, and so before explaining default parameters, we should be clear about these terms. The parameters and arguments in a function are both different. Function parameters are the values that are passed in the definition of the function, whereas function arguments are the real values that are passed in the function. The argument values are the values that are passed in the function definition as parameter values. It means the parameters are initialized as the supplied arguments values. In every programming language, both terms have the same meaning only.

JavaScript Default Parameters

When no value is passed in the function definition, a default value is being set for the function definition, known as the default parameter. It allows the named parameters to get initialized with a default value when either undefined or no value is passed.

Syntax

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

JavaScript Default Parameter Example

Typically, in JavaScript functions, the parameter has undefined as its default value which means that it is the default value and will be supplied when no other value will be provided as the function parameter value.

Although there are various ways of using default parameters, let's see an example to understand how the default parameter works actually and how to set default parameter in a function:

<html>
<body>
<script>
function sum(a=5, b=7)
{
	return a+b;
}
console.log(" Sum of the numbers is : " + sum());   // there is no argument
console.log(" Sum of the number is : " + sum(3));   // it has one argument
console.log(" Sum is : " + sum(7,3));   // have both argument
</script>
</body>
</html>

Test it Now

The output of the above is shown below:

In the above example,

We have created a function sum (), where we have performed a simple addition of two values. It can be seen that we have initialized both parameters with two default values.
Thus, when we have consle.log the invoking of function with no passing of values, the default values of both the parameters will get passed, and hence the default parameter comes into play.
Next, we have invoked the function with only one value which means the second parameter has been supplied with a value, but the first parameter is still undefined, and hence the default value will be provided for the first parameter.
For the last invoking of the function, we have passed two values for both the parameters, and so the default values will not be passed for any of the parameters because values are being supplied.
As a result, you might now be able to understand the working and use of the default parameters.

Let's see some more examples to understand the working of the default parameters more efficiently.

Few examples of JavaScript Default Parameters

Let's see some more examples to better understand the concept:

Example 1: Passing undefined as the parameter

<html>
<body>
<script>
//passing 8 as default value
function example1(y = 8) {
  console.log(y);
}
example1(undefined); //passing undefined 1
</script>
</body>
</html>

Test it Now

Output:

In this example,

We have created a function where we have assigned a default value to the parameter, and at the time of function call, we have passed undefined, and in the output, you can see that instead of taking the passed value, the function takes the default value and use it.
It means that whether the parameter is an empty parameter or an undefined, in both cases, the value taken will be the default value only.

Example 2: Passing null as the function parameter

Below is an example code that will let you understand that if we use null as parameter value:

<html>
<body>
<script>
function example2(a = 5)
{
    console.log(typeof a);
    console.log("The value of a is: " + a);
}
example2();    // outputs number and The value of a is: 5
example2(undefined);    // output gives as 1
example2('');    // outputs string and the value of a is: 
example2(null);    // outputs object and the value of a: null
</script>
</body>
</html>

Test it Now

Output:

In the above example code,

We have created a function where we have provided a default value to the function's parameter, and in the calling of the function, we have invoked the function four times.
In the first invocation of the function, we have called the function with no passing of the value, so it will console log out the default value only.
In the second calling of the function, we have passed undefined as the parameter value, which means the function will console log the default value here also.
In the third calling of the function, we have passed a (' '), which means it will console log the string value of the parameter.
In the last function invocation, we have supplied null as its value which means it will consider the null value as its value and will console log the value of a as null only.

Hence, it clearly means that if we pass either an empty string or null as the parameter value, the default will not be considered, and if an empty string is passed, the output will be an empty string, and if null is passed, the output will be null and not the default value. Both null and empty strings are considered valid values for the function.

So these are two examples that may answer the queries if occurring that what if we use these values in the function call.

Evaluating default parameters at call time

Evaluation of the default parameters is one of its important features where we consider the evaluation of the default parameters. One should know that the JavaScript default parameters are never reused and are always created whenever a function call is made. It is known as the evaluation of the default parameter at the time of function call.

Let's look at the below example and try to better understand the concept explained:

<html>
<body>
<script>
function combine(value, array = []) {
    array.push(value)
    return array
}
console.log(combine(1))  // outputs [1]
console.log(combine(2))  // outputs [2], not [1, 2]
</script>
</body>
</html>

Test it Now

Output:

In the above example code,

We can notice that the function is invoked two times.
For the first time, we have passed 1 as its value, and so the output will be 1 in the array (only one element).
In the second call of the function, we have used 2 as its new value. Thus, the new value will be [2] and not [1,2 ]. It is because the new created value is 2 and not 1.

Finally, in this section, we discussed the JavaScript default parameters, which will help the learners to clear their concepts regarding functions. Also, one should now be able to differentiate in-between arguments and parameters.

Next TopicJavaScript Recursion in Real Life

← prev next →