In the function section, we mentioned that parameters of a function are basically the local variables of that function.
We also know that when declaring a variable, by default its value is set to undefined. This is true for parameters as well.
When creating a parameter for a function, by default its value is set to undefined. So until we call that function and assign arguments to be stored into those parameters, they have the value undefined.
Note: a function that has parameters can be called without assigning a value to its parameters (calling the function with no arguments). In situation like this, those parameters will have their undefined value.
But JavaScript came up with a new technique which is called default parameter and this allows developers to set a default value for parameters of a function.
This means the parameters of a function will have a default value that is not undefined. Now if we call a function that has default value for its parameter and also don’t set any argument for that function when calling it, the parameters will have their default values to be used in the body of that function.
Example:
<!DOCTYPE html>
<html>
<head>
<title>JS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h3>Output:</h3>
<p id = "link"></p>
<script>
function funcOne(name = "John", lastName = "Doe"){
console.log(`Hello ${name} ${lastName}`);
}
funcOne();
funcOne("Omid");
funcOne(undefined, "Dehghan");
</script>
</body>
</html>Output:
Hello John Doe
Hello Omid Doe
Hello John Dehghan
Take a look at the signature of the funcOne function:
function funcOne(name = "John", lastName = "Doe")It has two parameters and each one of them has a default value.
Basically when we want to set a default value for a parameter, we use the assignment operator = and set the default value for that parameter.
Now let’s see the first call to this function:
funcOne();Here we didn’t set any argument to the function. So the default values that are set for the function will be used for the parameters.
Now when the execution engine ran the body of this function, those default values are sent to the browser’s console.
For this reason the first output we’ve got was: John Doe
Now let’s see the second call to this function:
funcOne("Omid");Here we set only one argument for the function. This means only the first parameter of the function will reassign its current value and so the name parameter will hold the value Omid. But the second parameter still holds its default value because we didn’t assign any new value for that second parameter when called the function.
For this reason when the execution engine ran the body of the function for the second time, we’ve got the message: Omid Doe on the browser’s console.
The last time we’ve called this function was like this:
funcOne(undefined, "Dehghan");Here the first argument is set to undefined. In JavaScript if we set the argument of a function to undefined just like the way we did here, the execution engine will use the default value (whatever that might be) instead of using the undefined. For this reason the value of the first parameter name is still set to John. The second argument in this call is set to Dehghan. So because this argument is a valid value, the second parameter of the function is reassigned to this new value.
Now after the body of this function ran for the third time, we got the message: John Dehghan on the browser’s console.
Example:
<!DOCTYPE html>
<html>
<head>
<title>JS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h3>Output:</h3>
<p id = "link"></p>
<script>
function funcOne(name = "John", lastName = name){
console.log(`Hello ${name} ${lastName}`);
}
funcOne();
funcOne("Omid");
funcOne(undefined, "Dehghan");
</script>
</body>
</html>Output:
Hello John John
Hello Omid Omid
Hello John Dehghan
Let’s take a look at the signature of the funcOne() function:
function funcOne(name = "John", lastName = name)Here the first parameter is name and its default value is John. The second parameter is lastName and its default value is the value that is set for the name parameter. This means the lastName parameter also has the value John as its default value.
So if we call this function without any arguments for the first and the second parameters, the output that we will get from the function will be: John John.
Now if we call the function with only one argument for the first parameter but nothing for the second one like funcOne("Omid"); we will get the message: Omid Omid.
This is because the second parameter of the function uses the value that is stored in the first parameter. So here the first parameter has the value Omid and so the second one use that as well.
But if we call the function like funcOne(undefined, "Dehghan");:
The first parameter will resolve to its default value which is John. The second parameter however will use the argument Dehghan and store it as its value (It won’t use the default value of the name parameter anymore).
For this reason, calling the function in this way will output: John Dehghan.