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:
