title: Unordered function arguments in Javascript
body: <p>Below is a regular function with named parameters:</p>
  
  <pre><code>function who(name, age, isMale, weight)
  {
      alert(name + ' (' + (isMale ? 'male' : 'female') + '), ' + age + ' years old, ' + weight + ' kg.');
  }
  
  who('Jack', 30, true, 90); //this is OK.
  </code></pre>
  
  <p>What I want to achive is; whether you pass the arguments in order or not; the function should produce a similar result (if not the same):</p>
  
  <pre><code>who('Jack', 30, true, 90); //should produce the same result with the regular function
  who(30, 90, true, 'Jack'); //should produce the same result
  who(true, 30, 'Jack', 90); //should produce the same result
  </code></pre>
  
  <p>This enables you to pass a list of arguments in <strong>any order</strong> but still will be mapped to a logical order. My approach up to now is something like this:</p>
  
  <pre><code>function who()
  {
      var name = getStringInArgs(arguments, 0); //gets first string in arguments
      var isMale = getBooleanInArgs(arguments, 0); //gets first boolean in arguments
      var age = getNumberInArgs(arguments, 0); //gets first number in arguments
      var weight = getNumberInArgs(arguments, 1); //gets second number in arguments
  
      alert(name + ' (' + (isMale ? 'male' : 'female') + '), ' + age + ' years old, ' + weight + ' kg.');
  }
  </code></pre>
  
  <p>There is a little problem here; functions such as <code>getStringInArgs()</code> and <code>getNumberInArgs()</code> go through all the arguments each time to find the arg by type at the specified position. I could iterate through args only once and keep flags for the positions but then I would have to do it inside the who() function.</p>
  
  <p>Do you think this approach is logical and the only way? Is there a better way to do it?</p>
  
  <p><strong>EDIT 1:</strong> Code above actually works. I just want to know if there is a better way. </p>
  
  <p><strong>EDIT 2</strong>: You may wonder if this is necessary or whether it makes sense. The main reason is: I'm writing a jQuery function which adds a specific style to a DOM element. I want this function to treat its arguments like shorthand CSS values. </p>
  
  <p>Example: </p>
  
  <pre><code>border: 1px solid red;
  border: solid 1px red; /*will produce the same*/
  </code></pre>
  
  <p>So; here is the real and final code upto now:</p>
  
  <pre><code>(function($){
  function getArgument(args, type, occurrence, defaultValue)
  {
      if (args.length == 0) return defaultValue;
  
      var count = 0;
      for(var i = 0; i &lt; args.length; i++)
      {
            if (typeof args[i] === type)
            {
                if (count == occurrence) { return args[i]; }
                else { count++; }
            }
      }
      return defaultValue;
  }
  
  $.fn.shadow = function()
  {
      var blur = getArgument(arguments, 'number', 0, 3);
      var hLength = getArgument(arguments, 'number', 1, 0);
      var vLength = getArgument(arguments, 'number', 2, 0);
      var color = getArgument(arguments, 'string', 0, '#000');
      var inset = getArgument(arguments, 'boolean', 0, false);
      var strInset = inset ? 'inset ' : '';
  
      var sValue = strInset + hLength + 'px ' + vLength + 'px ' + blur + 'px ' + color;
      var style = {
          '-moz-box-shadow': sValue,
          '-webkit-box-shadow': sValue,
          'box-shadow': sValue
      };
  
      return this.each(function()
      {
          $(this).css(style);
      });
  }
  })(jQuery);
  </code></pre>
  
  <p><strong>Usage</strong>:</p>
  
  <pre><code>$('.dropShadow').shadow(true, 3, 3, 5, '#FF0000');
  $('.dropShadow').shadow(3, 3, 5, '#FF0000', true);
  $('.dropShadow').shadow();
  </code></pre>