110

I created a function like this:

function saveItem(andClose = false) {

}

It works fine in Firefox

In IE it gives this error on the console: Expected ')'

In Chrome it gives this error in the console: Uncaught SyntaxError: Unexpected token =

Both browsers mark the source of the error as the function creation line.

Talon
  • 4,937
  • 10
  • 43
  • 57

5 Answers5

165

You can't do this, but you can instead do something like:

function saveItem(andClose) {
   if(andClose === undefined) {
      andClose = false;
   }
}

This is often shortened to something like:

function setName(name) {
  name = name || 'Bob';
}

Update

The above is true for ECMAScript <= 5. ES6 has proposed Default parameters. So the above could instead read: 

function setName(name = 'Bob') {}
Community
  • 1
  • 1
juco
  • 6,331
  • 3
  • 25
  • 42
  • 16
    This is useful for IE11 and under, which doesn't implement ES6 and breaks on default parameters. – Eran Goldin Sep 24 '16 at 00:05
  • 2
    Thanks!! Didn't know that! IE sucks but developers don't have a choice other than to support a "non"-browser. – Fr0zenFyr Feb 21 '17 at 08:49
  • 4
    `name = name || 'Bob';` shouldn't be used because if name is set to a falsey value, the default will be used instead of name – Gerard Simpson Apr 10 '17 at 06:09
  • 13
    Instead of ```name = name || 'Bob'``` use ```name = (name === undefined) ? '' : name;``` – Brian Jun 08 '17 at 19:30
  • 1
    @juco I don't understand "You can't do this" - Mozilla MDN says we can? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters Are you just saying that you can't do it in IE or are you saying the Mozilla docs are inaccurate? – php-b-grader Jun 19 '20 at 00:12
  • 1
    @php-b-grader The docs say you can't use this in IE – reggaeguitar Sep 01 '20 at 17:20
14

That's not a valid ECMAScript syntax, but it is a valid syntax for Mozilla's superset of features they add to their implementation of the language.

Default parameter assignment syntax is likely coming in ECMAScript 6.

the system
  • 9,244
  • 40
  • 46
  • 1
    Ok, so what is the best way to set default values in Javascript functions? – Talon Mar 02 '13 at 19:53
  • 1
    @Talon: The best way depends on your situation. If you know the argument won't be falsey, you can do `foo = foo || "the default"`. Or you can check the `.length` of the `arguments` object. Or you can simply test each parameter for `undefined`. There are different occasions to use each. – the system Mar 02 '13 at 19:55
9

Javascript does not allow a "default" specifier.

A quick way of doing what you would want is changing:

function saveItem(andClose = false) {

}

to the following:

function saveItem(andClose) {
    // this line will check if the argument is undefined, null, or false
    // if so set it to false, otherwise set it to it's original value
    var andClose = andClose || false;

    // now you can safely use andClose
    if (andClose) {
        // do something
    }
}
JRomero
  • 4,878
  • 1
  • 27
  • 49
  • 1
    it will set `andClose` to false it was 0... not quite what I would expect it to do... – gdoron Mar 02 '13 at 20:22
  • @gdoron see this: http://stackoverflow.com/questions/7615214/in-javascript-why-is-0-equal-to-false-but-not-false-by-itself these are the quirks you need to learn about any language you use. – JRomero Mar 03 '13 at 00:52
  • an alternative is to change the third line to `var andClose = andClose === undefined? false: andClose;` That will enable you to pass `0` to the function and not have it replaced with `false`. – Max Heiber Dec 27 '15 at 14:23
2

The code you provided won't run in Chrome < version 49: https://kangax.github.io/compat-table/es6/#test-default_function_parameters

You used valid ECMAScript 2015 syntax:

In my opinion, the best way to use ES2015 features is to bundle assets with Browserify or WebPack, with a step for using Babel to trans-compile ES2015 to ES5. That way you don't have to worry about that ES2015 browser compatibility chart. It's a pain to get started the first time, but worth it.

Max Heiber
  • 14,346
  • 12
  • 59
  • 97
1

In your case, you have an other alternative to be sure that your variable is a boolean:

function saveItem(andClose) {
  andClose = true == andClose;
  // ...
}

Default value is undefined, and true == undefined => false, so your default value will be false :)

Cédric Talpaert
  • 19
  • 2
  • One minor adjustment would be to remove the var declaration as the `andClose` variable is already assigned in this scope – Ben Sewards Jul 09 '20 at 21:22
  • If you really want to be sure it's a boolean and not the string 'true', change it to `andClose = true === andClose;` – JanP Oct 01 '20 at 13:30