{"id":397,"date":"2022-08-30T15:00:40","date_gmt":"2022-08-30T15:00:40","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/09\/working-with-optional-arguments-in-javascript-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:00:40","modified_gmt":"2022-08-30T15:00:40","slug":"working-with-optional-arguments-in-javascript-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/working-with-optional-arguments-in-javascript-collection-of-common-programming-errors\/","title":{"rendered":"Working with optional arguments in JavaScript-Collection of common programming errors"},"content":{"rendered":"

I created a function like this:<\/p>\n

window.SetUploader = function(action, elementID, multiple, allowedExtensions) {\n    \/\/Optional arguments\n    if (actionUploader == null) {\n      actionUploader = \"\/Upload\";\n    }\n    if (elementIDUploader == null) {\n      elementIDUploader = \"file-uploader\";\n    }\n    if (multipleUploader == null) {\n      multipleUploader = false;\n    }\n    if (allowedExtensions == null) {\n      allowedExtensions = [];\n    }\n\n    \/\/Function\n     .....\n};\n<\/code><\/pre>\n
To call this function, use the following code:<\/p>\n
SetUploader('\/Projects\/ImageUpload', 'Logo', { allowedExtensions: ['jpg', 'jpeg', 'png', 'gif', 'zip'] });\n<\/code><\/pre>\n
Note the parameter allowedExtensions<\/code>, it does not change the value.<\/p>\n
Debugging function, allowedExtensions<\/code> value is null<\/strong>.<\/p>\n
What is wrong?<\/strong><\/p>\n
    \n
  1. \n
    You are passing your actual allowedExtendsions<\/code> parameter as the third argument which is where the multiple<\/code> formal parameter appears. Put undefined<\/code> before it.<\/p>\n
    SetUploader(\n   \/* action *\/    '\/Projects\/ImageUpload', \n   \/* elementId *\/ 'Logo', \n   \/\/ NEED VALUE FOR MULTIPLE HERE\n   ['jpg', 'jpeg', 'png', 'gif', 'zip'])\n<\/code><\/pre>\n
    You are also never using the action<\/code> parameter, instead checking and setting a global variable actionUploader<\/code>.<\/p>\n
    Typically when allowing optional arguments you have one particular argument which is a map of extra arguments.<\/p>\n
    function (requiredParam, anotherRequiredParam, extra) {\n  var optionalParam = extra ? extra.optionalParamName : defaultValue;\n  ...\n}\n<\/code><\/pre>\n<\/li>\n
  2. \n
    You are passing your object as third parameter (as multiple), your allowedExtensions is fourth.<\/p>\n
    Also you are checking variables with “Uploader” as name suffix. They are not variables that you pass.<\/p>\n
    Next, if you would pass { allowedExtensions: ['jpg', 'jpeg', 'png', 'gif', 'zip'] }<\/code> as fourth parameter to get hold of array with extensions you would have to write allowedExtensions.allowedExtensions<\/code><\/p>\n<\/li>\n
  3. \n
    First of all your variables are not null, they are undefined and you need to check with the ===<\/code> operator. undefined and null are not the same, variables in JavaScript that have the declared but not initialized have the value undefined. With the ===<\/code> operator you make JavaScript check the type and the values you are comparing. If you only use the ==<\/code> operator JavaScript will attempt to type convert your variables making this:<\/p>\n
    if (allowedExtensionsUploader == null)\n<\/code><\/pre>\n
    into this:<\/p>\n
    if (false == false)\n<\/code><\/pre>\n
    which can lead to problems.<\/p>\n
    Secondly you only provide three arguments to your function but you’re asking about the fourth.<\/p>\n
    Thirdly, the fourth argument is called allowedExtensions<\/strong> but you are checking a variable called allowedExtensionsUploader<\/strong>.<\/p>\n
    Fourthly, I think you should use jslint to check your code. It would have told you a lot of what I just wrote =)<\/p>\n<\/li>\n
  4. \n
    Since you are passing it as the parameter multiple<\/code>, as it is the third parameter<\/strong>.<\/p>\n
    In JavaScript you cannot have named parameters.<\/strong><\/p>\n
     { allowedExtensions: ['jpg', 'jpeg', 'png', 'gif', 'zip'] }\n<\/code><\/pre>\n
    Is an object that has a property allowedExtensions<\/code> init to an array.<\/p>\n<\/li>\n
  5. \n
    you are passing only three arguments in the function call<\/p>\n
    the parameter<\/p>\n
    { allowedExtensions: ['jpg', 'jpeg', 'png', 'gif', 'zip'] }\n<\/code><\/pre>\n
    is a JSON object that will be available in “multiple” variable<\/p>\n
    Try adding one more argument in the function call, you will get that value as the 4th parameter “allowedExtensions”<\/p>\n<\/li>\n
  6. \n
      \n
    1. Your arguments do not match your variables in your if statements.<\/li>\n
    2. You should check whether the variables are undefined<\/code>, not null<\/code>.<\/li>\n
    3. You should use ===<\/code>, not ==<\/code>.<\/li>\n<\/ol>\n
      Use this instead:<\/p>\n
      window.SetUploader = function(actionUploader, elementIDUploader, multipleUploader, allowedExtensionsUploader) {\n    \/\/Optional arguments\n    if (actionUploader === undefined) {\n      actionUploader = \"\/Upload\";\n    }\n    if (elementIDUploader === undefined) {\n      elementIDUploader = \"file-uploader\";\n    }\n    if (multipleUploader === undefined) {\n      multipleUploader = false;\n    }\n    if (allowedExtensionsUploader === undefined) {\n      allowedExtensionsUploader = [];\n    }\n};\n\nSetUploader('\/Projects\/ImageUpload', 'Logo', undefined, ['jpg', 'jpeg', 'png', 'gif', 'zip']);\n<\/code><\/pre>\n<\/li>\n<\/ol>\n
      Originally posted 2013-11-09 18:45:11. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
      I created a function like this: window.SetUploader = function(action, elementID, multiple, allowedExtensions) { \/\/Optional arguments if (actionUploader == null) { actionUploader = “\/Upload”; } if (elementIDUploader == null) { elementIDUploader = “file-uploader”; } if (multipleUploader == null) { multipleUploader = false; } if (allowedExtensions == null) { allowedExtensions = []; } \/\/Function ….. }; To […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-397","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=397"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/397\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}