The this Keyword in LWC

Inside a component method, this is the component – so this.count and this.template just work. Then one day you pass a method to setTimeout or window.addEventListener and get "Cannot read properties of undefined". Understanding why takes five minutes and saves hours.

The rule

For a normal function or method, this is whatever is left of the dot at call time. Arrow functions don't have their own this – they use the this of the code around them.

class Counter {
    count = 0;
    increment() {
        this.count++;
        return this.count;
    }
}

const counter = new Counter();
console.log(counter.increment());          // called with a dot: this = counter

const loose = counter.increment;           // the method, detached from its object
try {
    loose();
} catch (e) {
    console.log(e.name + ': ' + e.message);
}

const bound = counter.increment.bind(counter);
console.log(bound());                      // bind fixes this
const viaArrow = () => counter.increment();
console.log(viaArrow());                   // the arrow calls it with a dot

1
TypeError: Cannot read properties of undefined (reading 'count')
2
3

Why template handlers just work

When you write onclick={handleClick}, the LWC engine calls your method with this set to the component. That's why you never need bind for handlers declared in the template. Problems only start when you hand a method to someone else.

Losing this in timers and callbacks

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

export default class CountdownTimer extends LightningElement {
    seconds = 3;
    intervalId;

    connectedCallback() {
        // ✗ setInterval(this.tick, 100) would call tick() without a dot: this is undefined inside
        // ✓ an arrow function keeps the component's this
        // eslint-disable-next-line @lwc/lwc/no-async-operation
        this.intervalId = setInterval(() => this.tick(), 100);
    }

    tick() {
        this.seconds -= 1;
        if (this.seconds === 0) clearInterval(this.intervalId);
    }

    disconnectedCallback() {
        clearInterval(this.intervalId);       // always clean up
    }

    get label() {
        return this.seconds > 0 ? `Starting in ${this.seconds}…` : 'Go!';
    }
}

<!-- countdownTimer.html -->
<template>
    <p>{label}</p>
</template>

Starting in 3…

› wait 150ms
Starting in 2…

› wait 200ms
Go!

The same applies to array.map(this.format) if format uses this, and to promise callbacks: write .then((result) => this.handleResult(result)).

Window and document listeners

Listening to events outside your component – window resize, a keyboard shortcut – means calling addEventListener yourself, and removing it when the component goes away. removeEventListener only works with the same function reference, so this.handleKey.bind(this) written twice won't match. Store the bound function in a field:

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

export default class ShortcutListener extends LightningElement {
    lastKey = 'none';

    // a class field holding an arrow function: one stable reference, this always the component
    handleKeyDown = (event) => {
        this.lastKey = event.key;
    };

    connectedCallback() {
        window.addEventListener('keydown', this.handleKeyDown);
    }

    disconnectedCallback() {
        window.removeEventListener('keydown', this.handleKeyDown);
    }
}

<!-- shortcutListener.html -->
<template>
    <p>Last key: {lastKey}</p>
</template>

Forgetting removeEventListener is a real memory leak: the window keeps a reference to the removed component, and its handler keeps running every time the user presses a key.

Arrow-function class fields vs methods

Practice

Summary