Javascript class variable class inaccessible in forEach loop

Question

In my forEach loop, all my class variables become undefined. Any suggestions ?

class MyClass{
    constructor(){
        this.myVar = "Hello"
    }

    iterate(itemList){
        console.log(this.myVar); // working

        for (var i = 0; i < itemList.length; i++) {
            console.log(this.myVar); // also working
        }

        itemList.forEach(function(element){
            console.log(this.myVar); // NOT working
        });
    }
}

instance = new MyClass();
instance.iterate([0,1]);

You can use an arrow function to use the `this` from the surrounding scope: `(element) => {`. Another option is to specify a `thisArg`: `.forEach(function() {...}, this);`. You could also look into using `.bind()` (see above dupe for explanations & other options) — Nick Parsons, Jun 24 '22 at 14:07

score 2 · Answer 1 · answered Jun 24 '22 at 14:07

That because the value of "this" in the forEach function = "undefined", you need to get the value of "this" of the object.

Please check this.

class MyClass{
    constructor(){
        this.myVar = "Hello"
    }

    iterate(itemList){
        console.log(this.myVar); // working
        const that = this;
        itemList.forEach(function(element){
            console.log(that.myVar); // NOT working
        });
    }
}

instance = new MyClass();
instance.iterate([0,1]);

Or you can bind the callback function of the forEach with the object's this.

class MyClass{
    constructor(){
        this.myVar = "Hello"
    }

    iterate(itemList){
        console.log(this.myVar); // working
        itemList.forEach(function(element){
            console.log(this.myVar); // NOT working
        }.bind(this));
    }
}

instance = new MyClass();
instance.iterate([0,1]);

Javascript class variable class inaccessible in forEach loop

1 Answers1