The concept of a default refers to an option that is consistently accessible when no other alternatives are suitable. In the same vein, a default value represents a value that is perpetually present. In the realm of programming languages, nearly every language incorporates specified default values for their built-in functions or properties. This principle is equally applicable to JavaScript, which allows functions to possess their own default values.
In this segment, we will explore the concept of default parameters in JavaScript and examine several examples to grasp how default parameters are utilized. Additionally, it is essential for the reader to be familiar with the distinction between the terms parameter and argument, as these two terms refer to different concepts.
Arguments vs. Parameters
A common source of confusion for many individuals involves the distinction between two terms: parameters and arguments. To effectively discuss default parameters, it is essential to clarify these concepts first.
Function parameters refer to the variables specified in the function's definition, while function arguments denote the actual values that are submitted when the function is called. The values provided as arguments correspond to the parameters defined within the function. Essentially, the parameters are assigned the values of the supplied arguments. In all programming languages, these terms are understood to have identical meanings.
JavaScript Default Parameters
In cases where a value is not supplied during the function definition, a default value is assigned to that parameter, referred to as a default parameter. This feature enables named parameters to be initialized with a predetermined value when either an undefined value or no argument is provided.
Syntax
function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) {
statements
}
JavaScript Default Parameter Example
In JavaScript functions, it is common for parameters to have a default value of undefined. This indicates that if no other value is provided as an argument when the function is called, undefined will be used as the default parameter value.
While there are multiple methods to utilize default parameters, let’s examine an example to comprehend the functionality of default parameters and how to configure them within a function:
<html>
<body>
<script>
function sum(a=5, b=7)
{
return a+b;
}
console.log(" Sum of the numbers is : " + sum()); // there is no argument
console.log(" Sum of the number is : " + sum(3)); // it has one argument
console.log(" Sum is : " + sum(7,3)); // have both argument
</script>
</body>
</html>
The output of the above is shown below:
In the above example,
- We have created a function sum , where we have performed a simple addition of two values. It can be seen that we have initialized both parameters with two default values.
- Thus, when we have consle.log the invoking of function with no passing of values, the default values of both the parameters will get passed, and hence the default parameter comes into play.
- Next, we have invoked the function with only one value which means the second parameter has been supplied with a value, but the first parameter is still undefined, and hence the default value will be provided for the first parameter.
- For the last invoking of the function, we have passed two values for both the parameters, and so the default values will not be passed for any of the parameters because values are being supplied.
- As a result, you might now be able to understand the working and use of the default parameters.
Let’s explore additional examples to gain a deeper understanding of how default parameters function more effectively.
Few examples of JavaScript Default Parameters
Let’s explore additional examples to gain a clearer understanding of the concept:
Example 1: Passing undefined as the parameter
<html>
<body>
<script>
//passing 8 as default value
function example1(y = 8) {
console.log(y);
}
example1(undefined); //passing undefined 1
</script>
</body>
</html>
Output:
In this illustration,
- we have developed a function that includes a default value for its parameter. When invoking the function, we provided
undefinedas an argument. The resulting output demonstrates that the function utilizes the default value instead of the value supplied. - This indicates that regardless of whether the parameter is empty or set to undefined, the function will consistently revert to the default value in both scenarios.
Example 2: Passing null as the function parameter
Here is an example of code that demonstrates how using null as a parameter value can affect the outcome:
<html>
<body>
<script>
function example2(a = 5)
{
console.log(typeof a);
console.log("The value of a is: " + a);
}
example2(); // outputs number and The value of a is: 5
example2(undefined); // output gives as 1
example2(''); // outputs string and the value of a is:
example2(null); // outputs object and the value of a: null
</script>
</body>
</html>
Output:
In the above example code,
- We have created a function where we have provided a default value to the function's parameter, and in the calling of the function, we have invoked the function four times.
- In the first invocation of the function, we have called the function with no passing of the value, so it will console log out the default value only.
- In the second calling of the function, we have passed undefined as the parameter value, which means the function will console log the default value here also.
- In the third calling of the function, we have passed a (' '), which means it will console log the string value of the parameter.
- In the last function invocation, we have supplied null as its value which means it will consider the null value as its value and will console log the value of a as null only.
Thus, this indicates that when we supply either a null value or an empty string as the parameter, the default setting will be disregarded. If an empty string is provided, the resulting output will be an empty string; conversely, if null is provided, the output will be null, rather than the default value. Both null and empty strings are regarded as acceptable inputs for the function.
Here are two instances that could address the questions that arise regarding the potential outcomes when utilizing these values in the function call.
Evaluating default parameters at call time
Assessing the default parameters stands out as a significant aspect where we examine the evaluation of these parameters. It is essential to understand that default parameters in JavaScript are not reused; they are instantiated anew with each invocation of a function. This phenomenon is referred to as the evaluation of the default parameter occurring at the moment the function is called.
Let us examine the following example to gain a clearer understanding of the concept discussed:
<html>
<body>
<script>
function combine(value, array = []) {
array.push(value)
return array
}
console.log(combine(1)) // outputs [1]
console.log(combine(2)) // outputs [2], not [1, 2]
</script>
</body>
</html>
Output:
In the above example code,
- We can notice that the function is invoked two times.
- For the first time, we have passed 1 as its value, and so the output will be 1 in the array (only one element).
- In the second call of the function, we have used 2 as its new value. Thus, the new value will be [2] and not [1,2 ]. It is because the new created value is 2 and not 1.
In conclusion, this segment covered the topic of default parameters in JavaScript, aimed at aiding learners in solidifying their understanding of functions. Additionally, participants should now possess the ability to distinguish between arguments and parameters effectively.