Optional Parameters In JavaScript

Introduction

These days JavaScript is a very powerful programming language in Web Applications. Optional Parameter is a great feature in a programming language. It helps programmers to pass less no. of parameters to a function and assign a default value. For instance, a function "getEmployee(var id, var name)" takes two parameters, id and name.

However, we will pass only one param as id. Now we try to access the name variable inside the function; it throws us an exception that it is undefined. To avoid the 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 this,

Using undefined property

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

Let's analyze 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 is called two times: firstly, it passes correct two parameters (blogURL, type) to function, but in the second scenario, it passes only one Parameter (blogURL). For the first scenario, everything will work fine. However, for the second scenario, we are passing only one param, so the function will consider it the first value of the Parameter. The function checks blogType variable is undefined or not. In this scenario type value will be" DefaultType".

Using arguments variable

JavaScript functions have built-in objects called arguments. It is nothing but contains an array of parameters when the function is invoked. You can loop over the 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 parametersfor (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"

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

Using OR (||) operator

The short-circuit OR operator || returns the left side of 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 analyze 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"

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

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

Conclusion

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

I hope it helps.!