{"id":474,"date":"2018-02-27T07:00:00","date_gmt":"2018-02-27T14:00:00","guid":{"rendered":"https:\/\/coreassistance.com\/tips\/?p=474"},"modified":"2018-02-15T12:21:03","modified_gmt":"2018-02-15T19:21:03","slug":"default-values-for-arguments","status":"publish","type":"post","link":"https:\/\/coreassistance.com\/tips\/2018\/02\/27\/default-values-for-arguments\/","title":{"rendered":"Default Values for Arguments"},"content":{"rendered":"

If you don’t need to support Internet Explorer, all of the other major browsers allow you to specify default arguments in your JavaScript functions like this:<\/p>\n

function foo(argument = 'default') {\r\n    \/\/ ...\r\n}<\/code><\/pre>\n
With this code, if foo()<\/code> is called and argument<\/code> is undefined (either because the argument is missing or because it is explicitly set to undefined<\/code>), the default value of 'default'<\/code> will be assigned to argument<\/code>.<\/p>\n
Now, if you do need to support older browsers like IE, you may find yourself writing something like this:<\/p>\n
function foo(argument) {\r\n    if (!argument) {\r\n        argument = 'default';\r\n    }\r\n\r\n    \/\/ ...\r\n}<\/code><\/pre>\n
That works, but this approach will get out of hand pretty quickly as the number of arguments increases.  I’ve got good news, though!  There’s a better way:<\/p>\n
function foo(argument) {\r\n    argument = argument || 'default';\r\n\r\n    \/\/ ...\r\n}<\/code><\/pre>\n
These last two code snippets function in exactly the same way, but the second version is shorter and easier to maintain.<\/p>\n
This version works because the ||<\/code> operator (which is usually used in if<\/code> statements) will first check to see if what’s to the left can be converted to true<\/code> and, if it can, will return whatever’s on the left.  Otherwise the value on the right is returned.  This behavior is called short circuiting, and you can read more about it on MDN<\/a> if you’re curious about the specifics.<\/p>\n
This version also has the advantage of being concise without being hard to understand.  You can read this as, “Make the argument<\/code> variable equal to the original argument<\/code> value if it exists, or<\/strong> use the default value otherwise.”<\/p>\n
One word of warning:<\/strong> This second method doesn’t behave exactly like the native version described at the beginning of this tip.  The native version of default argument value assignment checks to see if argument values are undefined<\/code> or not, but the second method checks if they convert to true<\/code> or not.  That means values that convert to false<\/code>, like an empty string (''<\/code>) or a zero (0<\/code>), will trigger the default value.<\/p>\n
In other words, calling foo(0)<\/code> using the first code snippet above would assign 0<\/code> to argument<\/code> inside the function, whereas calling foo(0)<\/code> using the second or third code snippets would assign 'default'<\/code> to argument<\/code> instead (because 0<\/code> converts to false<\/code> and, thus, triggers the default value assignment).<\/p>\n","protected":false},"excerpt":{"rendered":"
Assigning default values to your function arguments may be simpler than you think.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-474","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/474","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/comments?post=474"}],"version-history":[{"count":13,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/474\/revisions"}],"predecessor-version":[{"id":559,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/474\/revisions\/559"}],"wp:attachment":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/media?parent=474"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/categories?post=474"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/tags?post=474"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}