Default Parameters in JavaScript | Explained with Examples

Parameters define the requirements for invoking a function. Oftentimes, we invoke a function, but we miss incorporating some arguments that are necessary for the output, and the JavaScript function either gives us an error or returns a NaN value.

To avoid this undesirable outcome, we use default Parameters. Default parameters are the parameters that have defined their default values in case they are missing from the invoking function call.

We are going to look over an example where we get a non-satisfactory outcome due to missing arguments and then we will fix it using traditional and default parameters. But first, let’s learn a little more about the default parameters.

What are Default Parameters

In the ES6 version, JavaScript introduced a feature of setting up default parameters. When developing a full-stack application, we usually want to cover all of our ends that can return us any error. The issue of missing arguments in the invoking function call is one of such corners and the default parameter is the guard that we use to save us from unwanted outcomes.

Declaring default parameters is rather easy. When defining the parameter of the function simply put the default value after the “=” sign. The syntax is as:

function functionIdentifier (parameter = value) {

// Body of the function

} ;

For example:

functionprintName(firstName, lastName = `doe`) {
console.log(firstName + ` ` + lastName);
}

printName(`John`);

printName("John", "Who");

The output of both the commands is as:

For the first function call, it used the default value “doe” for the parameter “lastName” and for the second it used both the arguments.

How do Default Parameters work

Using the same function that we created in the above example, for the first case when both the arguments are present then the values inside the function call are used like so:

And for the second case, in which one of the arguments was missing, the function used the value that we defined as the default value within the parameter like:

Why use default Parameters

Typically when no argument is passed then the parameter is considered to be “undefined” by JavaScript. The traditional or trivial approach to avoid an unwanted output is to check the parameter for an undefined value. The trivial approach can be used with the following lines of code for a function to add 2 numbers:

functionaddNumbers(num1, num2) {
if (num1 === undefined) {
    num1 = 1;
  }
if (num2 === undefined) {
    num2 = 1;
  }

return num1 + num2;
}

console.log(addNumbers());

Even though we are not passing any arguments when calling the function inside the console.log() function, we won’t get any error.

In fact, the output is as:

As you can see we can handle the issue of missing arguments like this as well. However, being a good programmer is all about being efficient, and this trivial approach is not an efficient solution.

If we were to solve the same problem using the default parameters, the solution would be much more concise like:

function addNumbers(num1 = 1, num2 = 1) {

return num1 + num2;

}

console.log(addNumbers());

As you can see, instead of writing numerous lines, we did it in a single line and the output is exactly the same with no errors and no NaN.

Using default parameter value from an earlier parameter

In ES6, you can set a default parameter using the parameter before it. This is because the parameters are initialized from left to right. Resulting in the use of earlier defined parameters in the default value of later parameters.

For example, take the following snippet:

function getSome(a, b = a * 2) {

return a * b;

}

console.log(getSome(2));

The function getSome() will take 2 parameters, if there is only one argument then it will assign the second parameter twice the value of the first argument.

The output is as:

Since, the parameters are initialized from left to right, if we use a later parameter as the default value of an earlier parameter then it will result in an error.

Take the following code as an example:

function errorGen(a = b, b = 2) {

return a + b;

}

console.log(errorGen());

The above will meet an error since it’s trying to access the parameter “b” even before it is initialized.

The output is as:

Using functions as values in default parameters

In ES6, you can even use functions as the default parameter values. Try out the following lines of code:

function calc(a, b = getValue(a)) {

return a + b;

}

function getValue(num) {

return num * 2;

}

console.log(calc(2));

As you can see, we are giving the function getValue(num) as a default parameter for b and we are passing the parameter a inside it. The getValue(num) multiples the argument passed to it by 2 and returns the value. That is why, when we pass 2 inside calc() function as a single parameter we get the following out:

That’s it for default parameters in JavaScript.

Conclusion

In ES6, a new feature was introduced which was the default parameters. To avoid meeting an error because of missing arguments JavaScript added this feature. Default parameters are used to put a default value of an argument at the time of writing that function. We learned about default parameters, how we can use default parameters to avoid unfavorable results, and why we should use default parameters as a replacement to the traditional/trivial approach along with its examples.

from https://ift.tt/3IyjaaD