Class properties are giving no-undef

Question

I'm trying to make a non-component class in ReactJS. Most tutorials I've followed on JavaScript show that when you're making a class, you can create properties simply by specifying them with this.[name] .

Something really doesn't like this, and it throws me a no-undef error for my properties.

Here is the code in question:

class MicroBitConnection {
    constructor(device) {
        this.device = device;

        this.connectDAP();
    }

    connectDAP() {
        this.transport = new DAPjs.WebUSB(device);
        this.dap       = new DAPjs.DAPLink(transport);
    }
}

Right now I don't even instantiate the class anywhere, it gives me this error right off the bat:

Line 11:43:  'device' is not defined     no-undef
Line 12:44:  'transport' is not defined  no-undef

It doesn't seem like a linting problem, because even with this warning off using /* eslint no-undef: 0 */ // --> OFF at the top of the file, actually running the code with the class instantiated somewhere gives the same error:

Error: ReferenceError: device is not defined

Answer 1

In your connectDAP method you are referencing undefined variables device and transport . You probably want to use the properties defined on the instance this :

class MicroBitConnection {
    constructor(device) {
        this.device = device;

        this.connectDAP();
    }

    connectDAP() {
        this.transport = new DAPjs.WebUSB(this.device);
        this.dap       = new DAPjs.DAPLink(this.transport);
    }
}

Please also note that this is not automatically bound to the instance, eg when using an instance method as an event handler. To make sure it's bound to the instance in all circumstances, call Function.prototype.bind in the constructor:

this.connectDAP = this.connectDAP.bind(this);

If you want to omit this you need to locally declare the variables, which can easily be done using destructuring:

class MicroBitConnection {
    constructor(device) {
        this.device = device;

        this.connectDAP();
    }

    connectDAP() {
        const { device } = this;
        this.transport = new DAPjs.WebUSB(device);
        const { transport } = this;
        this.dap       = new DAPjs.DAPLink(transport);
    }
}

A third alternative (not recommended) is using with statement:

class MicroBitConnection {
    constructor(device) {
        this.device = device;
        this.transport = null;
        this.dap = null;
        this.connectDAP();
    }

    connectDAP() {
        with (this) {
            transport = new DAPjs.WebUSB(device);
            dap       = new DAPjs.DAPLink(transport);
        }
    }
}

I'm not sure this last version does what you expect, just listing it for completeness' sake and to make you aware of the existence of the with statement.