How to overcome "potentially invalid usage of this"?

Question

I get potentially invalid usage of this when calling isDataMatchingnamespace how to overcome and how to call isDataMatchingnamespace in a proper way?

function Client() {

    var namespace = "default";

    this.addnamespaceTodata = function(data) {
        data.namespace = namespace;
        return data;
    };

    this.isdataMatchingnamespace = function(data) {
        return data.namespace === namespace;
    };

    this.filterdatasBynamespace = function(datas) {
        var result = [];
        _.forEach(datas, function(data) {
            if (this.isdataMatchingnamespace(data)) { // I get potentially invalid usage of this so how to overcome and how to call isDataMatchingnamespace in a proper way?
                result.push(data);
            }
        });
    }
}

module.exports = Client;

Possible duplicate of [How does the "this" keyword work?](http://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — Andreas, Nov 15 '16 at 08:51

score 7 · Accepted Answer · answered Nov 15 '16 at 08:53

That is an invalid usage of this, since this is undefined inside that function.

underscore.js allows you to pass an optional additional argument to forEach to specify what this should be inside the function. If you want it to be the same as this from outside the function, then pass this as the third argument into _.forEach:

    _.forEach(datas, function(data) {
        if (this.isdataMatchingnamespace(data)) {
            result.push(data);
        }
    }, this); // Added ", this"

score 4 · Answer 2 · answered Nov 15 '16 at 08:58

there is other way also by storing this value into variable.

let's say var _thisRef = this; define this below var namespace = "default"; and use _thisRef.isdataMatchingnamespace(data) without changing your code

your updated code as follow :

function Client() {

var namespace = "default";
var _thisRef = this;

this.addnamespaceTodata = function(data) {
    data.namespace = namespace;
    return data;
};

this.isdataMatchingnamespace = function(data) {
    return data.namespace === namespace;
};

this.filterdatasBynamespace = function(datas) {
    var result = [];
    _.forEach(datas, function(data) {
        if (_thisRef.isdataMatchingnamespace(data)) { // I get potentially invalid usage of this so how to overcome and how to call isDataMatchingnamespace in a proper way?
            result.push(data);
        }
    });
}
}

module.exports = Client;

score 0 · Answer 3 · answered Jun 11 '20 at 18:31

Another better way would be to declare a variable at a class level like:

export class SomeComponent {someVarible = []; }

someFunction() { const tempVar = []; _.forEach(datas, function(data) { 
                  tempVar.push(data) // now use this variable to pass or
                  assign the data 
               }, this); 
                       this.someVarible = tempVar;
                          // OR
                       otherFunction(tempVar); // where you can use your varuiable
 }

score -1 · Answer 4 · answered Sep 15 '20 at 07:13

-1

es6 arrow functions does that for you automatically !

Just change the syntax to arrow function syntax

data => { your function goes here }

answered Sep 15 '20 at 07:13

swarnim gupta

107
4

How to overcome "potentially invalid usage of this"?

4 Answers4