How JavaScript Works in Lightning Web Components

If you come from Apex, Visualforce or Aura, the first surprise in LWC is how little "framework" there is. A Lightning Web Component is mostly plain, modern JavaScript: an ES module that exports a class. The template binds to that class's properties, and the browser does the rest using web standards. That is good news – every hour you spend getting better at JavaScript makes you a better LWC developer.

This course teaches exactly the JavaScript you meet inside components, with every example written as LWC code or as a small script you can run here. If you need a general introduction to the language first, our JavaScript course starts from zero.

A component is a module that exports a class

<!-- greetingCard.html -->
<template>
    <lightning-card title="Welcome">
        <p class="slds-p-horizontal_small">{greeting}, {firstName}!</p>
        <p class="slds-p-horizontal_small">You have {openTasks} open {taskLabel}.</p>
    </lightning-card>
</template>

// greetingCard.js
import { LightningElement } from 'lwc';

export default class GreetingCard extends LightningElement {
    firstName = 'Asha';     // class fields: the component's state
    openTasks = 1;

    get greeting() {        // a getter: computed every time the template renders
        const hour = 9;     // fixed here so the example is repeatable; normally new Date().getHours()
        return hour < 12 ? 'Good morning' : 'Good afternoon';
    }

    get taskLabel() {
        return this.openTasks === 1 ? 'task' : 'tasks';
    }
}

▌Welcome
Good morning, Asha!
You have 1 open task.

Read that JavaScript file line by line and you'll find only standard language features:

• import { LightningElement } from 'lwc' – an ES module import. Every component is a module; it can import other modules, Apex methods and labels.
• export default class GreetingCard extends LightningElement – a class that inherits from the LWC base class. The engine creates one instance per component on the page.
• firstName = 'Asha' – a class field. Fields are reactive: assign a new value and the template re-renders.
• get greeting() – a getter, which the template reads like a property.

Templates have no expressions – JavaScript does the thinking

In an LWC template you can write {firstName} or {account.Name}, but not {openTasks + 1}, {isAdmin && isActive} or {name.toUpperCase()}. This is deliberate: it keeps templates simple and fast and puts every decision in code you can test. In practice it means you write a lot of small getters, and you need to be comfortable with operators, string methods and array methods – which is exactly what the next lessons cover.

Lifecycle hooks are just methods

The engine calls certain methods at fixed moments. You will use these four all the time:

// lifecycleDemo.js
import { LightningElement } from 'lwc';

export default class LifecycleDemo extends LightningElement {
    constructor() {
        super();                          // always first; don't touch attributes or the DOM here
        console.log('1. constructor');
    }

    connectedCallback() {
        console.log('2. connectedCallback – inserted; load data, subscribe');
    }

    renderedCallback() {
        console.log('3. renderedCallback – DOM is ready (runs after every render)');
    }

    disconnectedCallback() {
        console.log('4. disconnectedCallback – removed; clean up timers and subscriptions');
    }
}

<!-- lifecycleDemo.html -->
<template>
    <p>Lifecycle demo</p>
</template>

console: 1. constructor
console: 2. connectedCallback – inserted; load data, subscribe
console: 3. renderedCallback – DOM is ready (runs after every render)

› component removed from the page
console: 4. disconnectedCallback – removed; clean up timers and subscriptions

Where your JavaScript runs

• Your code always runs in strict mode – undeclared variables throw instead of quietly creating globals.
• You can use modern syntax freely: classes, modules, optional chaining, async/await, private fields.
• Some browser features are restricted for security – covered in the Lightning Web Security lesson.

The JavaScript you need for LWC

Practice

Summary