In this section, we will learn what the default and optional parameters are and how to use them in JavaScript.

What is JavaScript Optional or Default Parameters?

When you have a function with parameters, by default they have the value `undefined` assigned to them.

This means if you call these parameters in the body of the function, you’ll get the value `undefined` (of course, if no arguments were passed to these parameters when the function is called).

But in JavaScript, we can assign values to parameters when they’re being declared and basically change their default values to something other than `undefined`.

When a parameter initialized with a value other than `undefined` at its declaration time, it becomes a parameter with a default value.

This means if we call the function and didn’t pass any argument to these parameters with default values, then they will hold on their default values and in the body of the function if they’re invoked, we will get their default values instead.

How to Declare JavaScript Optional Parameters? (Default Parameters Syntax)

Parameters are nothing but local variables of functions. So in order to initialize them with a default value, we can simply use the assignment operator just like the way we used to assign a value to an ordinary variable in JavaScript.

So if you have a function like this:

function printName(name, lastName){…}

Then assigning default values to these parameters would be like:

function printName(name = “John”, lastName = “Doe”){…}

As you can see, we’ve treat these parameters as if they are ordinary variables and assigned them initial values.

Example: creating JavaScript optional parameters

function printName(name  ="John",lastName){
  document.querySelector(".output").innerText = `The name is: ${name} and the last name is: ${lastName}`;
}
printName("Jack");

The `printName()` function here has two parameters.

The first parameter is called `name` and it has a default value set to `John`. That means if we called this method and didn’t assign an argument, then the `name` parameter will have the value `John` as its default value.

The second parameter, however, does not have any default value except the `undefined`.

Now when we’ve called this function, we only passed the value “Jack” as the argument.

This argument will be assigned to the `name` parameter of the function (because this parameter sits first in the order of parameters) and replaces the default value of `John`.

So basically, the `name` parameter here has the value `Jack` and the `lastName` parameter still has the value `undefined`.

Using Other Parameters in Default Values

When you have multiple parameters set in a function, the first parameters could be used as the value for other parameters that come after in that function.

For example:

function printName (name, lastName = name){…}

Note that here the `lastName` parameter has the `name` parameter assigned to it as its initial value.

That means whatever the `name` parameter gets, should be used for the `lastName` parameter as well if this parameter didn’t get any argument when the function is being called.

Example: using other parameters in default values

function printName(name  ="John",lastName = name){
  document.querySelector(".output").innerText = `The name is: ${name} and the last name is: ${lastName}`;
}
printName("Jack");

Here the value “Jack” is passed as the argument for the `name` parameter. So now this parameter has the value “Jack” as its initial value.

But there’s no value for the `lastName` parameter, right? So then this parameter will take any argument that is passed to the `name` parameter for itself as well.

That’s why we got the value “Jack” for both `name` and `lastName` parameters.

Remember: default parameters will stick to their default values for as long as we don’t pass them an argument! But the moment we pass an argument for a parameter with a default value, that argument will replace the default value and in the body of the function we will work with the argument values instead of the default ones.

Example: using default parameters in JavaScript

function printName(name  ="John",lastName = name){
  document.querySelector(".output").innerText = `The name is: ${name} and the last name is: ${lastName}`;
}
printName(undefined, undefined);

The key point of this example is to remember that if we pass the value `undefined` as the argument of a function, the parameters with default values will stick to their initial values instead of the value `undefined`.

For this reason, we got the value “John” from the two parameters of the `printName()` function.