|

Default Function Parameters In ES6

default function parameters in es6

It’s a little bit surprising that before ES6, JavaScript did not have support for default values given to function parameters. Most languages allow you to set a default value to any particular function parameter during the declaration of that function. This is what makes it possible to use a function with both mandatory parameters and optional parameters. If you didn’t provide the optional parameter, it would just get set to a default. Alas, ES6 has fixed this inconvenience and now has support for default function parameters in functions. Let’s take a quick look at some of the ways you can put default parameters to work in your code.


Passing Simple Values as Default Parameters

In ES5 if a parameter exists in a function declaration, but no value is assigned in the function body, that parameter gets automatically set to undefined. In ES6, we can simply assign a default value right in the declaration.

In this example here, we are declaring a function and it has a parameter of carId. Notice that along with the carId we have an equals sign and the value of 500. This function simply logs the value of carId to the console. We then call the function via getCar() and don’t pass any arguments to it, when we call it. The output is 500. This is how we specify a default value to a parameter in ES6. We use the equals sign, and assign a value or expression.

Here we declare a function with two parameters, carId with a default value of 500 – and make with a default value of Tesla. In the function, we just log out the two parameters separated by a comma. When we call the function, notice we pass undefined as the first argument and the string ‘Honda’ as the second argument. When we execute the function, we see 500, Honda. Since we pass in undefined as the first argument, JavaScript will look for the default value and use that. By passing in ‘Honda’ as the second argument, JavaScript overwrites the default value provided in the function declaration and logs out Honda instead of Tesla.

This next example shows how to set up a blue light special discount, making use of a default value for the second parameter of discount. When we run the function we pass in 1000 as the first argument for the price parameter. Since our discount parameter has a default value of 20%, we get the value of 800 which is a 20% discount off of 1000.

We can also refactor the blue light special to make use of a function call within the default function parameter list like so.


Expressions as Default Parameters

When making use of default function parameters, you can make use of simple expressions to assign a value to one of the parameters. Here we use a simple expression to assign a value to the second default parameter of tax.

This is an interesting example where we have two parameters of price and tax. What’s interesting is that the second parameter takes the result of an expression as it’s default value. The expression makes use of both the first parameter, and an external variable of salesTax. Running the function shows us we get the price we expect, and we find that using expressions as default parameters is very flexible.

This fun example shows us making use of a callback as the first parameter and a delay of 2000 milliseconds as the second parameter. All we do is make use of the JavaScript setTimeout function to run a callback after a specified amount of time. We then call the function, and note we actually pass in an arrow function to the twoSecondDelay() function as the first argument. We do not provide the second argument, but that assumes a default value of 2000 since we used that in the function declaration. When we run the function, after a two second delay we see the text, finished.


Functions as Default Parameters

If you have anything more complex than a simple expression, you can extract that logic to it’s own function. Then, you can actually call a function in the default parameter list to apply a value to one of the default parameters. Again we make use of a simple arrow function to return the sales tax of 7 percent. In the function declaration of getCarCost(), we specify two default parameters of price and tax. Note that the second parameter of tax makes use of the first parameter’s value, times the returned value of generateSalesTax().

Here is an example passing in four parameters, with only the first being required. All others are assigned a default value.


Arguments.length Considerations

Let’s examine what happens to the arguments array within a function when using default function parameters. Notice that the use of default parameters has no bearing on the length of the arguments list inside the function. When we call getCarCost(), we only specify one argument of 100000. Notice the function declaration makes use of two default parameters. It turns out this has no impact on arguments.length.

To examine this concept just a bit further, we have this example right here that looks at the length and values of the indices that exist in arguments. We have a function listArguments() that logs out the length of arguments, checks to see if the first parameter is equal to the first value in arguments, and also checks to see if the second parameter is equal to the second value in arguments. Note when the code runs that arguments.length is only 1. The make parameter is equal to the value held in arguments[0] which is Tesla Model S. Finally, we see that price does not equal arguments[1]. This is because even though price exists as a default function parameter, it was not provided as an argument to listArguments() when the function was called. If nothing else, this cements our understanding of parameters vs arguments in JavaScript.


ES5 Hacks to set Default Parameters

In the olden days of JavaScript, we had methods to work around the lack of default function parameters. Here is a quite hackish way to accomplish that goal. It’s a lot of checking and typing for what should be a pretty simple thing to accomplish.


ES5 shorthand for Default Parameters

Have a look at this code that makes use of the || operator inside the function to set values if one is not provided when the function is called. This is a little nicer shorthand version than the example just above. You see this quite frequently in JavaScript.


Default Function Parameters In ES6 Summary

We covered quite a few good examples of how Default Function Parameters work in ES6. This is a welcome addition in JavaScript, and it is just one more thing to help make JavaScript a bit more user friendly to web developers everywhere.