Aura Components: Two methods with same name in controller or helper files.

If you have worked with aura components,you know we have component file, controller.js, helper.js etc. Also we have apex class with aura enabled methods where server side logic is present.

We are going to discuss some interesting stuff here !

Have you ever tried having two methods with same name in controller.js file or helper.js file in your aura components?

Do you think salesforce will allow me to save the file in such scenarios ?

Or if it allows, will it give some error on load of component or if that method is called from some where?

Lets check this.

We will create an aura component, lets name it as DemoBlog. We will add following code to Component and controller files:

DemoBlog.cmp

<aura:component controller="parentApex">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
<lightning:button variant="brand" label="Scenario 1" title="Brand action" onclick="{! c.handleClickCtrl}" />
    
</aura:component>

DemoBlogController.js

({
    doInit : function(component, event, helper) {
        console.log('Inside init method');
        
    },
    handleClickCtrl : function (component, event, helper) {
        console.log('Inside handle Click controller first');
    },
    
    handleClickCtrl : function (component, event, helper) {
        console.log('Inside handle Click controller second');
    },
    
})

You will notice we are able to save two functions with same name in controller file.

We have created a button on click of which we have called a handleClickCtrl mtethod. But wait, we have two methods of name handleClickCtrl in controller file. Now we will add our component into aura application and preview the Application. You will notice no error on application loadding !

If you click on Scneario 1 button and observe the console log.You will see the console log statement of second method will be displayed. Again no error !

What do you think is happenig over here. If you will closely observe the format of controller file or helper file in aura component, you will definitely get some idea.

Yes, it is nothing but a json format.
And What happens if you have two keys with same name in JSON string. If you try to access it, it doesn’t give error, moreover, the second key always overrides the first one and if you try to access the key, it will always return value corresponding to second key.

{name: “Demo”, age: 31, city: “New York”,name :”Demo2″} – This is valid JSON.

Similarly, we can have two methods with same name and same paramters in helper.js file also.

Stay tuned for more such interesting scenarios !

Advertisement