The .js file contains the client-side controller code for the component. You must have one of these to define dynamic behavior in your component, including any dynamic initialization. The only way to call code in an Apex controller is from the client-side controller code; unlike Visualforce, there is no direct way to do so from the markup.

Properties and methods defined within the controller class relate to corresponding binding references in the .html file. Actions are events that occur in the browser, such as clicking a button, hovering over an element, scrolling, or an event from the container or another component. We will discuss events in a later section. The following is some simple button markup in a .html file using an expression to reference a client-side controller function.

The myComponent.html file is as follows:

<template>
  <lightning-button label="Add Drivers" onclick="{addDrivers}">
  </lightning-button>
</template>

The framework automatically handles the setup of the HTML event listeners for you and routes them to the specified controller method. The component, event, and helper parameters are always injected by the framework.

The myComponent.js file is as follows:

import { LightningElement } from 'lwc';

export default class RaceSetup extends LightningElement {
  addDrivers(event) { 
  } 
}

As you can see, Lightning Web Component controllers are using the latest ECMAScript standards relating to class definitions in JavaScript. As a result, the code is much cleaner and easier to understand than the traditional client JavaScript you might be used to. You can read more about this language feature at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes.