How to call JavaScript function with same name but similar arguments

Question

I have 2 JavaScript functions that are similar but one of them has a hardcoded variable while the other function's variable is to be defined when called upon. Sorry if what i am talking doesn't make sense but here is the code so you can understand it more easily:

    function calculateCircumference()
    {
        var radius = 3;
        var circumference = Math.PI * 2 * radius;
        console.log("The circumference is " + circumference);
    }
    
    function calculateArea()
    {
        var radius = 3;
        var area = Math.PI * radius * radius;
        console.log("The area is " + area);
    }
    
    function calculateCircumference(radius)
    {
        var circumference = Math.PI * 2*radius;
        console.log("The circumference is " + circumference);
    }
    
    function calculateArea(radius)
    {
        var area = Math.PI * radius*radius;
        console.log("The area is " + area);
    }
    
    calculateCircumference();
    calculateArea();
    calculateCircumference(5);
    calculateArea(9);

Output:

The circumference is NaN
The area is NaN
The circumference is 31.41592653589793
The area is 254.46900494077323

I understand that if i change the function name of the second calculateCircumference and calculateArea , the whole code will work but what am i doing wrong that is showing NaN in the output when both of the function names are the same?

Or is this whole thing just plain wrong and not possible?

Any help is much appreciated, thank you

When you re-use the function name, the original function goes away. A name can only be used for one purpose in any given scope. — Pointy
– Pointy, Commented Oct 31, 2018 at 13:56
It is called: IMPOSSIBLE........ There is no function overloading in JavaScript.... just have one method and when you redefine it, it just replaces the other one. — epascarello
– epascarello, Commented Oct 31, 2018 at 14:10

Johan · Accepted Answer · 2018-10-31 14:04:44Z

Your initial question describes function overloading, however JavaScript doesn't support it (without hacks). Instead, what will solve your issue is default parameters which is possible.

Since ES6 you can set default parameters directly in the function declaration:

function calculateCircumference(radius=3) {
    var circumference = Math.PI * 2 * radius;
    console.log("The circumference is " + circumference);
}

calculateCircumference();
calculateCircumference(5);

Output:

The circumference is 18.84955592153876
The circumference is 31.41592653589793

For pre-ES6 however, you need to check if the variable is set inside the function:

    function calculateCircumference(radius) {
        radius = typeof radius !== 'undefined' ? radius : 3;
        var circumference = Math.PI * 2 * radius;
        console.log("The circumference is " + circumference);
    }

    calculateCircumference();
    calculateCircumference(5);

Output:

The circumference is 18.84955592153876
The circumference is 31.41592653589793

Sxilderik · Accepted Answer · 2018-10-31 13:57:26Z

4

use a default value

function calculateArea(radius = 3)
{
    var area = Math.PI * radius*radius;
    console.log("The area is " + area);
}

calling calculateArea() without arguments will default to using 3 as the radius

answered Oct 31, 2018 at 13:57

Sxilderik

7987 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to call JavaScript function with same name but similar arguments

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related