JavaScript

Beginner’s Guide to JavaScript Default Parameters

In JavaScript, the default values of function parameters are undefined. If a function is called without a parameter, its missing values are called undefined. The default parameters help in setting the default value in the function’s parameter to nullify the undefined value. This is a new feature of the ES6 version.

In this article, you will learn a beginner’s guide to default parameters. The outcomes of this tutorial are given as follows.

  • How the default parameters work in JavaScript
  • How to use the default parameters in JavaScript

How the default parameters works in JavaScript

The default parameters set a value for the function initialising parameters with a default value if an undefined or null value is passed in the function. This section explains the working of the default parameters with the help of syntax.

Syntax
The syntax of default parameters is given in the following.

function function-name(P1 = DV1, P2 = -DV2, P3=DV3,......))
{
    function-body
}

In the above syntax,

The function-name refers to the name of the function where P and DV represent the parameters and their default values respectively. The default value could be an integer, an expression, or a function value.

How to use the default parameters in JavaScript

The default parameters give permission to the named functions to get started with a default value when an undefined value is passed. These are produced when a function is called. This section helps you in learning on how to default parameters with examples.

Example: How to set default values using default parameters
The default parameters set the default values in the function. There could be one or more parameters in the function. This example explains how default parameters set the default values.

function printValue(x=3, y) {
    console.log("x = " + x + " and y = " + y);
}

printValue();
printValue(9);
printValue(9, 7);

In the above example, the two parameters ‘x’ and ‘y’ are passed.The default value of ‘x’ is defined whereas ‘y’ is not defined. The function body refers to the code which prints the values of x and y.

The function is called in three different ways :

  • printValue();” statement will print the default values of ‘x’ and ‘y’ (either defined or not in the function)
  • printValue(9);” statement will set the value of ‘x’ to 9 while the default value of ‘y’ is considered
  • printValue(9, 7);” will pass the value 9 to ‘x’ and value 7 to ‘y’.

It is concluded from the output that:

  • When printValue() is called without arguments, the default values are printed i.e., ‘x=3’ and ‘y=undefined’
  • When printValue() is called with only one argument (that is 3) then that value will be assigned to the first parameter(x)
  • When printValue() is called with two arguments (9 and 7) then the default values of x and y are replaced with 9 and 7 respectively.

Example: How the function works without default parameters
There can be more than one parameter in an object. In the following code, we will check how the function behaves without default values.

function printValue(x, y) {
    console.log("x = " + x + " and y = " + y);
}

printValue(3);

In this example, two parameters ‘x‘ and ‘y’ are passed as an argument without any default value.The function body refers to the code which prints the values of x and y.

The “Value(3);” statement will set the value of ‘x’ to 3.

When printValue() is called with only argument ‘3’, then the default values are printed as ‘x=3’ and ‘y=undefined’.

Conclusion

In JavaScript, the default parameters are used to set the default value for the function’s parameters. The default parameters are quite helpful when the parameters contain null or undefined value. This guide helps in providing detailed knowledge on how to use the JavaScript default parameters. We have provided a detailed overview of default parameters in JavaScript and their importance is highlighted by demonstrating a set of examples.

About the author

Adnan Shabbir