You can write your functions in JavaScript. This guide describes the process of building a Shopify Function using JavaScript or TypeScript.

> Caution:
> For prototyping ideas, JavaScript is a good starting point if you're familiar with the language. However, expect to run into instruction limits sooner than if you wrote the equivalent function logic in a language that compiles to WebAssembly directly, such as [Rust](/docs/apps/build/functions/programming-languages/rust-for-functions). Shopify strongly recommends [Rust](/docs/apps/build/functions/programming-languages/rust-for-functions).

## How it works

Shopify CLI compiles your JavaScript code using [Javy](https://github.com/bytecodealliance/javy), our JavaScript-to-WebAssembly toolchain. To make development easier, we've also published a [Shopify Functions JavaScript library](https://npm.im/@shopify/shopify_function).

> Note:
> To write functions in JavaScript, you must install [Node.js](https://nodejs.org/en/download) 16 or higher. If you previously installed Shopify CLI, then make sure you're using the [latest version](/docs/api/shopify-cli#upgrade).

### Javy

Javy is part build tool, and part runtime engine:

- **Build tool**: The build tool part takes a JavaScript file and compiles it into a WASI-compatible WebAssembly module, which contains both your code and a full JavaScript engine embedded. 

- **Runtime engine**: JavaScript by itself is lacking some APIs to meaningfully interact with the environment it is running in. Javy implements a handful of APIs that are required to make JavaScript work well for Shopify Functions.

### Shopify Functions JavaScript library

The Shopify Functions JavaScript library provides convenient functions and hides repetitive boilerplate in your function code. If you create your JavaScript function using Shopify CLI, then it will set up the library for you.

The library includes a TypeScript type generator that inspects your GraphQL query to allow your IDE (Integrated Development Environment) to provide autocomplete suggestions.

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="https://npm.im/@shopify/shopify_function" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/npm"
     data-alt-src="/assets/resource-cards/npm-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Shopify Functions JavaScript library
    </h3>
    <p class="resource-card__description">Read the documentation of our JavaScript library for Shopify Functions.</p>
  </a>
</div>

</div>


## Available JavaScript APIs

Javy and Shopify Functions provide access to the following APIs and globals:

- [ECMAScript 2020](#ecmascript-2020)
- [Javy globals](#javy-globals)

### ECMAScript 2020

The Javy runtime implements the [ECMAScript 2020 specification](https://262.ecma-international.org/11.0/). However, Javy doesn't enable [JavaScript's event loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop). This means that `async`/`await` and promises will compile fine, but will throw an error when your function executes:

<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="filename" data-value="Example error when using the event loop"></script>
<script data-option="nocopy" data-value="true"></script>

<script type="text/plain" data-language="txt">
RAW_MD_CONTENTthread '<unnamed>' panicked at 'called `Result::unwrap()` on an `Err` value: Adding tasks to the event queue is not supported
END_RAW_MD_CONTENT</script>

</div>
</p>


### Javy globals

Javy exposes [additional IO globals](https://github.com/bytecodealliance/javy/blob/93766d87d8036c2e4244530544d8249e591a7b3b/crates/apis/src/stream_io/io.js) for reading and writing from `STDIO`. The [`javy` npm package](https://www.npmjs.com/package/javy) provides convenience methods over the built-in functions.

Javy also exposes an [encoding API](https://developer.mozilla.org/en-US/docs/Web/API/Encoding_API) which is W3C-compatible, with the following exceptions:

- Support for UTF-8 encoding exclusively
- No support for `TextEncoderStream` or `TextDecoderStream`
- No support for `TextEncoder.encodeInto`
- No support setting the `stream` property to `true` in `TextDecoder.decode`

### Not available in Javy or Shopify Functions

The following JavaScript APIs aren't available:

- [Web-specific browser APIs](https://developer.mozilla.org/en-US/docs/Web/API) such as `setTimeout`, `fetch`, `crypto`, or `URL`.
  - An exception to this is `TextEncoder` and `TextDecoder`, which Javy provides.
- Node.js-specific globals and imports such as `process`, `node:buffer`, `node:http`, or `node:util`.

## JavaScript functions and Shopify CLI

The quickest way to get started with JavaScript for Shopify Functions is to use the [Shopify Functions JavaScript library](https://npm.im/@shopify/shopify_function) with Shopify CLI.

Shopify CLI helps you scaffold projects and uses [ESBuild](https://esbuild.github.io/) to preprocess JavaScript and TypeScript. This means that you can install and import `npm` dependencies, just like you would in regular JavaScript. The dependencies will be bundled before everything gets compiled to WebAssembly.

Shopify CLI also supports TypeScript and type annotations from [GraphQL schemas](/docs/apps/build/functions/input-output#graphql-schema) and [input queries](/docs/apps/build/functions/input-output#input).

Shopify CLI uses Javy to compile a WebAssembly module that conforms to the [WebAssembly requirements](/docs/apps/build/functions/programming-languages/webassembly-for-functions#requirements), automatically generating exports from targets in the [function extension configuration](/docs/api/functions/configuration#properties).

### Compatibility with earlier versions

Shopify CLI provides support for backwards compatibility with API versions 2023-07 and earlier. It uses Javy to compile a WebAssembly module that exports a `_start` function to conform to previous [WebAssembly requirements](/docs/apps/build/functions/programming-languages/webassembly-for-functions#requirements).

## Using Javy directly

If you want more control over your function, then you can also use Javy directly with no project boilerplate. The following example shows a minimal Shopify Function that only uses the [Javy runtime library](https://npm.im/javy) and [Javy support for exporting functions](https://github.com/bytecodealliance/javy#exporting-functions):

<p>
<div class="react-stacked-code-block ThemeMode-dim" data-preset="stacked">


<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="filename" data-value="my_function.js"></script>

<script type="text/plain" data-language="javascript">
RAW_MD_CONTENTimport * as fs from "javy/fs";

export function run() {
    const inputData = fs.readFileSync(fs.STDIO.Stdin);
    const inputStr = new TextDecoder("utf-8").decode(inputData);
    const inputObj = JSON.parse(inputStr);

    const outputObj = /* process input_obj somehow */

    const outputStr = JSON.stringify(outputObj);
    const outputData = new TextEncoder().encode(outputStr);
    fs.writeFileSync(fs.STDIO.Stdout, outputData);
}
END_RAW_MD_CONTENT</script>

</div>
</p>

<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="filename" data-value="my_function.wit"></script>

<script type="text/plain" data-language="wit">
RAW_MD_CONTENTpackage my-function:main

world my-function-world {
  export run: func()
}
END_RAW_MD_CONTENT</script>

</div>
</p>


</div>
</p>


You can compile the piece of JavaScript to a WASI module using the Javy CLI and then run it using [`function-runner`](https://github.com/Shopify/function-runner):

<p>
<div class="react-code-block" data-preset="terminal">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>


<script type="text/plain" data-language="none">
RAW_MD_CONTENTnpx esbuild my_function.js --bundle --platform=node --format=esm --outfile=my_function_bundle.js
npx javy-cli compile my_function_bundle.js -o function.wasm --wit my_function.wit -n my-function-world
echo '{}' | npx function-runner -f function.wasm --export=run
END_RAW_MD_CONTENT</script>

</div>
</p>




## Sample apps

Explore sample apps that contain functions written in JavaScript.

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="https://github.com/Shopify/function-examples/tree/main/sample-apps/discounts" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/github"
     data-alt-src="/assets/resource-cards/github-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Discounts
    </h3>
    <p class="resource-card__description">View a sample discounts app that contains functions written in JavaScript.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="https://github.com/Shopify/function-examples/tree/main/sample-apps/payment-customizations" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/github"
     data-alt-src="/assets/resource-cards/github-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Payment customizations
    </h3>
    <p class="resource-card__description">View a sample payment customization that contains functions written in JavaScript.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="https://github.com/Shopify/function-examples/tree/main/sample-apps/delivery-customizations" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/github"
     data-alt-src="/assets/resource-cards/github-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Delivery customizations
    </h3>
    <p class="resource-card__description">View a sample delivery customization that contains functions written in JavaScript.</p>
  </a>
</div>
</div>


## Tutorials

Learn how to use JavaScript with Shopify Functions by following one of our use case tutorials:

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/apps/build/discounts/build-discount-function" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/heart"
     data-alt-src="/assets/resource-cards/heart-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Build a discounts function
    </h3>
    <p class="resource-card__description">Use Shopify Functions to create a new discount type for users.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/apps/build/checkout/payments/create-payments-function" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/coin"
     data-alt-src="/assets/resource-cards/coin-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Create a payments function
    </h3>
    <p class="resource-card__description">Use Shopify Functions to hide a payment option offered to customers at checkout.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/apps/build/checkout/delivery-shipping/delivery-options/build-function" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/globe"
     data-alt-src="/assets/resource-cards/globe-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Build a delivery options function
    </h3>
    <p class="resource-card__description">Use Shopify Functions to rename a delivery option offered to customers at checkout.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/apps/build/checkout/cart-checkout-validation/create-server-side-validation" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/storefront"
     data-alt-src="/assets/resource-cards/storefront-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Create server-side validation
    </h3>
    <p class="resource-card__description">Use Shopify Functions to block progress on a checkout when the cart line quantities exceed a limit.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/apps/build/orders-fulfillment/order-routing-apps/build-fulfillment-constraints" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/tutorial"
     data-alt-src="/assets/resource-cards/tutorial-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Build fulfillment constraints
    </h3>
    <p class="resource-card__description">Use Shopify Functions to customize fulfillment and delivery strategies.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/apps/build/orders-fulfillment/order-routing-apps/location-rules/build-location-rule-function" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/growth"
     data-alt-src="/assets/resource-cards/growth-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Build a location rule function
    </h3>
    <p class="resource-card__description">Use Shopify Functions to choose a different order location during checkout.</p>
  </a>
</div>
</div>


## Next steps

- Learn about how data is [input to and output from Shopify Functions](/docs/apps/build/functions/input-output).
- Explore [the references for each Function API](/docs/api/functions).
- Get familiar with [testing and debugging practices](/docs/apps/build/functions/test-debug-functions) that pertain to Shopify Functions.