Sharing JavaScript Code in a Component Bundle

Put functions that you want to reuse in the component’s helper. Helper functions also enable specialization of tasks, such as processing data and firing server-side actions.

A helper function can be called from any JavaScript code in a component’s bundle, such as from a client-side controller or renderer.

Helper functions are similar to client-side controller functions in shape, surrounded by parentheses and curly braces to denote a JavaScript object in object-literal notation containing a map of name-value pairs. A helper function can pass in any arguments required by the function, such as the component it belongs to, a callback, or any other objects.

({
    helperMethod1 : function() {
        // logic here
    },

    helperMethod2 : function(component) {
        // logic here
        this.helperMethod3(var1, var2);
    },

     helperMethod3 : function(var1, var2) {
         // do something with var1 and var2 here
    }
})

Creating a Helper

A helper resource is part of the component bundle and is auto-wired via the naming convention, <componentName>Helper.js.

To create a helper using the Developer Console, click HELPER in the sidebar of the component. This helper file is valid for the scope of the component to which it’s auto-wired.

Using a Helper in a Controller

Add a helper argument to a controller function to enable the function to use the helper. Specify (component, event, helper) in the controller. These are standard parameters and you don't have to access them in the function. You can also pass in an instance variable as a parameter, for example, createExpense: function(component, expense){...}, where expense is a variable defined in the component.

The following code shows you how to call the updateItem helper function in a controller, which can be used with a custom event handler.

/* controller */
({
    newItemEvent: function(component, event, helper) {
        helper.updateItem(component, event.getParam("item"));
    }
})

Helper functions are local to a component, improve code reuse, and move the heavy lifting of JavaScript logic away from the client-side controller where possible. The following code shows the helper function, which takes in the value parameter set in the controller via the item argument. The code walks through calling a server-side action and returning a callback but you can do something else in the helper function.

/* helper */
({
    updateItem : function(component, item, callback) {
        //Update the items via a server-side action
        var action = component.get("c.saveItem");
        action.setParams({"item" : item});
        //Set any optional callback and enqueue the action
        if (callback) {
            action.setCallback(this, callback);
        }
        $A.enqueueAction(action);
    }
})

Using a Helper in a Renderer

Add a helper argument to a renderer function to enable the function to use the helper. In the renderer, specify (component, helper) as parameters in a function signature to enable the function to access the component's helper. These are standard parameters and you don't have to access them in the function. The following code shows an example on how you can override the afterRender() function in the renderer and call open in the helper method.

detailsRenderer.js

({
    afterRender : function(component, helper){
        helper.open(component, null, "new");
    }
})

detailsHelper.js

({
    open : function(component, note, mode, sort){
        if(mode === "new") {
            //do something
        }
        // do something else, such as firing an event
    }
})