Script work in a browser but not in NodeJS

Question

I'm struggling trying to understand why this script works perfectly in the browser but not in Node.js in the server.

data = [{"stars": 3}, {"stars": 2}]

var ParseParameter = function(){
    this.parser = "";
}

ParseParameter.prototype = {
    setStrategy: function(parser) {
        this.parser = parser;
    },
 
    parse: function(parameter) {
        return this.parser.parse(parameter);
    }
};


var IntegerParser = function(filter){

    this.parameter = '';
    this.filter = filter;

    this.parse = function(parameter){
        this.parameter = parseInt(parameter); 
    }

    this.filterBy = function(item){
        return item[this.filter] == this.parameter;
    }
}

var filter = 'stars',
    parameter = '2',
    parseParameter = new ParseParameter();

var integerParser = new IntegerParser(filter);
    parseParameter.setStrategy(integerParser);
    parseParameter.parse(parameter);
    
    var dataFiltered = data.filter(parseParameter.parser.filterBy);

    console.log(dataFiltered);

At the server, I print in console the values of this.parameter and this.filter at the function filterBy and these are undefined

I'm running on Node.js version 8.11.2

Any advice will be appreciated.

It may be because of wrapper function in Node.js. this keyword varies in Node — Vishal-L, May 28 '18 at 07:01
You could use higher order functions instead of OO. An example can be found [here](https://stackoverflow.com/a/50075368/1641941) — HMR, May 28 '18 at 07:22

Farhan Tahir · Accepted Answer · 2018-06-01T10:18:21.953

The is may be due to problem of this keyword in your script. Inside an inner function this refers to window or global object. For example,

Inside the following code, this.filter of this.filterBy is not referring to the filter property that exists inside the scope of IntegerParser function instead it is referring the variable being defined as var filter = 'stars'. Change this name to something else and you'll see undefined and it won't work on browser as well. That's what could be your issue.

var IntegerParser = function(filter){

    this.parameter = '';
    this.filter = filter;

    this.parse = function(parameter){
        this.parameter = parseInt(parameter); 
    }

    this.filterBy = function(item){
        return item[this.filter] == this.parameter;
    }
}

Instead of using this you could use a known solution for this problem by storing this to a variable for later usage. like in following example:

var IntegerParser = function(filter){

        this.parameter = '';
        this.filter = filter;
        var self = this;  // store this to self and use self in inner functions

        this.parse = function(parameter){
            self.parameter = parseInt(parameter); 
        }

        this.filterBy = function(item){
            return item[self.filter] == self.parameter;
        }
    }

Your entire code including my solution is as follow:

data = [{"stars": 3}, {"stars": 2}]

var ParseParameter = function(){
    this.parser = "";
}

ParseParameter.prototype = {
    setStrategy: function(parser) {
        this.parser = parser;
    },
 
    parse: function(parameter) {
        return this.parser.parse(parameter);
    }
};


var IntegerParser = function(filter){

    this.parameter = '';
    this.filter = filter;
    var self = this;

    this.parse = function(parameter){
        self.parameter = parseInt(parameter); 
    }

    this.filterBy = function(item){        
        return item[self.filter] == self.parameter;
    }
}
var filter = 'stars',
    parameter = '2',
    parseParameter = new ParseParameter();

var integerParser = new IntegerParser(filter);
    parseParameter.setStrategy(integerParser);
    parseParameter.parse(parameter);
    
    var dataFiltered = data.filter(parseParameter.parser.filterBy);

    console.log(dataFiltered);

It should work without any problem. Please try and see if it works for you.

Why is 'this' for inner function 'parse' is same as 'IntegerParser' but for 'fiterBy' function is Global object? Since 'this.parse' and 'this.filterBy' both are inner functions. — Vishal-L, May 28 '18 at 08:48
@Vishal-Lia It is because we are assigning a new object to prototype of `ParseParameter`. In case of objects the `this` refers to the object itself. — Farhan Tahir, May 28 '18 at 08:56
How would be in case I use the prototype syntax, I mean, instead of `this.filterBy ` write `IntegerParse.protoype.filterBy`, how could I attach the context? — Jose Rojas, May 28 '18 at 15:25
@JoseRojas You can in that case use JavaScript's `call` or `apply` or `bind` methods for specifying the context or reference of `this` keyword. Read more here: https://medium.com/@omergoldberg/javascript-call-apply-and-bind-e5c27301f7bb — Farhan Tahir, May 28 '18 at 19:16

Script work in a browser but not in NodeJS

1 Answers1