Optional Parameters In JavaScript

Introduction

 

These days JavaScript is a very powerful programming language in Web Applications. Optional Parameters is a great feature in programming language. It helps programmers to pass less no. of parameters to a function and assign default value. For instance, there is a function “getEmployee(var id, var name)” takes two params id and name. However, we will pass only one param as id. Now we try to access name variable inside function it throws us exception that it is undefined. In order to avoid problem we need to implement Optional Parameters. In JavaScript it can be implemented in the following ways,

1. Using undefined property
2. Using arguments variable
3. Using OR(||) operator 

Let's discuss,

 

Using undefined property

 

Undefined property indicates that a value is not assigned to a variable. By using undefined we can handle Optional Parameters in JavaScript.

 

Let’s analyse the following example,

function browseBlog(blogURL, type) {

   if(blogURL === undefined)
   {
      blogURL = "DefaultURL";
   }

   if(type === undefined)
   {
      type = "DefaultType";
   }

   alert(blogURL);
   alert(blogType);
}

browseBlog("www.c-sharpcorner.com", "Microsoft");  // two alerts with "www.c-sharpcorner.com", "Microsoft"
browseBlog("www.c-sharpcorner.com");  // two alerts with "www.c-sharpcorner.com", "DefaultType"

In the preceding example browseBlog() method called two times: firstly, it pass correct two parameters (blogURL, type) to function but in second scenario it pass only one parameter (blogURL). For first scenario everything will work fine. However, for second scenario, we are passing only one param, so function will consider it the first value of parameter. The function checks blogType variable is undefined or not. In this scenario type value will be ”DefaultType”.

 

Using arguments variable

 

JavaScript functions has built-in object called arguments. It is nothing but contains array of parameters when function is invoked. You can loop over arguments object and find out all the parameters. Let’s see,

function browseBlog(blogURL, type) {
    if(arguments.length == 0) // Means no parameters are passed
    {
        blogURL = “DefaultURL”;
        Type = “DefaultBlog”;
    }

    if(arguments.length == 1) // Means second parameter is not passed
    {
        Type = “DefaultType”;
    }

    alert(blogURL);
    alert(blogType);

    // Get all parameters
    for (i = 0; i < arguments.length; i++) {
        alert(arguments[i]);
    }
}

browseBlog("www.c-sharpcorner.com", "Microsoft");  // alerts two times with value "www.c-sharpcorner.com", "Microsoft"
browseBlog("www.c-sharpcorner.com");  // alerts two times with value "www.c-sharpcorner.com", "DefaultType"

In preceding code browseBlog() function checks no. of parameters using arguments.length property. If its value is Zero (0), then no parameters are passed to function and if it is One(1) then only one parameter is passed i.e. logURL. Now browseBlog() function getting called two times: first one is passing two params and second one pass only one param. For first function invoked it works perfectly but for second one arguments.length value will be One (1) and it assigns default value(DefaultType) to Type variable.

 

Using OR (||) operator

 

The short-circuit OR operator || returns the left side if the left argument is true (evaluates to true in conditionals), otherwise it checks if the right argument is true and  returns it. We can use this shortcut operator to manage optional parameters in JavaScript. This method only allows the last arguments to be optional and you cannot make an optional first parameter, middle parameters are optional.

 

Let’s analyse the following example,

function browseBlog(blogURL, type) {
   alert(blogURL);
   var blogType = type || "Default";
   alert(blogType);
}

browseBlog("www.c-sharpcorner.com", "Microsoft");  // alerts two times with value "www.c-sharpcorner.com", "Microsoft"
browseBlog("www.c-sharpcorner.com");  // alerts two times with value "www.c-sharpcorner.com", "Default"

In the preceding example, it declares a function browseBlog(blogURL, type) with two params blogURL and type. Then it calls the method two times: first one passing two params and second one passing only one param. For first function call it displays alert as “www.c-sharpcorner.com” and “Microsoft”.

 

However in second function call it displays "www.c-sharpcorner.com" and “Default”. It means default value is assigned to blogType variable with the help of OR operator(||).

 

Conclusion

 

In this article we discussed 3 ways to pass optional parameters in JavaScript. You can use any one of them as per suitability.

 

Hope it helps.!