Easy JavaScript Part 3: What is a Default Parameter in a Function?

Dhananjay Kumar / Friday, August 4, 2017

A JavaScript function can have default parameters values. Using default function parameters, you can initialize formal parameters with default values. If you do not initialize a parameter with some value, then the default value of the parameter is undefined.

Before you learn about default parameters, check out Infragistics’ jQuery library, Ignite UI for JavaScript/HTML5 and ASP.NET MVC, which helps you write and run web applications faster. You can use the Ignite UI for JavaScript library to help quickly solve complex LOB requirements in HTML5, jQuery, Angular, React, or ASP.NET MVC. Download a free trial of Ignite UI today.

Let us consider the code listed below:

function foo(num1){
 
     console.log(num1);
 
 }
 foo();

While calling function foo, you are not passing any parameter, so the default value of variable num1 is set to undefined. However, sometimes you may want to set a default value other than undefined. In the past, the best strategy was to test for the parameter value undefined and then assign a value. So, let us say that in the above example, you want to set the default value of num1 to 9. You can do that as shown in the code listed below:

function foo(num1) {
 
     if (num1 === undefined) {
         num1 = 9;
     }
     console.log(num1);
 
 }
 foo();

ECMAScript 6 introduced default parameters for the function. Using the default parameters features of ECAMA 2015, you no longer have to check for an undefined parameter value. Now, you can put 9 as the default value in the parameter itself. You can rewrite the function above to use the default value as shown below:

function foo(num1 =9) {
     console.log(num1);
 
 }
 foo();

For function foo, if num1 parameter’s value is not passed, then JavaScript will set 9 as the default value of num1.

Checking for Undefined Parameters

Even if you explicitly pass undefined as the parameter value when calling the function, the parameter value will be set to the default value.

 function foo(num1 =9) {
     console.log(num1);
 
 }
 foo(undefined);

In the code above, you are passing undefined as the value of num1; therefore, the value of num1 will set to default value 9.

Default Value Evaluated at Run Time

The JavaScript function default value gets evaluated at run time. To understand this better, consider the code below:

 function foo(value = koo()) {
     return value;
 }
 
 function koo() {
      return "Ignite UI";
 }
 
 var a = foo();
 console.log(a);

In function foo, the default value for parameter value is set to function koo. When you call function foo at run time, function koo will be evaluated. You will get output as shown in below image on calling function foo.

Reusing Default Parameters

Default parameters are available to be used by later default parameters. Let us consider the code listed below:

function foo(num1 = 9, num2 = num1 + 8){
     console.log(num2);
 }
 foo();

In the code above, the default value of num1 is used to calculate the default value of num2. You will get the following output when calling function foo:

Conclusion

The JavaScript default parameter is very useful while writing a function. When calling the function, if a parameter is missing, the default parameter feature allows you to assign a default value to the function parameter, rather than leaving it undefined.

In the next post of this "Easy JavaScript" series, you will learn about arguments in JavaScript functions. Also, do not forget to check out Ignite UI for JavaScript/HTML5 and ASP.NET MVC, which you can use with HTML5, Angular, React, and ASP.NET MVC to create rich Internet applications. You can download a trial of all our JavaScript controls for free.