# Component JavaScript File

Every component must have a JavaScript file. If the component renders UI, the JavaScript file defines the HTML element. If the component is an API module (library), the JavaScript file exports functionality for other components to use.

JavaScript files in Lightning web components are ES6 modules. By default, everything declared in a module is local—it’s scoped to the module.

To import a class, function, or variable declared in a module, use the `import` statement. To allow other code to use a class, function, or variable declared in a module, use the `export` statement.

:::note
A component’s JavaScript file can have a maximum file size of 1 MB (1,000,000 bytes). If your JavaScript file size exceeds the size limit, refactor the code into multiple files. For more information, see [Share JavaScript Code](/docs/platform/lwc/guide/js-share-code.md).
:::

## UI Component

The JavaScript file follows the naming convention `componentName.js`, such as `myComponent.js`.

Every UI component must include a JavaScript file with at least this code.

```javascript
import { LightningElement } from "lwc";
export default class MyComponent extends LightningElement {}
```

The core module in Lightning Web Components is `lwc`. The `import` statement imports `LightningElement` from the `lwc` module.

```javascript
import { LightningElement } from "lwc";
```

`LightningElement` is a custom wrapper of the standard HTML element.

Extend `LightningElement` to create a JavaScript class for a Lightning web component. *You can’t extend any other **Salesforce base component** class to create a Lightning web component, unless otherwise stated.*

```javascript
export default class MyComponent extends LightningElement {
  // Your code here
}
```

The `export default` keywords export a `MyComponent` class for other components to use. The class must be the default export for UI components. *Exporting other variables or functions in a UI component isn’t currently supported.*

The convention is for the class name to be Pascal Case, where the first letter of each word is capitalized. For `myComponent.js`, the class name is `MyComponent`.

The JavaScript file can contain:

- The component’s public API via public properties and methods annotated with `@api`.
- Fields
- Event handlers

UI component folders can include other JavaScript files in addition to the main `myComponent.js` file. However, the code in these files is for the component’s own use and can’t be shared.

## API Module Component

A Lightning web component without a UI can be used as an API module component for sharing code. API module components are sometimes known as service components.

To share code between components, create an ES6 module and export the variables or functions that you want to expose.

An ES6 module is a file that explicitly exports functionality that other modules can use. Modules make it easier to structure your code without polluting the global scope.

An API module component follows the same [folder structure](/docs/platform/lwc/guide/create-components-folder.md) and naming convention as the UI components. The difference is that there's no HTML file. See [Share JavaScript Code](/docs/platform/lwc/guide/js-share-code.md).

These export statements for the `lwc` module aren't allowed.

```javascript
// These exports are invalid
export {} from "lwc";
export * from "lwc";
export { registerTemplate } from "lwc";
```

## LWC Import Declarations

An LWC module can use named imports and default imports. You can't save an LWC module that contains namespace imports and re-export bindings. You can use only these named imports for the `lwc` module.

- [`LightningElement`](/docs/platform/lwc/guide/js-props-lwc.md)
- [`api`](/docs/platform/lwc/guide/reactivity-public.md)
- [`track`](/docs/platform/lwc/guide/reactivity-fields.md)
- [`wire`](/docs/platform/lwc/guide/data-wire-service.md)

You can import multiple names from the `lwc` module.

```javascript
import { LightningElement, api, wire } from "lwc";
```

These import statements for the `lwc` module aren't allowed.

```javascript
// These imports are invalid
import lwc from "lwc";
import \* as lwc from "lwc";
import { registerTemplate } from "lwc";
import "lwc";
```

In addition to importing from the `lwc` module, there are several ways to use named imports in a Lightning web component.

- [Import a wire adapter](/docs/platform/lwc/guide/data-wire-service-about.md##wire-service-syntax)
- [Import a reference to a Salesforce object or field](/docs/platform/lwc/guide/data-wire-service-about.md#import-references-to-salesforce-objects-and-fields)
- [Import a function or variable that's exported by another module](/docs/platform/lwc/guide/js-share-code.md)

**See Also**

- [Fields, Properties, and Attributes](/docs/platform/lwc/guide/js-props-intro.md)
- [MDN: Named imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#named_import)
- [MDN: Default imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#default_import)
- [MDN: Re-exporting](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#re-exporting_aggregating)