Optional parameters are those parameters whose value may or may not be provided as an argument during the function call. Their value is set to undefined when they are not provided as an argument.
It is different from a default parameter for which we need to provide a default value at the time of defining the function. This default value is used in case the argument for it is not provided.
In javascript, by default, if you don’t provide an argument for a parameter, its value will be set to undefined.
In the below example, the logger function logs the value of the message provided in the argument. The arguments.length is an in-build property that returns a number of arguments provided in the function call.
Javascript
function logger(message) { console.log("number of arguments passed: ", arguments.length); if (message === undefined) { console.log("please provide a message to be logged"); } else { console.log(message); } console.log(); } logger("Welcome to GFG!"); logger(); |
Output:
number of arguments passed: 1 Welcome to GFG! number of arguments passed: 0 please provide a message to be logged
In the above example, we can see that when we don’t provide the argument for the message parameter, its value becomes undefined.
However, it is not the case in typescript. To see that copy-paste the above code in a typescript file ( with .ts extension ) and compile it, or use an online typescript editor like TS Playground which is provided on the Typescript official website. You will get an error on compiling the code as shown below:
Error is shown by typescript on using optional parameter incorrectly.
We have received the above error because the typescript compiler assumes that message is a required parameter. So, we explicitly need to mention that it is an optional parameter in the function declaration. For that, we use the ? symbol after the parameter name. The syntax is shown below:
Syntax:
<parameter-name>? : <parameter-type>
The correct typescript code for the above example is shown below:
Javascript
// Use ? to make a parameter optional function logger(message?: string) { console.log("number of arguments passed: ", arguments.length); if (message === undefined) { console.log("please provide a message to be logged"); } else { console.log(message); } console.log(); } logger("Welcome to GFG!"); logger(); |
Output:
number of arguments passed: 1 Welcome to GFG! number of arguments passed: 0 please provide a message to be logged
Note:
When providing optional parameters along with default or required parameters make sure to follow the below order ( where 1 being first and 3 being last ) in which parameters should be provided:
- Required Parameter: Whose value must be provided as an argument
- Default Parameter: Whose argument may or may not be provided ( default value is taken if not provided )
- Optional Parameter: Whose argument is optional ( value is taken as undefined if argument not provided )
Below is an example of an addition function showing the use of an optional parameter along with the default and required parameters in javascript and typescript. Note the difference in the function declaration in both the languages:
Javascript:
Javascript
// c is optional argument function add(a, b = 1, c) { console.log("number of arguments provided is: ", arguments.length); if (c === undefined) { console.log("provide a value for third argument"); } console.log("Result: ", (a + b + c)); console.log(); } add(1, 3); // skipping value for optional parameter add(1, 3, 4); // providing value for optional parameter |
Output:
number of arguments provided is: 2 provide a value for third argument Result: NaN
Typescript:
Javascript
// see the use of ? symbol for optional argument function add(a: number, b = 1, c?: number) { console.log("number of arguments provided is: ", arguments.length); if(c === undefined){ console.log("provide a value for third argument"); } console.log("Result: ", (a + b + c)); console.log(); } add(1, 3); // Skipping value for optional parameter add(1,3,4); // Providing value for optional parameter |
Output:
number of arguments provided is: 2 provide a value for third argument Result: NaN
Hence, we saw that in javascript every parameter is an optional parameter by default. while in typescript we explicitly need to mention a parameter as optional using ? symbol.
