Working with optional arguments in JavaScript-Collection of common programming errors

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 call this function, use the following code:

SetUploader('/Projects/ImageUpload', 'Logo', { allowedExtensions: ['jpg', 'jpeg', 'png', 'gif', 'zip'] });

Note the parameter allowedExtensions, it does not change the value.

Debugging function, allowedExtensions value is null.

What is wrong?

1. You are passing your actual allowedExtendsions parameter as the third argument which is where the multiple formal parameter appears. Put undefined before it.

   SetUploader(
      /* action */    '/Projects/ImageUpload', 
      /* elementId */ 'Logo', 
      // NEED VALUE FOR MULTIPLE HERE
      ['jpg', 'jpeg', 'png', 'gif', 'zip'])
   

   You are also never using the action parameter, instead checking and setting a global variable actionUploader.

   Typically when allowing optional arguments you have one particular argument which is a map of extra arguments.

   function (requiredParam, anotherRequiredParam, extra) {
     var optionalParam = extra ? extra.optionalParamName : defaultValue;
     ...
   }
   

2. You are passing your object as third parameter (as multiple), your allowedExtensions is fourth.

   Also you are checking variables with “Uploader” as name suffix. They are not variables that you pass.

   Next, if you would pass { allowedExtensions: ['jpg', 'jpeg', 'png', 'gif', 'zip'] } as fourth parameter to get hold of array with extensions you would have to write allowedExtensions.allowedExtensions

3. First of all your variables are not null, they are undefined and you need to check with the === operator. undefined and null are not the same, variables in JavaScript that have the declared but not initialized have the value undefined. With the === operator you make JavaScript check the type and the values you are comparing. If you only use the == operator JavaScript will attempt to type convert your variables making this:

   if (allowedExtensionsUploader == null)
   

   into this:

   if (false == false)
   

   which can lead to problems.

   Secondly you only provide three arguments to your function but you’re asking about the fourth.

   Thirdly, the fourth argument is called allowedExtensions but you are checking a variable called allowedExtensionsUploader.

   Fourthly, I think you should use jslint to check your code. It would have told you a lot of what I just wrote =)

4. Since you are passing it as the parameter multiple, as it is the third parameter.

   In JavaScript you cannot have named parameters.

    { allowedExtensions: ['jpg', 'jpeg', 'png', 'gif', 'zip'] }
   

   Is an object that has a property allowedExtensions init to an array.

5. you are passing only three arguments in the function call

   the parameter

   { allowedExtensions: ['jpg', 'jpeg', 'png', 'gif', 'zip'] }
   

   is a JSON object that will be available in “multiple” variable

   Try adding one more argument in the function call, you will get that value as the 4th parameter “allowedExtensions”

6. 1. Your arguments do not match your variables in your if statements.
   2. You should check whether the variables are undefined, not null.
   3. You should use ===, not ==.

   Use this instead:

   window.SetUploader = function(actionUploader, elementIDUploader, multipleUploader, allowedExtensionsUploader) {
       //Optional arguments
       if (actionUploader === undefined) {
         actionUploader = "/Upload";
       }
       if (elementIDUploader === undefined) {
         elementIDUploader = "file-uploader";
       }
       if (multipleUploader === undefined) {
         multipleUploader = false;
       }
       if (allowedExtensionsUploader === undefined) {
         allowedExtensionsUploader = [];
       }
   };
   
   SetUploader('/Projects/ImageUpload', 'Logo', undefined, ['jpg', 'jpeg', 'png', 'gif', 'zip']);
   

Originally posted 2013-11-09 18:45:11.