Default Parameters In JavaScript Functions

Default function parameters allow formal parameters to be initialised with default values if no value or undefined is passed.
A default parameters is a parameters to a function that a programmer is not required to specify.

Before ECMAScript 6 JavaScript does not support the default function parameters. If you create the function with parameters and when you call that function without passing that parameters value than JavaScript set the value of that parameters to undefined.

So in the or before the ECMAScript 6 we have to check manually that programmer has passed the value or not. If the programmer does not passed the value than we have to set the our default value. As you know it is long process but there is no way to implement the default function parameters in the before ECMAScript 6.

With the release of the ECMAScript 6 now JavaScript support the default function parameters, So when programmer does not pass the value of the parameters than JavaScript automatically set the default value, which is we given to the function at the time of the function declaration.

Before the ECMAScript 6:

I recommended to you use this technique because the most of the modern browser does not support the ECMAScript 6 till now.

Example:

function addition(num1, num2, num3) {
    if (num3 === undefined) {
        num3 = 0;
    }

    var ans = num1 + num2 + num3;

    return ans;
}

alert(addition(5, 5));

Here the num3 is default parameter, If the programmer does not send the value of it than we can set it 0.
So as you seen first we have to check that default parameter is undefined or not. If it is not undefined than its good to go but if it is undefined that we have to set the default value for it, here we set the 0.
So here we have to write the extra code to check the value of the default parameter.

With ECMAScript 6:

function addition(num1, num2, num3 = 0) {
        var ans = num1 + num2 + num3;

        return ans;
}

alert(addition(5, 5));

Here as you see that with ECMAScript 6 we can now directly set the default value for the default parameters.
In the back-end JavaScript do the same processing which we are doing in the previous program.
Here JavaScript check the programmer send the value of the parameter or not, If programmer send the value of the parameter than it will set that value to the parameter, otherwise it will set the default value which we set at the time of the function declaration.

Now let’s start with solution for the default parameter before ECMAScript 6.

So before the ECMAScript 6 we have to check the manually or we have to write the code for checking the parameters value.
So now the question is how we can check the value of the parameters ? There is mainly two way to do it.

1. Write the if condition and check the value of the parameter is undefined.

Example:

function addition(num1, num2, num3) {
        if (num3 === undefined) { // Here we are checking that value of the parameter is undefined or not.
                num3 = 0; // If yes, than here we are setting the default value to the parameter
        }

        var ans = num1 + num2 + num3;

        return ans;
}

This is much safer way to assign the default value to the undefined parameters.

2. Check the value of the parameter by the || (OR) operator.

function addition(num1, num2, num3) {

        num3 = num3 || 0; // this default parameter and we are checking the value of the parameter
        // using the || (OR) operator

        var ans = num1 + num2 + num3;

        return ans;
}

Here we are doing the same this, Here || (OR) operator check checks the value of the parameter, If the programmer passed the value of the parameter than it assign that value to parameter so no change is made, but if when programmer does not passed the value of the parameter than it set the default value to the parameter.

Here || (OR) operator what do is, It check the first value if the first value is truthly that it return that value and set it to parameter if the first value is falsy that it return the second value and set to the parameter.

I does not recommended to you to use the || (OR) operator to check the value of the default parameter. Because it have the some cons for example like you can not be able to pass the falsy value to the default parameter, If you pass the falsy value to the function than it does not used the value that you passed because the || (OR) operator will change the value to default value by returning the second value.

Here is the some list of the falsy value

1. false
2. 0 (ZERO)
3. null
4. undefined
5. “” (The empty string)
6. NaN

Let’s check the example of it.

function addition(num1, num2, num3) {

        num3 = num3 || 5;

        var ans = num1 + num2 + num3;

        return ans;
}

alert(addition(5, 5, 0)); // it alert with 15. but the actual result is 10.
// Here we pass the 0 for the default parameter value
// but the || (OR) parameter think that you does not pass the any value than 
// it return the second value 5.

alert(addition(5, 5, false)); // it alert with 15. but the actual result is 10.

alert(addition(5, 5, null)); // it alert with 15. but the actual result is 10.

alert(addition(5, 5, undefined)); // it alert with 15. but the actual result is 10.

alert(addition(5, 5, "")); // it alert with 15. but the actual result is 10.

alert(addition(5, 5, NaN)); // it alert with 15. but the actual result is 10.

If you run the above the program than all the alert box alert with 15 but the actual result all of the alert box is 10. It happen the because of the || (OR) operator. Because all the time we are passing the falsy value and the || operator does not know this and it return the second value which value is 5.

So I recommended to you please do not use the || (OR) operator to checking the default value mostly when you have to pass the falsy parameter to the function.

So let’s see the some more example of the default function parameter:

Example 1:

function addition(num1, num2, num3) {
        if (num3 === undefined) {
                num3 = 0;
        }

        return num1 + num2 + num3;
}

alert(addition(5, 5));

Example 2:

function ConcatString(parameterObject) {
        var defaultParameter = {
                param1: "Optional String 1",
                param2: "Optional String 2",
                param3: "Optional String 3"
        };


        var finalParams = defaultParameter;

        for (var key in defaultParameter) {

                if (parameterObject.hasOwnProperty(key)) {
                        finalParams[key] = parameterObject[key];
                }
        }

        var string = "";
        for (var key in finalParams) {
                string += finalParams[key] + " - ";
        }

        return string;
}

var parmObject = {
        param1: "Orignal String 1",
        param3: "Orignal String 3"
};

alert(ConcatString(parmObject)); // Orignal String 1 - Optional String 2 - Orignal String 3

This example (Example 2) are not widely used by programmer because it increased the too much code for the default parameter checking, because it checks the each and every parameter of it.

Now let’s talk about the latest modern browser who support the function default parameter.

ECMAScript 6 Example:

function addition(num1, num2, num3 = 0) {
        var ans = num1 + num2 + num3;

        return ans;
}

alert(addition(5, 5));

ECMAScript 6 comes with the inbuilt functionality for the default parameter, Which directly assign the default value to the parameter if the programmer does not passed the any parameter.

I hope today you learned something new, and I hope that now you know the difference between the function default parameter value working in the ECMAScript 6 and ECMAScript 5.

Happy Coding...

🙂