Default Parameter Values
With ES6, you can do perhaps one of the most common idioms in JavaScript
relates to setting a default value for a function parameter. The way we’ve done this for years should look quite familiar:
function foo(x,y) { x = x || 11; y = y || 31; console.log( x + y ); } foo(); // 42 foo( 5, 6 ); // 11 foo( 5 ); // 36 foo( null, 6 ); // 17
This pattern is most used, but is dangerous when we pass values like
foo(0, 42) foo( 0, 42 ); // 53 <-- Oops, not 42
Why? Because the 0 is falsy
, and so the x || 11 results in 11
, not the directly passed in 0. To fix this gotcha, some people will instead write the check more verbosely like this:
function foo(x,y) { x = (x !== undefined) ? x : 11; y = (y !== undefined) ? y : 31; console.log( x + y ); } foo( 0, 42 ); // 42 foo( undefined, 6 ); // 17
we can now examine a nice helpful syntax added as of ES6
to streamline the assignment of default values to missing arguments:
function foo(x = 11, y = 31) { console.log( x + y ); } foo(); // 42 foo( 5, 6 ); // 11 foo( 0, 42 ); // 42 foo( 5 ); // 36 foo( 5, undefined ); // 36 <-- `undefined` is missing foo( 5, null ); // 5 <-- null coerces to `0` foo( undefined, 6 ); // 17 <-- `undefined` is missing foo( null, 6 ); // 6 <-- null coerces to `0`
x = 11
in a function declaration is more like x !== undefined ? x : 11
than the much more common idiom x || 11
Default Value Expressions
Function
default values can be more than just simple values like 31; they can be any valid expression, even a function call
:
function bar(val) { console.log( "bar called!" ); return y + val; } function foo(x = y + 3, z = bar( x )) { console.log( x, z ); } var y = 5; foo(); // "bar called" // 8 13 foo( 10 ); // "bar called" // 10 15 y = 6; foo( undefined, 10 ); // 9 10
As you can see, the default value expressions are lazily evaluated, meaning they’re only run if and when they’re needed — that is, when a parameter’s argument is omitted or is undefined.
A default value expression can even be an inline function expression call — commonly referred to as an Immediately Invoked Function Expression (IIFE)
:
function foo( x = (function(v){ return v + 11; })( 31 ) ) { console.log( x ); } foo(); // 42