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, Oct 31 '18 at 13:56
See also https://stackoverflow.com/questions/456177/function-overloading-in-javascript-best-practices — trincot, Oct 31 '18 at 13:59
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, Oct 31 '18 at 14:10

Johan · Accepted Answer · 2018-10-31T14:04:44.483

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

score 4 · Answer 2 · answered Oct 31 '18 at 13:57

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 '18 at 13:57

Sxilderik

796
6
20

How to call JavaScript function with same name but similar arguments

2 Answers2