Default Parameters

In TypeScript, we can assign the function parameters some values by default. Such parameters can be explicitly passed values. These parameters are known as default parameters.

When a function is called with missing arguments, or argument with undefined values, the function uses these default initialized values.

Syntax

The syntax of the default parameters in TypeScript is as follows –

function functionName(param1[:type], param2[:type] = defaultValue)

Here the function functionName() takes two parameters – param1 and param2. The first parameter param1 is required parameter whereas the second parameter param2 is a default parameter. The param2 is initialized with a default value, defaultValue. When the function functionName() is called without passing the value for param2, the defaultValue is used as the value of param2.

Let’s understand the function default parameters with the help of some TypeScript example programs.

Example: Simple Default Parameters

let”s look at the following example,

function greet(name: string, age: number = 30){
console.log(`Hi ${name}, your age is ${age}.`)
}
greet(''John'', 50);
greet(''John'');

In the example above, the parameter age is a default parameter that is initialized with default value of 30. The parameter name is a required parameter.

On compiling, it will generate the following JavaScript code.

function greet(name, age = 30) {
    console.log(`Hi ${name}, your age is ${age}.`);
}
greet(''John'', 50);
greet(''John'');

Output

Hi John, your age is 50.
Hi John, your age is 30.

Example: Default parameters after required parameters

Default Parameters should come after Required Parameters in the function definition

In the following example, we put the default parameter y after the required parameter x.

function sum(x: number, y: number=10): number{
    return x + y;
}
console.log(sum (20,30));
console.log(sum (30));

On compiling, it will generate the following JavaScript code.

function sum(x, y = 10) {
    return x + y;
}
console.log(sum(20, 30));
console.log(sum(30));

The output is as follows –

50
40

Example: Default parameters before required parameters

But if you put the default parameter before the required parameter, and call the function without the passing value for default argument it will show an error. Let”s look at the following example –

function sum(x: number=10, y:number):number{
    return x + y;
}
console.log(sum(20,30)); // 50
console.log(sum(30)); // NaN

The above TypeScript program will show the following error –

Expected 2 arguments, but got 1.

And produce the following output –

50
NaN

Example: Passing a function as a value for default parameter

In the example below, we initialized the parameter b with getNum() function as default value. The getNum() function return the number 10. When the second argument is missing, the value returned by the function getNum() is used as the value for the parameter inside the function.

function getNum(): number {
    return 10;
}
function mul(a: number, b = getNum()) {
    return a * b;
}
console.log(mul(20, 5));
console.log(mul(20))

Output

100
200

Optional Parameter vs. Default Parameter

We can call a function without passing a value for the default parameter. We can also call a function without passing a value for optional parameter.

Example: Default Parameter

In the example below, the age parameter has default value as 30. Which means if you are not passing a value for the age parameter, the function will use the default value of 30 for age.

function greet(name: string, age: number = 30){
console.log(`Hi ${name}, your age is ${age}.`);
}
greet(''John'', 50);
greet(''John'');

On compiling, it will generate the following JavaScript code.

function greet(name, age = 30) {
    console.log(`Hi ${name}, your age is ${age}.`);
}
greet(''John'', 50);
greet(''John'');

The output of the above example code is as follows –

Hi John, your age is 50.
Hi John, your age is 30.

Example: Optional Parameter

In the below example, the age parameter is optional. This means you can call the greet function without passing a value for age parameter. When called without a value of age parameter.

function greet(name: string, age?:number){
    if (age) {
        console.log(`Hello ${name}, you are ${age} years old`);
    }
    else{
        console.log(`Hello ${name}`);
    }
}
greet (''Shahid'', 35);
greet (''Shahid'');

On compiling, it will generate the following JavaScript.

function greet(name, age) {
    if (age) {
        console.log(`Hello ${name}, you are ${age} years old`);
    }
    else {
        console.log(`Hello ${name}`);
    }
}
greet(''Shahid'', 35);
greet(''Shahid'');

The output of the above code is as follows –

Hello Shahid, you are 35 years old
Hello Shahid

We can”t declare a parameter optional and default at the same time.

function greet(name: string, age?: number = 30){
console.log(`Hi ${name}, your age is ${age}.`);
}

The above program will show the following error –

Parameter cannot have question mark and initializer.