Our volunteers haven't translated this article into Català yet. Join us and help get the job done!
You can also read the article in English (US).
Default function parameters allow named parameters to be initialized with default values if no value or undefined
is passed.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) { statements }
Description
In JavaScript, function parameters default to
. However, it's often useful to set a different default value. This is where default parameters can help.undefined
In the past, the general strategy for setting defaults was to test parameter values in the function body and assign a value if they are undefined
.
In the following example, if no value is provided for b
when multiply
is called, b
’s value would be undefined
when evaluating a * b
and multiply
would return NaN
.
function multiply(a, b) { return a * b; } multiply(5, 2); // 10 multiply(5); // NaN !
To guard against this, something like the second line would be used, where b
is set to 1
if multiply
is called with only one argument:
function multiply(a, b) { b = (typeof b !== 'undefined') ? b : 1; return a * b; } multiply(5, 2); // 10 multiply(5); // 5
With default parameters in ES2015, checks in the function body are no longer necessary. Now, you can assign 1
as the default value for b
in the function head:
function multiply(a, b = 1) { return a * b; } multiply(5, 2); // 10 multiply(5); // 5
Examples
Passing undefined
vs. other falsy values
In the second call in this example, even if the first argument is set explicitly to undefined
(though not null
or other falsy values), the value of the num
argument is still the default.
function test(num = 1) { console.log(typeof num); } test(); // 'number' (num is set to 1) test(undefined); // 'number' (num is set to 1 too) // test with other falsy values: test(''); // 'string' (num is set to '') test(null); // 'object' (num is set to null)
Evaluated at call time
The default argument is evaluated at call time, so unlike e.g. Python, a new object is created each time the function is called.
function append(value, array = []) { array.push(value); return array; } append(1); //[1] append(2); //[2], not [1, 2]
This even applies to functions and variables:
function callSomething(thing = something()) { return thing; } let numberOfTimesCalled = 0; function something() { numberOfTimesCalled += 1; return numberOfTimesCalled; } callSomething(); // 1 callSomething(); // 2
Default parameters are available to later default parameters
Parameters defined beforehand (to the left) are available to later default parameters:
function greet(name, greeting, message = greeting + ' ' + name) { return [name, greeting, message]; } greet('David', 'Hi'); // ["David", "Hi", "Hi David"] greet('David', 'Hi', 'Happy Birthday!'); // ["David", "Hi", "Happy Birthday!"]
This functionality can be approximated like this, which demonstrates how many edge cases are handled:
function go() { return ':P'; } function withDefaults(a, b = 5, c = b, d = go(), e = this, f = arguments, g = this.value) { return [a, b, c, d, e, f, g]; } function withoutDefaults(a, b, c, d, e, f, g) { switch (arguments.length) { case 0: a; case 1: b = 5; case 2: c = b; case 3: d = go(); case 4: e = this; case 5: f = arguments; case 6: g = this.value; default: } return [a, b, c, d, e, f, g]; } withDefaults.call({value: '=^_^='}); // [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] withoutDefaults.call({value: '=^_^='}); // [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
Functions defined inside function body
Introduced in Gecko 33 (Firefox 33 / Thunderbird 33 / SeaMonkey 2.30). Functions declared in the function body cannot be referred to inside the outer function]s default parameters. If attempted, a ReferenceError
is thrown. Default parameters are always executed first, so function declarations inside the function body evaluate afterwards.
// Doesn't work! Throws ReferenceError. function f(a = go()) { function go() { return ':P'; } }
Parameters without defaults after default parameters
Prior to Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2), the following code resulted in a SyntaxError
. This was fixed in bug 777060. Parameters are still set left-to-right, overwriting default parameters even if there are later parameters without defaults.
function f(x = 1, y) { return [x, y]; } f(); // [1, undefined] f(2); // [2, undefined]
Destructured parameter with default value assignment
You can use default value assignment with the destructuring assignment notation:
function f([x, y] = [1, 2], {z: z} = {z: 3}) { return x + y + z; } f(); // 6
Specifications
Specification | Status | Comment |
---|---|---|
ECMAScript 2015 (6th Edition, ECMA-262) The definition of 'Function Definitions' in that specification. |
Standard | Initial definition. |
ECMAScript Latest Draft (ECMA-262) The definition of 'Function Definitions' in that specification. |
Draft |
Browser compatibility
Desktop | Mobile | Server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome Full support 49 | Edge Full support 14 | Firefox Full support 15 | IE No support No | Opera Full support 36 | Safari Full support 10 | WebView Android Full support 49 | Chrome Android Full support 49 | Edge Mobile Full support 14 | Firefox Android Full support 15 | Opera Android Full support 36 | Safari iOS Full support 10 | Samsung Internet Android Full support 5.0 | nodejs Full support 6.0.0 |
Parameters without defaults after default parameters | Chrome Full support 49 | Edge Full support 14 | Firefox Full support 26 | IE No support No | Opera Full support 36 | Safari Full support 10 | WebView Android Full support 49 | Chrome Android Full support 49 | Edge Mobile Full support 14 | Firefox Android Full support 26 | Opera Android Full support 36 | Safari iOS Full support 10 | Samsung Internet Android Full support 5.0 | nodejs Full support Yes |
Destructured parameter with default value assignment | Chrome Full support 49 | Edge ? | Firefox Full support 41 | IE No support No | Opera ? | Safari ? | WebView Android Full support 49 | Chrome Android Full support 49 | Edge Mobile ? | Firefox Android Full support 41 | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support 5.0 | nodejs Full support Yes |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown