Set a default parameter value for a JavaScript function

Question

I would like a JavaScript function to have optional arguments which I set a default on  which get used if the value isn t defined  and ignored if the value is passed   In Ruby you can do it like this   def read file file  delete after   false      code end   Does this work in JavaScript   function read file file  delete after   false         Code

User · Answer

Just to showcase my skills too  lol   above function can written even without having named arguments as below   ES5 and above  function foo         a   typeof arguments 0       undefined    a   42      b   typeof arguments 1       undefined    b    default b               ES6 and above  function foo    rest        a   typeof rest 0       undefined    a   42      b   typeof rest 1       undefined    b    default b

User · Answer

Yeah this is referred to as a default parameter  Default function parameters allow formal parameters to be initialized with default values if no value or undefined is passed   Syntax   function  name   param1    defaultValue1          paramN    defaultValueN           statements     Description   Parameters of functions default to undefined However  in situations it might be useful to set a different default value   This is where default parameters can help    In the past  the general strategy for setting defaults was to test parameter values in the body of the function and assign a value if they are undefined   If no value is provided in the call  its value would be undefined   You would have to set a conditional check to make sure the parameter is not undefined  With default parameters in ES2015  the check in the function body is no longer necessary   Now you can simply put a default value in the function head   Example of the differences      OLD METHOD function multiply a  b      b    typeof b      undefined      b   1    return a   b     multiply 5  2      10 multiply 5  1      5 multiply 5         5      NEW METHOD function multiply a  b   1      return a   b     multiply 5  2      10 multiply 5  1      5 multiply 5         5   Different Syntax Examples   Padding undefined vs other falsy values   Even if the value is set explicitly when calling  the value of the num argument is the default one   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 gets evaluated at call time  so unlike some other languages  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     function something       return  sth      callSomething       sth   Default parameters are available to later default parameters   Params already encountered are available to later default parameters  function singularAutoPlural singular  plural   singular    s                           rallyingCry   plural     ATTACK          return  singular  plural  rallyingCry          Gecko   Geckos    Geckos ATTACK      singularAutoPlural  Gecko         Fox   Foxes    Foxes ATTACK      singularAutoPlural  Fox    Foxes         Deer    Deer    Deer     change    singularAutoPlural  Deer    Deer    Deer peaceably and respectfully   petition the government for positive change      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 inside default parameters and throw a ReferenceError  currently a TypeError in SpiderMonkey  see bug 1022967   Default parameters are always executed first  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 has been fixed in bug 777060 and works as expected in later versions  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 paramet 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

User · Answer

ES6  As already mentioned in most answers  in ES6  you can simply initialise a parameter along with a value     ES5  Most of the given answers aren t good enough for me because there are occasions where I may have to pass falsey values such as 0  null and undefined to a function  To determine if a parameter is undefined because that s the value I passed instead of undefined due to not have been defined at all I do this   function foo  param1  param2       param1   arguments length  gt   1   param1    default1      param2   arguments length  gt   2   param2    default2

User · Answer

Yes  This will work in Javascript  You can also do that   function func a 10 b 20        alert  a   and   b      func       Result  10 and 20  func 12      Result  12 and 20  func 22 25      Result  22 and 25

User · Answer

The answer is yes  In fact  there are many languages who support default parameters  Python is one of them    def a  enter  Hello       print a enter    Even though this is Python 3 code due to the parentheses  default parameters in functions also work in JS   For example  and in your case     x000D   x000D  function read file file  deleteAfter false   x000D    console log deleteAfter   x000D    x000D   x000D  read file  test txt    x000D   x000D   x000D    But sometimes you don t really need default parameters   You can just define the variable right after the start of the function  like this    x000D   x000D  function read file file   x000D    var deleteAfter   false  x000D    console log deleteAfter   x000D    x000D   x000D  read file  test txt    x000D   x000D   x000D    In both of my examples  it returns the same thing  But sometimes they actually could be useful  like in very advanced projects   So  in conclusion  default parameter values can be used in JS  But it is almost the same thing as defining a variable right after the start of the function  However  sometimes they are still very useful  As you have may noticed  default parameter values take 1 less line of code than the standard way which is defining the parameter right after the start of the function    EDIT  And this is super important  This will not work in IE  See documentation  So with IE you have to use the  define variable at top of function  method  Default parameters won t work in IE

User · Answer

that solution is work for me in js   function read file file  delete after        delete after   delete after    false         Code

User · Answer

function helloWorld name  symbol                name   name     worlds       console log  hello     name   symbol      helloWorld       hello worlds     helloWorld  john       hello john     helloWorld  john      gt   lt         hello john  gt   lt    helloWorld  john   undefined      hello john     helloWorld undefined  undefined      hello worlds

User · Answer

Just use an explicit comparison with undefined   function read file file  delete after        if delete after     undefined    delete after   false

User · Answer

To anyone interested in having there code work in Microsoft Edge  do not use defaults in function parameters    function read file file  delete after   false         code     In that example Edge will throw an error  Expecting           To get around this use  function read file file  delete after      if delete after    undefined          delete after   false         code     As of Aug 08 2016 this is still an issue

User · Answer

function read file file  delete after        delete after   delete after     my default here         rest of code     This assigns to delete after the value of delete after if it is not a falsey value otherwise it assigns the string  my default here   For more detail  check out Doug Crockford s survey of the language and check out the section on Operators   This approach does not work if you want to pass in a falsey value i e  false  null  undefined  0 or     If you require falsey values to be passed in you would need to use the method in Tom Ritter s answer   When dealing with a number of parameters to a function  it is often useful to allow the consumer to pass the parameter arguments in an object and then merge these values with an object that contains the default values for the function  function read file values        values   merge            delete after    my default here         values                 rest of code       simple implementation based on   extend   from jQuery function merge         var obj  name  copy          target   arguments 0                 i   1          length   arguments length       for    i  lt  length  i              if   obj   arguments i      null                for  name in obj                    copy   obj name                    if  target     copy                        continue                                    else if  copy     undefined                        target name    copy                                                       return target       to use     will use the default delete after value read file   file   my file           will override default delete after value read file   file   my file   delete after   my value

User · Answer

def read file file  delete after   false      code end   Following code may work in this situation including ECMAScript 6  ES6  as well as earlier versions        x000D   x000D  function read file file  delete after    x000D      if delete after    undefined  x000D          delete after   false   default value x000D   x000D      console log  delete after    delete after   x000D    x000D  read file  text1 txt  true   x000D  read file  text2 txt    x000D   x000D   x000D    as default value in languages works when the function s parameter value is skipped when calling  in JavaScript it is assigned to undefined  This approach doesn t look attractive programmatically but have backward compatibility

User · Answer

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  lt -- 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  lt --  undefined  is missing foo  5  null       5  lt -- null coerces to  0  foo  undefined  6       17  lt --  undefined  is missing foo  null  6       6  lt -- 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

User · Answer

Yes - proof   x000D   x000D  function read file file  delete after   false         Code   console log  file delete after            TEST read file  A    read file  B  true   read file  C  false   x000D   x000D   x000D

User · Answer

Use this if you want to use latest ECMA6 syntax                          x000D   x000D  function myFunction someValue    This is DEFAULT      x000D    console log  someValue -- gt     someValue   x000D    x000D   x000D  myFunction  Not A default value      calling the function without default value x000D  myFunction       calling the function with default value x000D   x000D   x000D                                        It is called default function parameters  It allows formal parameters to be initialized with default values if no value or undefined is passed  NOTE  It wont work with Internet Explorer or older browsers                  For maximum possible compatibility use this                           x000D   x000D  function myFunction someValue    x000D    someValue    someValue     undefined     This is DEFAULT     someValue  x000D    console log  someValue -- gt     someValue   x000D    x000D   x000D  myFunction  Not A default value      calling the function without default value x000D  myFunction       calling the function with default value x000D   x000D   x000D    Both functions have exact same behavior as each of these example rely on the fact that the parameter variable will be undefined if no parameter value was passed when calling that function

User · Answer

If for some reason you are not on ES6 and are using lodash here is a concise way to default function parameters via   defaultTo method    x000D   x000D  var fn   function a  b    x000D    a     defaultTo a   Hi   x000D    b     defaultTo b   Mom    x000D   x000D    console log a  b  x000D    x000D   x000D  fn                      Hi Mom  x000D  fn undefined  null      Hi Mom  x000D  fn NaN  NaN             Hi Mom  x000D  fn 1                    1  Mom   x000D  fn null  2              Hi 2 x000D  fn false  false         false false x000D  fn 0  2                 0 2 x000D   lt script src  https   cdnjs cloudflare com ajax libs lodash js 4 17 11 lodash min js  gt  lt  script gt  x000D   x000D   x000D    Which will set the default if the current value is NaN  null  or undefined

User · Answer

Just a different approach to set default params is to use object map of arguments  instead of arguments directly  For example    const defaultConfig      category   Animals    legs  4     function checkOrganism props     const category   props category    defaultConfig category   const legs   props legs    defaultConfig legs      This way  it s easy to extend the arguments and not worry about argument length mismatch

User · Answer

Yes  using default parameters is fully supported in ES6   function read file file  delete after   false         Code     or   const read file    file  delete after   false    gt           Code     but prior in ES5 you could easily do this   function read file file  delete after      var df   delete after    false       Code     Which means if the value is there  use the value  otherwise  use the second value after    operation which does the same thing     Note  also there is a big difference between those if you pass a value to ES6 one even the value be falsy  that will be replaced with new value  something like null or       but ES5 one only will be replaced if only the passed value is truthy  that s because the way    working

User · Answer

From ES6 ES2015  default parameters are in the language specification   function read file file  delete after   false         Code     just works   Reference  Default Parameters - MDN     Default function parameters allow formal parameters to be initialized with default values if no value or undefined is passed    You can also simulate default named parameters via destructuring      the        below lets you call the function without any parameters function myFor   start   5  end   1  step   -1               A         Use the variables  start    end  and  step  here                Pre ES2015   There are a lot of ways  but this is my preferred method     it lets you pass in anything you want  including false or null   typeof null     object    function foo a  b      a   typeof a      undefined    a   42    b   typeof b      undefined    b    default b

User · Answer

In ECMAScript 6 you will actually be able to write exactly what you have   function read file file  delete after   false         Code     This will set delete after to false if it s not present or undefined  You can use ES6 features like this one today with transpilers such as Babel   See the MDN article for more information

User · Answer

I would highly recommend extreme caution when using default parameter values in javascript   It often creates bugs when used in conjunction with higher order functions like forEach  map  and reduce   For example  consider this line of code     1    2    3   map parseInt       1  NaN  NaN    parseInt has an optional second parameter function parseInt s   radix 10   but map calls parseInt with three arguments   element  index  and array    I suggest you separate your required parameters form your optional default valued arguments   If your function takes 1 2  or 3 required parameters for which no default value makes sense  make them positional parameters to the function  any optional parameters should follow as named attributes of a single object  If your function takes 4 or more  perhaps it makes more sense to supply all arguments via attributes of a single object parameter   In your case I would suggest you write your deleteFile function like this   edited per instead s comments       x000D   x000D     unsafe x000D  function read file fileName  deleteAfter false    x000D      if  deleteAfter    x000D          console log  Reading and then deleting   fileName     x000D        else   x000D          console log  Just reading   fileName     x000D        x000D    x000D   x000D     better x000D  function readFile fileName  options    x000D    const deleteAfter      options  amp  amp  options deleteAfter     true   x000D    read file fileName  deleteAfter   x000D    x000D   x000D  console log  unsafe       x000D    log1 txt    log2 txt    log3 txt   map read file   x000D   x000D  console log  better       x000D    log1 txt    log2 txt    log3 txt   map readFile   x000D   x000D   x000D    Running the above snippet illustrates the dangers lurking behind default argument values for unused parameters

User · Answer

If you are using ES6  you can set default parameters in the following manner    x000D   x000D  function test  foo   1  bar   2    x000D    console log foo  bar   x000D    x000D   x000D  test 5      foo gets overwritten  bar remains default parameter x000D   x000D   x000D    If you need ES5 syntax you can do it in the following manner    x000D   x000D  function test foo  bar    x000D    foo   foo    2  x000D    bar   bar    0  x000D     x000D    console log foo  bar   x000D    x000D   x000D  test 5      foo gets overwritten  bar remains default parameter x000D   x000D   x000D    In the above syntax the OR operator is used  The OR operator always returns the first value if this can be converted to true if not it returns the righthandside value  When the function is called with no corresponding argument the parameter variable  bar in  our example  is set to undefined by the JS engine  undefined Is then converted to false and thus does the OR operator return the value 0

User · Answer

being a long time C   developer  Rookie to web development      when I first came across this situation  I did the parameter assignment in the function definition  like it is mentioned in the question  as follows    function myfunc a b 10    But beware that it doesn t work consistently across browsers  For me it worked on chrome on my desktop  but did not work on chrome on android  Safer option  as many have mentioned above is -      function myfunc a b            if  typeof b     undefined   b   10                 Intention for this answer is not to repeat the same solutions  what others have already mentioned  but to inform that parameter assignment in the function definition may work on some browsers  but don t rely on it

User · Answer

I find something simple like this to be much more concise and readable personally   function pick arg  def       return  typeof arg     undefined    def   arg      function myFunc x      x   pick x   my default

User · Answer

As an update   with ECMAScript 6 you can FINALLY set default values in function parameter declarations like so   function f  x  y   7  z   42      return x   y   z    f 1      50   As referenced by - http   es6-features org  DefaultParameterValues

User · Answer

Sounds of Future In future  you will be able to  quot spread quot  one object to another  currently as of 2019 NOT supported by Edge   - demonstration how to use that for nice default options regardless of order   x000D   x000D  function test options        var options               defaults        url   defaultURL          some   somethingDefault             override with input options           options                 var body   document getElementsByTagName  body   0       body innerHTML      lt br gt     options url           options some    test    test      test  url  myURL     test  some  somethingOfMine     test  url  overrideURL   some  andSomething     test  url  overrideURL   some  andSomething   extra  noProblem     x000D   x000D   x000D   MDN reference  https   developer mozilla org en-US docs Web JavaScript Reference Operators Spread syntax    meanwhile what Edge DOES support is Object assign    IE does not  but I really hope we can leave IE behind      Similarly you could do  x000D   x000D      function test options            var options   Object assign                 defaults            url   defaultURL              some   somethingDefault              options      override with input options                  var body   document getElementsByTagName  body   0           body innerHTML      lt br gt     options url           options some            test        test          test  url  myURL         test  some  somethingOfMine         test  url  overrideURL   some  andSomething         test  url  overrideURL   some  andSomething   extra  noProblem     x000D   x000D   x000D   EDIT  Due to comments regarding const options - the problem with using constant options in the rest of the function is actually not that you can t do that  is just that you can t use the constant variable in its own declaration - you would have to adjust the input naming to something like function test input options      const options             defaults      someKey      someDefaultValue        anotherKey   anotherDefaultValue            merge-in input options         input options              from now on use options with no problem

User · Answer

As per the syntax   function  name   param1    defaultValue1          paramN    defaultValueN           statements     you can define the default value of formal parameters  and also check undefined value by using typeof function

User · Answer

x000D   x000D  function throwIfNoValue     x000D  throw new Error  Missing argument    x000D    x000D  function foo argValue   throwIfNoValue      x000D  return argValue   x000D    x000D   x000D   x000D    Here foo   is a function which has a parameter named argValue  If we don   t pass anything in the function call here  then the function throwIfNoValue   will be called and the returned result will be assigned to the only argument argValue  This is how a function call can be used as a default parameter  Which makes the code more simplified and readable   This example has been taken from here

[javascript] Set a default parameter value for a JavaScript function

Examples related to javascript

Examples related to function

Examples related to parameters

Examples related to arguments

Examples related to default-parameters