How to overload functions in javascript

Question

Classical  non-js  approach to overloading   function myFunc       code    function myFunc overloaded      other code     Javascript wont let more than one function be defined with the same name  As such  things like this show up   function myFunc options    if options  overloaded         code        Is there a better workaround for function overloading in javascript other than passing an object with the overloads in it   Passing in overloads can quickly cause a function to become too verbose because each possible overload would then need a conditional statement  Using functions to accomplish the   code inside of those conditional statements can cause tricky situations with scopes

User · Answer

For this you need to create a function that adds the function to an object  then it will execute depending on the amount of arguments you send to the function    lt script  gt     Main function to add the methods function addMethod object  name  fn      var old   object name     object name    function        if  fn length    arguments length        return fn apply this  arguments      else if  typeof old     function         return old apply this  arguments               var ninjas        values    Dean Edwards    Sam Stephenson    Alex Russell         Here we declare the first function with no arguments passed   addMethod ninjas   find   function        return this values         Second function with one argument   addMethod ninjas   find   function name       var ret           for  var i   0  i  lt  this values length  i          if  this values i  indexOf name     0          ret push this values i        return ret           Third function with two arguments   addMethod ninjas   find   function first  last       var ret           for  var i   0  i  lt  this values length  i          if  this values i      first         last           ret push this values i        return ret            Now you can do  ninjas find    ninjas find  Sam    ninjas find  Dean    Edwards    lt  script gt

User · Answer

In javascript you can implement the function just once and invoke the function without the parameters myFunc    You then check to see if options is  undefined   function myFunc options    if typeof options     undefined        code

User · Answer

I tried to develop an elegant solution to this problem described here. And you can find the demo here. The usage looks like this:

var out = def({
    'int': function(a) {
        alert('Here is int '+a);
    },

    'float': function(a) {
        alert('Here is float '+a);
    },

    'string': function(a) {
        alert('Here is string '+a);
    },

    'int,string': function(a, b) {
        alert('Here is an int '+a+' and a string '+b);
    },
    'default': function(obj) {
        alert('Here is some other value '+ obj);
    }

});

out('ten');
out(1);
out(2, 'robot');
out(2.5);
out(true);

The methods used to achieve this:

var def = function(functions, parent) {
 return function() {
    var types = [];
    var args = [];
    eachArg(arguments, function(i, elem) {
        args.push(elem);
        types.push(whatis(elem));
    });
    if(functions.hasOwnProperty(types.join())) {
        return functions[types.join()].apply(parent, args);
    } else {
        if (typeof functions === 'function')
            return functions.apply(parent, args);
        if (functions.hasOwnProperty('default'))
            return functions['default'].apply(parent, args);        
    }
  };
};

var eachArg = function(args, fn) {
 var i = 0;
 while (args.hasOwnProperty(i)) {
    if(fn !== undefined)
        fn(i, args[i]);
    i++;
 }
 return i-1;
};

var whatis = function(val) {

 if(val === undefined)
    return 'undefined';
 if(val === null)
    return 'null';

 var type = typeof val;

 if(type === 'object') {
    if(val.hasOwnProperty('length') && val.hasOwnProperty('push'))
        return 'array';
    if(val.hasOwnProperty('getDate') && val.hasOwnProperty('toLocaleTimeString'))
        return 'date';
    if(val.hasOwnProperty('toExponential'))
        type = 'number';
    if(val.hasOwnProperty('substring') && val.hasOwnProperty('length'))
        return 'string';
 }

 if(type === 'number') {
    if(val.toString().indexOf('.') > 0)
        return 'float';
    else
        return 'int';
 }

 return type;
};

User · Answer

https   github com jrf0110 leFunc  var getItems   leFunc      string   function id          Do something         string object   function id  options          Do something else         string object function   function id  options  callback          Do something different     callback            object string function   function options  message  callback          Do something ca-raaaaazzzy     callback             getItems  123abc       Calls the first function -  string  getItems  123abc    poop  true       Calls the second function -  string object  getItems  123abc    butt  true   function          Calls the third function -  string object function  getItems  butt  true    What what   function          Calls the fourth function -  object string function

User · Answer

There are multiple aspects to argument overloading in Javascript    Variable arguments - You can pass different sets of arguments  in both type and quantity  and the function will behave in a way that matches the arguments passed to it  Default arguments - You can define a default value for an argument if it is not passed  Named arguments - Argument order becomes irrelevant and you just name which arguments you want to pass to the function    Below is a section on each of these categories of argument handling   Variable Arguments  Because javascript has no type checking on arguments or required qty of arguments  you can just have one implementation of myFunc   that can adapt to what arguments were passed to it by checking the type  presence or quantity of arguments   jQuery does this all the time   You can make some of the arguments optional or you can branch in your function depending upon what arguments are passed to it   In implementing these types of overloads  you have several different techniques you can use    You can check for the presence of any given argument by checking to see if the declared argument name value is undefined  You can check the total quantity or arguments with arguments length  You can check the type of any given argument  For variable numbers of arguments  you can use the arguments pseudo-array to access any given argument with arguments i     Here are some examples   Let s look at jQuery s obj data   method   It supports four different forms of usage   obj data  key    obj data  key   value   obj data    obj data object     Each one triggers a different behavior and  without using this dynamic form of overloading  would require four separate functions   Here s how one can discern between all these options in English and then I ll combine them all in code      get the data element associated with a particular key value obj data  key      If the first argument passed to  data   is a string and the second argument is undefined  then the caller must be using this form        set the value associated with a particular key obj data  key   value     If the second argument is not undefined  then set the value of a particular key        get all keys values obj data      If no arguments are passed  then return all keys values in a returned object        set all keys values from the passed in object obj data object     If the type of the first argument is a plain object  then set all keys values from that object     Here s how you could combine all of those in one set of javascript logic       method declaration for  data    data  function key  value         if  arguments length     0                 data               no args passed  return all keys values in an object        else if  typeof key      string                 first arg is a string  look at type of second arg          if  typeof value      undefined                      data  key   value                  set the value for a particular key            else                    data  key                   retrieve a value for a key                   else if  typeof key      object                  data object              set all key value pairs from this object        else               unsupported arguments passed                The key to this technique is to make sure that all forms of arguments you want to accept are uniquely identifiable and there is never any confusion about which form the caller is using   This generally requires ordering the arguments appropriately and making sure that there is enough uniqueness in the type and position of the arguments that you can always tell which form is being used   For example  if you have a function that takes three string arguments   obj query  firstArg    secondArg    thirdArg      You can easily make the third argument optional and you can easily detect that condition  but you cannot make only the second argument optional because you can t tell which of these the caller means to be passing because there is no way to identify if the second argument is meant to be the second argument or the second argument was omitted so what s in the second argument s spot is actually the third argument   obj query  firstArg    secondArg    obj query  firstArg    thirdArg      Since all three arguments are the same type  you can t tell the difference between different arguments so you don t know what the caller intended   With this calling style  only the third argument can be optional   If you wanted to omit the second argument  it would have to be passed as null  or some other detectable value  instead and your code would detect that   obj query  firstArg   null   thirdArg        Here s a jQuery example of optional arguments   both arguments are optional and take on default values if not passed   clone  function  dataAndEvents  deepDataAndEvents         dataAndEvents   dataAndEvents    null   false   dataAndEvents      deepDataAndEvents   deepDataAndEvents    null   dataAndEvents   deepDataAndEvents       return this map  function              return jQuery clone  this  dataAndEvents  deepDataAndEvents                 Here s a jQuery example where the argument can be missing or any one of three different types which gives you four different overloads   html  function  value         if   value     undefined             return this 0   amp  amp  this 0  nodeType     1               this 0  innerHTML replace rinlinejQuery                    null          See if we can take a shortcut and just use innerHTML       else if   typeof value      string   amp  amp   rnoInnerhtml test  value    amp  amp           jQuery support leadingWhitespace     rleadingWhitespace test  value     amp  amp           wrapMap   rtagName exec  value                1  toLowerCase                  value   value replace rxhtmlTag    lt  1 gt  lt   2 gt              try               for   var i   0  l   this length  i  lt  l  i                          Remove element nodes and prevent memory leaks                 if   this i  nodeType     1                         jQuery cleanData  this i  getElementsByTagName                             this i  innerHTML   value                                              If using innerHTML throws an exception  use the fallback method           catch e                this empty   append  value                     else if   jQuery isFunction  value               this each function i               var self   jQuery  this                 self html  value call this  i  self html                          else           this empty   append  value               return this         Named Arguments  Other languages  like Python  allow one to pass named arguments as a means of passing only some arguments and making the arguments independent of the order they are passed in   Javascript does not directly support the feature of named arguments   A design pattern that is commonly used in its place is to pass a map of properties values   This can be done by passing an object with properties and values or in ES6 and above  you could actually pass a Map object itself   Here s a simple ES5 example   jQuery s   ajax   accepts a form of usage where you just pass it a single parameter which is a regular Javascript object with properties and values   Which properties you pass it determine which arguments options are being passed to the ajax call   Some may be required  many are optional   Since they are properties on an object  there is no specific order   In fact  there are more than 30 different properties that can be passed on that object  only one  the url  is required   Here s an example     ajax  url   http   www example com somepath   data  myArgs  dataType   json    then function result           process result here       Inside of the   ajax   implementation  it can then just interrogate which properties were passed on the incoming object and use those as named arguments   This can be done either with for  prop in obj  or by getting all the properties into an array with Object keys obj  and then iterating that array   This technique is used very commonly in Javascript when there are large numbers of arguments and or many arguments are optional   Note  this puts an onus on the implementating function to make sure that a minimal valid set of arguments is present and to give the caller some debug feedback what is missing if insufficient arguments are passed  probably by throwing an exception with a helpful error message    In an ES6 environment  it is possible to use destructuring to create default properties values for the above passed object   This is discussed in more detail in this reference article   Here s one example from that article   function selectEntries   start 0  end -1  step 1                           This creates default properties and values for the start  end and step properties on an object passed to the selectEntries   function   Default values for function arguments  In ES6  Javascript adds built-in language support for default values for arguments   For example   function multiply a  b   1      return a b     multiply 5      5   Further description of the ways this can be used here on MDN

User · Answer

No Problem with Overloading in JS   The pb how to maintain a clean code when overloading function     You can use a  forward to have clean code   based on two things     Number of arguments  when calling the function    Type of arguments  when calling the function      function myFunc          return window  myFunc   arguments length Array from arguments  map  arg   gt typeof arg  join          arguments                 one argument  amp  this argument is string      function myFunc 1 string              ------------        one argument  amp  this argument is object      function myFunc 1 object             ----------       two arguments  amp  those arguments are both string      function myFunc 2 string string              --------       Three arguments  amp  those arguments are   id number  name string   callback function       function myFunc 3 number string function                let args arguments                new Person args 0  args 1   onReady args 3              --- And so on

User · Answer

Check this out   http   www codeproject com Articles 688869 Overloading-JavaScript-Functions  Basically in your class  you number your functions that you want to be overloaded and then with one function call you add function overloading  fast and easy

User · Answer

Since JavaScript doesn t have function overload options object can be used instead   If there are one or two required arguments  it s better to keep them separate from the options object   Here is an example on how to use options object and populated values to default value in case if value was not passed in options object   function optionsObjectTest x  y  opts        opts   opts           default to an empty options object      var stringValue   opts stringValue     string default value       var boolValue     opts boolValue     coerces value to boolean with a double negation pattern     var numericValue   opts numericValue     undefined   123   opts numericValue       return   x     x      y     y      stringValue      stringValue       boolValue     boolValue      numericValue     numericValue             here is an example on how to use options object

User · Answer

You cannot do method overloading in strict sense. Not like the way it is supported in java or c#.

The issue is that JavaScript does NOT natively support method overloading. So, if it sees/parses two or more functions with a same names it’ll just consider the last defined function and overwrite the previous ones.

One of the way I think is suitable for most of the case is follows -

Lets say you have method

function foo(x)
{
}

Instead of overloading method which is not possible in javascript you can define a new method

fooNew(x,y,z)
{
}

and then modify the 1st function as follows -

function foo(x)
{
  if(arguments.length==2)
  {
     return fooNew(arguments[0],  arguments[1]);
  }
}

If you have many such overloaded method consider using switch than just if-else statements.

(more details) PS: Above link goes to my personal blog that has additional details on this.

User · Answer

I like to add sub functions within a parent function to achieve the ability to differentiate between argument groups for the same functionality   var doSomething   function         var foo      var bar      doSomething withArgSet1   function arg0  arg1        var obj   new doSomething           do something the first way     return obj      doSomething withArgSet2   function arg2  arg3        var obj   new doSomething           do something the second way     return obj

User · Answer

What you are trying to achieve is best done using the function's local arguments variable.

function foo() {
    if (arguments.length === 0) {
        //do something
    }
    if (arguments.length === 1) {
        //do something else
    }
}

foo(); //do something
foo('one'); //do something else

You can find a better explanation of how this works here.

User · Answer

Overloading a function in JavaScript can be done in many ways. All of them involve a single master function that either performs all the processes, or delegates to sub-functions/processes.

One of the most common simple techniques involves a simple switch:

function foo(a, b) {
    switch (arguments.length) {
    case 0:
        //do basic code
        break;
    case 1:
        //do code with `a`
        break;
    case 2:
    default:
        //do code with `a` & `b`
        break;
    }
}

A more elegant technique would be to use an array (or object if you're not making overloads for every argument count):

fooArr = [
    function () {
    },
    function (a) {
    },
    function (a,b) {
    }
];
function foo(a, b) {
    return fooArr[arguments.length](a, b);
}

That previous example isn't very elegant, anyone could modify fooArr, and it would fail if someone passes in more than 2 arguments to foo, so a better form would be to use a module pattern and a few checks:

var foo = (function () {
    var fns;
    fns = [
        function () {
        },
        function (a) {
        },
        function (a, b) {
        }
    ];
    function foo(a, b) {
        var fnIndex;
        fnIndex = arguments.length;
        if (fnIndex > foo.length) {
            fnIndex = foo.length;
        }
        return fns[fnIndex].call(this, a, b);
    }
    return foo;
}());

Of course your overloads might want to use a dynamic number of parameters, so you could use an object for the fns collection.

var foo = (function () {
    var fns;
    fns = {};
    fns[0] = function () {
    };
    fns[1] = function (a) {
    };
    fns[2] = function (a, b) {
    };
    fns.params = function (a, b /*, params */) {
    };
    function foo(a, b) {
        var fnIndex;
        fnIndex = arguments.length;
        if (fnIndex > foo.length) {
            fnIndex = 'params';
        }
        return fns[fnIndex].apply(this, Array.prototype.slice.call(arguments));
    }
    return foo;
}());

My personal preference tends to be the switch, although it does bulk up the master function. A common example of where I'd use this technique would be a accessor/mutator method:

function Foo() {} //constructor
Foo.prototype = {
    bar: function (val) {
        switch (arguments.length) {
        case 0:
            return this._bar;
        case 1:
            this._bar = val;
            return this;
        }
    }
}

User · Answer

I am using a bit different overloading approach based on arguments number. However i believe John Fawcett's approach is also good. Here the example, code based on John Resig's (jQuery's Author) explanations.

// o = existing object, n = function name, f = function.
    function overload(o, n, f){
        var old = o[n];
        o[n] = function(){
            if(f.length == arguments.length){
                return f.apply(this, arguments);
            }
            else if(typeof o == 'function'){
                return old.apply(this, arguments);
            }
        };
    }

usability:

var obj = {};
overload(obj, 'function_name', function(){ /* what we will do if no args passed? */});
overload(obj, 'function_name', function(first){ /* what we will do if 1 arg passed? */});
overload(obj, 'function_name', function(first, second){ /* what we will do if 2 args passed? */});
overload(obj, 'function_name', function(first,second,third){ /* what we will do if 3 args passed? */});
//... etc :)

User · Answer

How about using spread operator as a parameter  The same block can be called with Multiple parameters  All the parameters are added into an array and inside the method you can loop in based on the length      function mName    opt           console log opt              mName 1 2 3 4      1 2 3 4      mName 1 2 3      1 2 3

[javascript] How to overload functions in javascript?

The answer is

No Problem with Overloading in JS , The pb how to maintain a clean code when overloading function ?

Examples related to javascript

Tags