Functions, Arrow Functions, and Classes

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

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

Arrow functions are shorter, and — critically — they don't have their own this. Instead, they inherit this from the surrounding scope, which is usually exactly the behavior you want when passing a short callback into an array method like .map() or .filter().

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

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

This class ... constructor ... method shape is exactly the shape of every LWC component you write:

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

extends LightningElement means your component is a class, inheriting everything a Lightning Web Component needs from that base class.

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 3), because it's plain JavaScript class syntax, not something LWC invented.

Understanding classes 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 3) feel consistent across every component.