The Default Parameters option was added in the ES6 version of JavaScript. In this tutorial let us learn What is Default Parameters and how to use them in TypeScript
Table of Contents
Default Parameters
The default parameters allow us to initialize the parameter with default values if no value or undefined is passed as the argument.
The following is the syntax for providing the default value in TypeScript.
1 2 3 4 5 | function fnName(param1:type = defaultValue1, /* … ,*/ paramN:type = defaultValueN):type { // … } |
The code below uses the default value for the parameter c. Note that we call addNum without a value for the parameter c. The code initializes the parameter c with 0 and returns 3.
1 2 3 4 5 6 7 8 9 | function addNum(a:number, b:number, c:number=0):number { let result=a+b+c console.log(result) return result ; } addNum(1,2) //3 |
The above code without the default value for c will result in a compiler error. This is because we have supplied value for only 2 parameters while the function expects 3.
1 2 3 4 5 6 7 8 9 | function addNum(a:number, b:number, c:number):number { let result=a+b+c console.log(result) return result ; } addNum(1,2) //Expected 3 arguments, but got 2. |
Multiple Default Parameters
A function can have multiple default parameters.
1 2 3 4 5 6 7 8 9 10 11 12 | function addNum(a=1, b=1) { let result=a+b console.log(result) return result ; } addNum() //2 addNum(1) //2 addNum(1,2) //3 |
Using Expressions as Default Values
You can use also use any expression as a default value. In the example below b takes an expression.
1 2 3 4 5 6 7 8 9 10 11 12 | let x=1 let y=2 function addNum(a=x, b=x+y) { return a + b ; } console.log(addNum()); //4 console.log(addNum(1)); //4 console.log(addNum(1,2)); //3 |
Evaluated at call time
The JavaScript evaluates the parameters and updates the default values when we call the function.
In the following example, the a is 1 and b becomes 3 when we call addNum for the first time. We change the value of x & y and when we call the addNum again it will evaluate default values again. Hence a is 5 and b becomes 10.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | let x=0 let y=0 function addNum(a=x, b=x+y) { return a + b ; } x=1 y=2 console.log(addNum()); //4 (a=1 & b=3) x=5 y=5 console.log(addNum()); //15 (a=5 & b=10) |
Using earlier Parameters
You can also make use of earlier parameters in the default value expressions.
In the code below, b uses a in its expression.
1 2 3 4 5 6 7 8 9 | function addNum(a=1, b=a+1) { return a + b ; } console.log(addNum()); //3 (a=1 , b=2) console.log(addNum(3)); //7 (a=3 , b=4) |
Passing undefined
You can not pass undefined if we use default values. Because, If the value is undefined then TypeScript assigns the default value.
1 2 3 4 5 6 7 8 | function addNum(a=1) { console.log(a) } addNum() //1 addNum(undefined) //1 //gets the default value. |
Hence if you want to pass an undefined value, then do not use default values
Default Parameters can appear anywhere
The default Parameters can appear anywhere in the parameter list.
In the following example, the first two parameters have default values. But the third parameter c does not have one. Here if we want to pass a value to the parameter c, then we need to explicitly pass undefined to a & b.
1 2 3 4 5 6 7 8 9 10 11 12 | function addNum(a=1, b=2, c) { return a + b +c ; } console.log(addNum()); //Expected 3 got 0 console.log(addNum(3)); //Expected 3 got 1 console.log(addNum(3,6)); //Expected 3 got 2 console.log(addNum(3,6,10)); //19 (a=3 , b=6, c=10) console.log(addNum(undefined,undefined,10)); //13 (a=3 , b=6, c=10) |
Function as default Value
You can also use another function as the Default Value.
The showNumber uses another function getNumber to assign a default value to the parameter a
1 2 3 4 5 6 7 8 9 10 11 12 | function showNumber(a=getNumber()) { console.log(a) } function getNumber() { return 10; } showNumber() //10 showNumber(5) //5 |
Making Parameter Optional
We can make the parameter optional using the ?. But that would result in NaN
1 2 3 4 5 6 7 8 9 | function addNum(a:number, b:number, c?:number):number { let result=a+b+c console.log(result) return result ; } addNum(1,2) //NaN |
To solve this, we need to check if the c is undefined. If it is then initialize it with 0.
1 2 3 4 5 6 7 8 9 10 11 12 | function addNum(a:number, b:number, c?:number):number { if (typeof c==="undefined") c=0 let result=a+b+c console.log(result) return result ; } addNum(1,2) //3 |
