We continue with Flexiple's tutorial series to explain the code and concept behind common use cases. In today's article, let's take a dive into how Optional Parameters in JavaScript can be implemented and also understand where exactly using them would prove to be most useful.

Table of Contents

• What are Optional Parameters?
• How Optional Parameters work?
• Where is it most useful?
• Code
• Caveats & References

What are Optional Parameters?

By definition, an Optional Parameter is a handy feature that enables programmers to pass less number of parameters to a function and assign a default value.

Firstly, let us first understand what the word Optional Parameter means. Parameters are the names listed in the function definition. They are used to define a function and are also called formal parameters and formal arguments. In the following example, parameter1 and parameter2 are parameters of the 'exampleFunction' function.

function exampleFunction(parameter1, parameter2) {
  // code
}

In this context, Optional Parameters are those parameters that need not always be passed i.e. they're optional. The next obvious question would be "What value is passed when you don't pass a parameter?". So let's answer that in our next section.

Before moving ahead, if you find anything difficult , do checkout other Flexiple tech blogs where we cover various basic JS concepts and breaking them down so that they can be easily consumed.

How Optional Parameters work?

Usually, when you don't pass parameters, 'undefined' is passed instead. But using Optional Parameters, you can define a default value. So, whenever no value or undefined is passed, a default value is passed in its place.

Before we look at different ways to implement Optional Parameters in JavaScript, let's first see where we would need them.

Where is it most useful?

Optional parameters are great for simplifying code, and hiding advanced but not-often-used functionality. If majority of the time you are calling a function using the same values for some parameters, you should try making those parameters optional to avoid repetition.

For example, assume you are using a function to perform a google search. This function accepts the following parameters
Parameter 1: searchEngineURL
Parameter 2: searchString
Now, because you always use Google search engine, you could assign a default value to the Parameter1 as Google's URL and not always pass this URL and only pass searchString each time you call the function. Hence the searchEngineURL is the optional parameter.

Code

Default function parameters

In this method, you can initialize named parameters with default values whenever no value or undefined is passed.

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

console.log(add(1, 2));
// expected output: 3

console.log(add(1));
// expected output: 2

Using undefined property

Whenever no value or undefined is passed to a function, a conditional (IF) statement could be used to pass the default value instead if any of the parameters is undefined.

//optional parameters JavaScript-Using undefined property
function add(a, b) {
 if(a === undefined)
   {
      a = 1;
   }
 if(b === undefined)
   {
      b = 1;
   }
  return a + b;
}

console.log(add(1, 2));
// expected output: 3

console.log(add(1));
// expected output: 2

Using arguments variable

JavaScript functions have a built-in object called arguments. It contains an array of parameters. The length of this array gives the number of parameters passed. A conditional statement is used to check the number of parameters passed and pass default values in place of the undefined parameters.

//optional parameters Javascript-Using arguments variable
function add(a, b) {

    if(arguments.length == 0) // Means no parameters are passed
    {
      a = 1;
      b = 2;
    }

    if(arguments.length == 1) // Means second parameter is not passed
    {
      b = 2;
    }
    return a + b;
}
console.log(add(5,10));
// expected output: 15
console.log(add(5));
// expected output: 7

Using the Logical OR operator (‘||’)

In this method, the optional parameter is "Logically ORed" with the default value within the body of the function. In the example below, if the value of b is undefined, 2 is passed instead.

//optional parameters Javascript-Using the Logical OR operator (‘||’)
function add(a, b) {
   var b1 = b || 2;
   return a + b1;
}
add(5,10);
// expected output: 15
add(5);
// expected output: 7

Caveats & References

• Checkout MDN's JavaScript default parameters doc for more nuances & limitations
• ECMAScript 2015 allows default parameter values in the function declaration