---
schema_version: "1"
id: e08e6f5b5bc0006f85dff8479f472eaa2ffdf2da9e3f52ee8690b62a1797faa4
title: Sharing JavaScript Code Across Components
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/security/security-share-code.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/security-share-code.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: ef468f0a7488519208f05d243daecd118868284a387e59941287eaa6b9edb82a
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# Sharing JavaScript Code Across Components

You can build simple Lightning components that are entirely self-contained. However, if you build more complex applications, you probably want to share code, or even client-side data, between components.

The `<ltng:require>` tag enables you to load external JavaScript libraries after you upload them as static resources. You can also use `<ltng:require>` to import your own JavaScript libraries of utility methods.

Let’s look at a simple counter library that provides a `getValue()` method, which returns the current value of the counter, and an `increment()` method, which increments the value of that counter.

## Create the JavaScript Library

1.  In the Developer Console, click **File** | **New** | **Static Resource**.
2.  Enter `counter` in the `Name` field.
3.  Select `text/javascript` in the `MIME Type` field.
4.  Click **Submit**.
5.  Enter this code and click **File** | **Save**.

    ```javascript
    window._counter = (function() {
        var value = 0; // private
    
        return { //public API
            increment: function() {
                value = value + 1;
                return value;
            },
    
            getValue: function() {
                return value;
            }
        };
    }());
    ```


This code uses the JavaScript module pattern. Using this closure-based pattern, the `value` variable remains private to your library. Components using the library can’t access `value` directly.

The most important line of the code to note is:

```javascript
window._counter = (function() {
```

You must attach `_counter` to the `window` object as a requirement of JavaScript strict mode, which is implicitly enabled in Lightning Locker. Even though `window._counter` looks like a global declaration, `_counter` is attached to the Lightning Locker secure window object and therefore is a namespace variable, not a global variable.

If you use `_counter` instead of `window._counter`, `_counter` isn’t available. When you try to access it, you get an error similar to:

```nolang
Action failed: ... [_counter is not defined]
```

## Use the JavaScript Library

Let’s use the library in a `MyCounter` component that has a simple UI to exercise the `counter` methods.

```nolang
<!--c:MyCounter-->
<aura:component access="global">
    <ltng:require scripts="{!$Resource.counter}"
                  afterScriptsLoaded="{!c.getValue}"/>
    <aura:attribute name="value" type="Integer"/>
    
    <h1>MyCounter</h1>
    <p>{!v.value}</p>
    <lightning:button label="Get Value" onclick="{!c.getValue}"/>
    <lightning:button label="Increment" onclick="{!c.increment}"/>
</aura:component>
```

The `<ltng:require>` tag loads the counter library and calls the `getValue` action in the component’s client-side controller after the library is loaded.

Here’s the client-side controller.

```javascript
/* MyCounterController.js */
({
    getValue : function(component, event, helper) {
        component.set("v.value", _counter.getValue());
    },

    increment : function(component, event, helper) {
        component.set("v.value", _counter.increment());
    }
})
```

You can access properties of the `window` object without having to type the `window.` prefix. Therefore, you can use `_counter.getValue()` as shorthand for `window._counter.getValue()`.

Click the buttons to get the value or increment it.

Our counter library shares the counter value between any components that use the library. If you need each component to have a separate counter, you could modify the counter implementation. To see the per-component code and for more details, see this blog post about [Modularizing Code in Lightning Components](https://developer.salesforce.com/blogs/developer-relations/2016/12/lightning-components-code-sharing.html).

**See Also**  


-   [Using External JavaScript Libraries](https://developer.salesforce.com/docs/platform/aura-platform/js/js-libs-platform.md)
-   [*Security for Lightning Components:* JavaScript Strict Mode Enforcement](https://developer.salesforce.com/docs/platform/lightning-components-security/guide/js-strict-mode-intro.html)