Functions, Arrow Functions, and Classes

A function, as taught two lessons ago, stands alone — it isn't attached to anything:

function greet(name) {
    return 'Hello, ' + name;
}

A method is exactly the same idea — a named, reusable block of instructions — but it belongs to an object or a class, and is called through that object:

const person = {
    name: 'Ada',
    greet() {
        return 'Hello, ' + this.name;
    },
};

person.greet(); // called AS a method, through the object it belongs to

greet here is called a method specifically because it's defined inside person and called via person.greet(), rather than standing alone as greet(). Every function you'll write inside an LWC component class (handleClick(), handleSave(), and so on) is a method in exactly this sense.

function double(n) {
    return n * 2;
}

const doubleArrow = (n) => n * 2;

An arrow function is a shorter way to write a function, using => instead of the function keyword — the previous lesson already used this shorthand briefly for .map()/.filter() callbacks. Arrow functions are shorter, and — critically — they don't have their own this. Instead, they inherit this from the surrounding scope, which turns out to matter a lot once this is explained below.

this is a special value available inside a method that refers to the specific object the method was called on. It lets one method definition work correctly no matter which object calls it:

const account1 = { name: 'Acme Corp', describe() { return 'This is ' + this.name; } };
const account2 = { name: 'Globomantics', describe() { return 'This is ' + this.name; } };

account1.describe(); // 'This is Acme Corp'   — this.name refers to account1's name
account2.describe(); // 'This is Globomantics' — the SAME method, but this.name now refers to account2's name

The exact same describe method produces a different result depending on which object called it — that's what this means: "the object this method was called through, right now." Inside an LWC component class, this refers to that specific component instance — which is exactly why this.showWelcome, this.recordId, and this.handleSave() all mean "the property/method belonging to this particular running component."

Building a string by gluing pieces together with + gets hard to read once more than one value is involved:

const message = 'Hello, ' + name + '! You have ' + count + ' new cases.';

A template literal — backticks (`) instead of quotes — lets you embed a value directly inside the string using ${ }:

const message = `Hello, ${name}! You have ${count} new cases.`;

Both lines produce the exact same result — the template literal is just easier to read, especially once several values are involved. Anything written inside ${ } is a small piece of JavaScript — a variable, this.something, even a short calculation — evaluated and inserted directly into the string at that position. The class example just below uses exactly this.

A plain object (two lessons ago) groups related data. A class goes further: it groups data (called properties or fields) and the methods that work with that data, into one reusable blueprint:

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        return `${this.name} makes a sound.`;
    }
}

const cat = new Animal('Whiskers');
cat.speak(); // 'Whiskers makes a sound.'

The constructor is a special method that runs automatically when a new instance is created (new Animal('Whiskers')) — its job is to set up that instance's initial data, here assigning the given name onto this.name. speak() is an ordinary method, using this.name exactly as explained above — "whichever animal instance called speak()."

Every LWC component's class definition follows this exact shape:

export default class MyComponent extends LightningElement {
    // fields and methods, same shape as any other JS class
}

Piece by piece:

• export default — makes this the file's single, primary export (the next lesson, "Modules," covers exactly what this means).
• class MyComponent — declares a new class named MyComponent, using the exact class keyword just introduced above.
• extends LightningElement — this class inherits from LightningElement, the Salesforce-provided base class every Lightning Web Component builds on. Inheritance means MyComponent automatically gets everything LightningElement already provides (lifecycle hooks, reactivity, and more) without having to write any of that itself — the same extends keyword and inheritance concept as class Animal above, just extending a Salesforce class instead of one you wrote yourself.

This is no longer boilerplate to memorize — it's a plain JavaScript class, doing exactly what a class does, extending a base class Salesforce provides.

class CaseFormatter {
    constructor(caseRecord) {
        this.caseRecord = caseRecord;
    }

    get displayLabel() {
        return `Case #${this.caseRecord.CaseNumber}`;
    }
}

Notice the get keyword — this is the exact same getter syntax used inside LWC components (Module 4), because it's plain JavaScript class syntax, not something LWC invented.

Understanding classes, methods, and this isn't a side topic for LWC — it's directly understanding the shape of every single component file you'll write for the rest of this course, and the reason concepts like getters and lifecycle methods (Module 4) feel consistent across every component.