33

Does JS support two functions with the same name and different parameters ?

function f1(a, b)
{
// a and b are numbers
}

function f1(a, b, c)
{
// a is a string
//b and c are numbers
}

Can I use those JS function for IE7, FF, Opera with no problem?

6 Answers 6

44

JavaScript doesn't support what you would call in other languages method overloading, but there are multiple workarounds, like using the arguments object, to check with how many arguments a function has been invoked:

function f1(a, b, c) {
  if (arguments.length == 2) {
    // f1 called with two arguments
  } else if (arguments.length == 3) {
    // f1 called with three arguments
  }
}

Additionally you could type-check your arguments, for Number and String primitives is safe to use the typeof operator:

function f1(a, b, c) {
  if (typeof a == 'number' && typeof b == 'number') {
    // a and b are numbers
  } else if (typeof a == 'string' && typeof b == 'number' &&
             typeof c == 'number') {
    // a is a string, b and c are numbers
  }
}

And there are much more sophisticated techniques like the one in the following article, that takes advantage of some JavaScript language features like closures, function application, etc, to mimic method overloading:

Sign up to request clarification or add additional context in comments.

Comments

7

No, you can't use function overloading in JS.

But, you can declare just the version with 3 parameters, and then check whether the third argument === undefined, and provide differentiated behaviour on that basis.

2 Comments

In the event that the caller passes a 3rd argument but its value is undefined this test would fail. Probably better if the function tests arguments.length instead.
If the caller uses undefined as the 3rd argument, I'd take that to signal that they'd like the function to be treated as though only two were passed in. I don't really see any other legitimate purpose for passing in undefined.
3

No, that will not work, only the 2nd function will be defined on your page. Here's a source.

Comments

2

Javascript only uses the function that was defined last.

http://weblogs.asp.net/jgalloway/archive/2005/10/02/426345.aspx

You will need to implement your own logic inside the function to determine which parameters were passed in.

Comments

1

No you can't do that ... unless it is OK with you to only have your last definition hold.

Comments

0

You can also use instanceof, example with basic polymorphism.

First create a superclass (ball)

// superclass
function Ball() {
    this.play = function() {
        alert("Ball throw");
    };
}

and now for some subclasses (types of balls)

// subclass
function Basketball() {
    this.play = function() {
        alert("basketball throw");
    };
}
// subclass
function Soccerball() {
    this.play = function() {
        alert("soccer ball kick/throw");
        console.debug("here");
    };
}
// subclass
function Baseball() {
    this.play = function() {
        alert("strike 3 you're out");
        console.debug("here");
    };
}

Give them Ball functionality, aka set their superclass via prototype

// set subclass functionality
Basketball.prototype = new Ball();
Soccerball.prototype = new Ball();
Baseball.prototype = new Ball();

Some polymorphism (create a bunch of balls and play with them all, but play based on type)

var bunchOfBalls = [new Baseball(), new Soccerball(), new Basketball()];
for (var i = 0; i < bunchOfBalls.length; i++) {
    bunchOfBalls[i].play();
}

Now write a function that takes a ball but only want to to work for specific type of balls (mimic function overloading, more or less)

//overloading dependent upon type
function BasketbalOrBaseballOnlyPlay(aBall) {
    if (aBall instanceof Basketball) {
        //special basketball function
    }
    if (aBall instanceof Baseball) {
        //special baseball function
    }

}

If aBall is a Basketball so aBall = new Basketball(); then aBall instanceof Basketball would return true for Basketball and false for baseball but true for Ball.

So aBall instanceof Ball would return true because a Basketball is a Ball.

See code live at http://jsfiddle.net/kLCPB/

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.