Default parameters
Default parameters allow you to initialise parameters with default values and are an incredibly useful tool in JavaScript.
Any function parameters will default to undefined
, so if they aren’t passed as arguments a common strategy is to test the parameter in the function body and set a default if not provided:
function myAddFunc (firstParam, missingParam) {
missingParam = (typeof missingParam !== 'undefined') ? missingParam : 10;
return firstParam + missingParam;
}
myAddFunc(1, 2); // 3
myAddFunc(1); // 11
Or, the lazy incorrect way:
function myAddFunc (firstParam, missingParam) {
missingParam = !missingParam ? 10 : missingParam;
return firstParam + missingParam;
}
myAddFunc(1, 0); // 11 oops
Because of course 0 is evaluated as a falsey value so triggers the default parameter.
ECMAScript 2015 - Default Parameters
Introduced in ECMAScript 2015, default parameters allow anything omitted from a function call, or passed as undefined to trigger the default replacement (note this does not include NULL
- this is considered a valid value, not a missing value).
function myAddFunc (firstParam = 0, missingParam = 10) {
return firstParam + missingParam;
}
myAddFunc(1, 2); // 3
myAddFunc(1); // 11
myaddFunc(); // 10
As you can see this allows you to shorten the function, and this example could be even further reduced using an arrow function:
const myAddFunc = (firstParam = 0, missingParam = 10) => firstParam + missingParam;
You can also refer to previous parameters:
function myAddFunc (firstParam = 0, missingParam = firstParam + 10) {
return firstParam + missingParam;
}
myAddFunc(1, 2); // 3
myAddFunc(1); // 12
myaddFunc(); // 10
Note you only refer to previous parameters that have already been encountered, so firstParam could not reference missingParam like this:
function myAddFunc (firstParam = missingParam, missingParam = 10) {
return firstParam + missingParam;
}
myAddFunc() // Uncaught ReferenceError: missingParam is not defined
You can even use a function as the default value, for instance, to calculate the value or return an error:
const requiredParam = (param) => {
const requiredParamError = new Error(`Required param ${param} is missing`)
throw requiredParamError
}
const myFunc = ({
firstParam,
secondParam=requiredParam('secondParam')
} = {}) => console.log(firstParam, secondParam)
myFunc({firstParam: '1', secondParam: '2'}) // 1 2
myFunc() // Uncaught Error: Required param secondParam is missing
Note the multiple levels of defaults for the parameters - { … } = {} defaults to an object if no parameters are provided. The secondParam=requiredParam(‘secondParam’) is then also applied, so it hasn’t just defaulted to an empty object and stopped at that point.
Object deconstructuring
You can also use default value with object deconstructuring:
const test = { a: 1 };
const { a: var1, var2 = 2 } = test;
var1 // 1
var2 // 2
Added bonus - parameter hints
In VS Code (other editors will provide similar features) IntelliSense will give you parameter hints, and if you have used default values this will include a hint to the type of parameter that is expected: