# Using JavaScript in PixieBrix

You might use JavaScript in PixieBrix to transform data for your custom needs.

To do this, you'll use the `Run JavaScript Function` brick.&#x20;

### Writing Functions

To write a function, first add the `Run JavaScript Function` brick to your mod.&#x20;

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FMcQ43joQv56U4sOSXolF%2Fimage.png?alt=media&#x26;token=3244edee-566d-471a-bce3-b0ca087e4eea" alt=""><figcaption></figcaption></figure>

Inside the [Brick Configuration Panel](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/brick-configuration-panel), you can define a function, and pass arguments.&#x20;

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FEUUWW9fypmsSLN5N9TBc%2Fimage.png?alt=media&#x26;token=5799e093-5dbb-4692-ae96-c9a2a596451e" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Currently, the JavaScript brick only supports the native web API methods in Chrome. To check if a method will work, reference [Mozilla's Web APIs docs](https://developer.mozilla.org/en-US/docs/Web/API).
{% endhint %}

### Supplying Arguments

Most functions will require arguments to process data.

Specify the arguments in the Arguments field below the function. Click **Add Property** to create an item. You can reference variables and outputs from other bricks, arrays of data, strings, other objects, numbers, or boolean values.

### Referencing Arguments

You can reference defined arguments to the function in multiple ways (choose one):&#x20;

Use `args`, like `function(args)` and set a const below the function like this: \
`const { arg1, arg2 } = args`;

If you'd like, you can also reference them directly via the params, like `function({arg1, arg2})`  or you can avoid setting a `const` and reference arguments as `args.arg1` and `args.arg2`

### Converting JQ Filters to JavaScript with ChatGPT

If you've been using JQ in existing mods, you'll find ChatGPT is helpful in suggesting a JavaScript function for your JQ filter.&#x20;

*JQ filters are used to transform input JSON data based on the user-defined script. JQ users create a filter to be performed on data. Whereas with JavaScript, you'll create a function and pass it arguments of data. If you're migrating from JQ bricks to JavaScript bricks, your data object will become your argument object, and you'll replace your filter with a function.*

Here's an example of how you could use ChatGPT to help you create a function from a JQ filter.&#x20;

**Original JQ filter**

```jq
map({const: .Prompt, title: .Title})
```

**Prompt**

You can use a prompt like this:&#x20;

```
i have this jq filter: map({const: .Prompt, title: .Title})

write a javascript function for it
```

**Output from ChatGPT**

```javascript
function jqFilterEquivalent(data) {
    return data.map(item => ({
        const: item.Prompt,
        title: item.Title
    }));
}
```

You might have to tweak it slightly, but ChatGPT is pretty good at giving you the JavaScript version.&#x20;

{% hint style="info" %}
[Activate this mod](https://app.pixiebrix.com/activate?id=@pixie-britt/developers/convert-jq-to-javascript) and use the Quick Bar to post a JQ filter and the sidebar will return its JavaScript equivalent!
{% endhint %}

### Troubleshooting/FAQs

#### My function isn't working. How can I tell if the error is in my JavaScript?&#x20;

If you're experiencing any issues with your function, try running the function in a [JavaScript playground](https://jsfiddle.net/) to confirm there are no issues with the function.

#### Can I call multiple functions in one brick?&#x20;

You can nest functions within the function, but you cannot have multiple top level functions in the same brick.&#x20;

For example, this works: ✅

```javascript
function ({x, y}) {
    function getSquared(z) {
        return z ** 2;
    }
    return getSquared(x) + getSquared(y);
}
```

This does not: 🛑

```javascript
function getSquared(z) {
    return z ** 2;
}

function ({x, y}) {
    return getSquared(x) + getSquared(y);
}
```

#### I see Error running user-defined JavaScript Error in the brick run

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FOASXtP39BXTVWTxL1yBV%2Fimage.png?alt=media&#x26;token=9bd3d638-2a39-45b0-aab3-35fdee4b1f0e" alt=""><figcaption></figcaption></figure>

Head to `Logs` tab, just above **Brick Actions** to see the specific error. The Page Editor don't expose this in the brick itself, but you'll be able to see details expanding the row with the error.

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FJ3Ghj21MhvEnoht99dG6%2Fimage%20(1).png?alt=media&#x26;token=083c7eb3-b440-4270-aaf6-c4ee86fb8489" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.pixiebrix.com/developing-mods/developer-concepts/transforming-data/using-javascript-in-pixiebrix.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
