Can actions/methods in the client controller (Javascript) and server controller (APEX) have identical names?

Question

In the documentation I found the following tip:

Use unique names for client-side and server-side actions in a component. A JavaScript function (client-side action) with the same name as a server-side action (Apex method) can lead to hard-to-debug issues.

Out of curiosity I tried doing exactly this, creating a client/Javascript controller with the same name as a method on my server/APEX controller. When I did this and triggered the client controller's action, the callback seemed to get stuck in a repeating infinite loop (as though the action was being called over and over). It ran for several thousand iterations before it locked up my Chrome tab.

If I change ONLY the name of the server/APEX controller's method, everything works as expected, with the callback being executed exactly once.

I know the documentation's advice is to not name them similarly, but I'm curious of it's actually BROKEN (as opposed to merely "not advised").

Is having identical names merely not recommended? Or is it literally broken and not allowed? If it IS allowed, what am I doing wrong to cause this infinite loop?

Component

<aura:application controller="TestSameNames">
    <ui:button label="Go" press="{!c.someFunctionName}" />
</aura:application>

Controller (client/Javascript)

({
    someFunctionName : function(component, event, helper) {
        console.log("in the Client controller");
        
        var action=component.get("c.someOtherFunctionName");
        
        action.setCallback(this, function(response) {
            if (response.getState()==="SUCCESS") {
                console.log("IN CALLBACK");
            } 
        });
        
        $A.enqueueAction(action);
    }
})

Controller (server/APEX)

public class TestSameNames {

    @AuraEnabled
    public static String someOtherFunctionName() {

    /*  IF I RENAME THIS METHOD to "someFunctionName" (and 
        adjust the client controller's call above) it works fine  */

        return 'Hey';
    }
    
}

Answer 1

I think, it is just not recommended, because if you go further ahead and try the following in your example:

Component

<aura:component controller="MyController">
    <ui:button label="Test" press="{!c.start}" />
</aura:component>

JS Controller

 start : function(component, event, helper) {
    helper.start(component);
 },
 test : function(component, event, helper) {
    console.log('in Js controller method') ;
    return 'xyz'
 }

JS Helper

start : function(component, event, helper) {
        var action = component.get('c.test');
        action.setCallback(this, function(resp) {
            var state= resp.getState();
            console.log('IN CALLBACK; STATE='+state);
            console.log('IN CALLBACK; Response='+state);
        });

        $A.enqueueAction(action);
}

And do not modify anything in the apex class.Once you click on the button you can see the following in log :

in Js controller method

IN CALLBACK; STATE="SUCCESS"

IN CALLBACK; Response="xyz"

So, the code does not break and runs fine, but at the same time it doesn't behave as expected. component.get('c.test'); statement returns a reference to JS contorller's action 'test' instead of the apex action.