---
schema_version: "1"
id: 197bb2b358ce69663589a914d8245ecf34dd5e232c2ab0a89feb1e3064c7b9f0
title: Sharing JavaScript Code in a Component Bundle
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/js/js-helper.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/js-helper.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 6adae02ad2eb985d24a084c1b1dbebac9372389a62a4b2a31a77e6441e9848a1
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# 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 queueing server-side actions. 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.

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.

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

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

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

To call another function in the same helper, use the syntax: `this.methodName`, where `this` is a reference to the helper itself. For example, `helperMethod2` calls `helperMethod3` with this code.

```javascript
this.helperMethod3(var1, var2);
```

## 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.

This controller code calls an `updateItem` helper function.

<!-- otherprops: set_clipboard -->

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

Here’s the helper that contains the `updateItem` function called by the controller.

<!-- otherprops: set_clipboard -->

```javascript
/* 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);
  },
});
```

The `updateItem` function accepts three parameters.

1.  `component`—The component to which the helper belongs.
2.  `item`—An item that’s set as an `item` parameter for the `saveItem` Apex action.
3.  `callback`—An optional callback to call after the `saveItem` Apex action returns. In our example, the `newItemEvent` controller method passes in only two arguments so there’s no callback.

## 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

<!-- otherprops: set_clipboard -->

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

### detailsHelper.js

<!-- otherprops: set_clipboard -->

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

**See Also**

- [Create a Custom Renderer](https://developer.salesforce.com/docs/platform/aura-platform/guide/js-renderers.md)
- [Component Bundles](https://developer.salesforce.com/docs/platform/aura-platform/components/components-bundle.md)
- [Handling Events with Client-Side Controllers](https://developer.salesforce.com/docs/platform/aura-platform/guide/js-client-side-controller.md)