# JavaScript files

JavaScript files help organize custom functions and variables. They're perfect for storing reusable helpers and utilities within components and actions.

You can create a JS file from the *Actions* panel - simply select this option after clicking on the *plus* sign.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2Fngn5BUhBWzGcdFECpl2Y%2FCleanShot%202024-12-24%20at%2015.22.11%402x-min-min.png?alt=media&#x26;token=09cd025a-68cb-42bb-b965-4cb0dbe0ec0c" alt=""><figcaption></figcaption></figure>

All top-level variables and functions defined in a JS file are accessible in Components and Actions.

## Scope

JavaScript files are scoped based on their creation context:

* **App-level** files - can be utilized across any component or action within the app
* **Page-level** files - restricted to their specific page

When multiple functions with the same name are defined in a scope, then the most recent definition will take precedence.

## Cross usage

Functions and variables defined in one JS file can also be used in others.&#x20;

{% hint style="success" %}
Since JavaScript files are added to a page as scripts, you can only reference definitions from files loaded earlier.
{% endhint %}

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2F17UAjF1URPRaHrSKfzss%2FCleanShot%202024-12-24%20at%2015.45.34%402x-min-min.png?alt=media&#x26;token=62d5e5da-1d34-4345-a068-dc91603da386" alt=""><figcaption></figcaption></figure>

## Global and custom libraries

JavaScript files can also contain *custom* libraries in the custom code section as well as *default* libraries like `moment` and `lodash`.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2F2VMZExY70DQ0fkHoNSVZ%2FCleanShot%202024-12-24%20at%2016.00.09%402x-min-min.png?alt=media&#x26;token=7f6a3616-71cd-4c44-9012-9c189e5d9a15" alt=""><figcaption></figcaption></figure>

## Debugging

You can troubleshoot any issues you have with a JS file by inserting a console log statement and running the function within an action or component, for example:

```javascript
function dateWithLabel(date) {
  console.log('debug!', date);
  return 'Date: ' + moment(date).format('MM/dd/yyyy');
}
```

The logs will appear in the **Logs** panel, prefixed with the file name where the code resides.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FiOI6cL74dLEkJm8hyIul%2FCleanShot%202024-12-24%20at%2016.09.14%402x-min.png?alt=media&#x26;token=34389d4b-59c4-4b08-ab44-1c9fba198fc8" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Code that contains invalid JavaScript and cannot be parsed is not incorporated into the page.
{% endhint %}