Learn JavaScript for LWC: The Modern JS You Need Before Lightning Web Components

If you want to learn JavaScript for Lightning Web Components, focus on modern core JavaScript: let and const, arrow functions, template literals, destructuring and spread, classes, ES modules, array methods, and promises with async/await. That's what LWC is made of. JavaScript for Lightning Web Components is a free course that covers exactly that set, so you can move on to building components without learning a whole front-end framework first.

What "JavaScript for LWC" means and why it comes first

Lightning Web Components isn't a proprietary language. A component's logic is a standard JavaScript class that extends LightningElement, imported and exported with standard ES modules. Salesforce adds decorators (@api, @wire, @track) and some base components, but the rest is the JavaScript any web developer writes.

That's good news, because the skills transfer. It's also a trap: developers coming from Apex or Visualforce often try to learn LWC and JavaScript at the same time, and they can't tell which one is causing a bug. I explain why that slows you down in learn JavaScript before LWC.

In real projects, you'll use JavaScript in LWC for:

• Shaping Apex or Lightning Data Service results into what the template needs
• Computing display values in getters, because templates can't contain expressions
• Handling user events and dispatching your own custom events
• Calling Apex imperatively and handling the promise it returns
• Validating input before you save

Prerequisites

• Basic programming. Variables, conditionals, loops and functions in any language.
• A browser and an editor. You can practise most of this course in the browser console before touching a Salesforce org.
• No Salesforce knowledge required. It helps to know what an object and a record are, but the course is about the language.

What you'll be able to do afterwards

• Read any LWC JavaScript file and explain each line
• Write classes with fields, getters and methods
• Use map, filter, find and reduce to transform record lists without loops full of temporary variables
• Write asynchronous code with promises and async/await, including error handling
• Understand why some changes re-render a component and others don't

A hands-on example: the JavaScript inside a real component

Here's a small component class that loads open cases through Apex. Almost every line uses a modern JavaScript feature from the course.

import { LightningElement } from 'lwc';
import getOpenCases from '@salesforce/apex/CaseController.getOpenCases';

export default class OpenCases extends LightningElement {
    cases = [];
    errorMessage;

    async connectedCallback() {
        try {
            const records = await getOpenCases();
            this.cases = records.map(({ Id, CaseNumber, Subject }) => ({
                id: Id,
                label: `${CaseNumber}: ${Subject}`
            }));
        } catch (error) {
            this.errorMessage = error.body ? error.body.message : 'Could not load cases';
        }
    }

    get hasCases() {
        return this.cases.length > 0;
    }

    get caseCountLabel() {
        return `${this.cases.length} open cases`;
    }
}

What's going on:

• ES modules. import pulls in the LWC base class and an Apex method, and export default makes the class the component.
• Class fields. cases and errorMessage are fields. In LWC, fields used by the template are reactive, so assigning a new value re-renders the component.
• async/await with try/catch. The imported Apex method returns a promise. await waits for it, and catch handles the failure instead of leaving a silent spinner.
• Destructuring inside an arrow function. ({ Id, CaseNumber, Subject }) => (...) pulls the three fields out of each record and returns a new, smaller object.
• Template literals build the label without string concatenation.
• Getters. hasCases and caseCountLabel compute values for the template, which is how you keep templates free of expressions. The template binds {hasCases}, never {cases.length > 0}.

The Apex method needs to be a static @AuraEnabled method for this import to work. That's covered in the LWC course.

How to practise so it sticks

Watching isn't enough with JavaScript. Here's how I'd suggest working through the course:

• Type every example yourself in the browser console or a scratch file. Don't paste. The typos you make and fix are part of learning the language.
• Change one thing and predict the result. Swap an arrow function for a regular function and log this. Remove an await and see what comes back. Predicting before you run is what builds a mental model.
• Rewrite loops as array methods. Take a for loop that builds a filtered list and rewrite it with filter and map. Then go the other way.
• Read real component code. Open the GitHub repo for the course, pick a component, and explain each line out loud. If you can't, that's the next thing to revisit.

Expect to come back to promises and this more than once. Almost everyone does.

Common mistakes beginners make

1. Losing this. Inside a regular function callback, such as one passed to setTimeout, this isn't your component. Use arrow functions, which keep the surrounding this.
2. Mutating an array and expecting a re-render. this.cases.push(item) changes the array in place, and LWC doesn't track that without @track. Assign a new array instead: this.cases = [...this.cases, item].
3. Forgetting to handle promise rejection. An await without try/catch, or a .then without .catch, means failures disappear silently.
4. Using == instead of ===. Loose equality converts types in surprising ways. Use strict equality everywhere.
5. Modifying data received through @api. Objects passed into a child component are read-only. Copy them with spread before changing anything.
6. Using var. It's function-scoped and hoisted, which causes confusing bugs. Use const by default and let when you must reassign.
7. Putting logic in the template. LWC templates don't allow expressions. Compute the value in a getter.

How it connects to the other topics

• The direct next step is Lightning Web Components, where this JavaScript meets decorators, wire adapters, events and Lightning Data Service.
• You'll need Apex for anything LDS can't do, such as complex queries and aggregations.
• LWC interviews test JavaScript heavily: closures, promises, this and array methods all come up. See LWC interview questions.
• The Salesforce developer roadmap puts this course right before LWC.

Who should skip this

• Skip it if you already write modern JavaScript professionally, in React, Vue or plain ES modules. Go straight to LWC.
• Skip it if you're an admin with no plans to build UI. Spend the time on Flows.
• Don't skip it if JavaScript to you means jQuery or Visualforce <script> blocks. Modern JavaScript is a different language in practice.

It's free, so there's nothing to lose by watching the first few episodes.