Variable reset when entering forEach (javascript)

Question

I'm having a problem with my piece of code as the "this.items" variable turns to undefined when entering the following forEach. As you can see there are to console.log that show that the this.items if redefined in the forEach

Why?

FYI, I'm using jQuery 1.8 and Classy (class manager for jQuery)

extractParams : function(params){

    if(params != ""){
        this.items = {};
        params = params.split("&");
        console.log(this.items);

        params.forEach( function(dts){
        console.log(this.items); // = undefined         
            this.keyval = dts.split("=");
            console.log(this.items);

            switch(keyval[0]){
                case "v" : 
                    this.items["Version number"] = this.keyval[1];
                    params = params.filter(function(v) { return !(v === "v=" + this.keyval[1] );});
                    break;
                case "t1" :
                    console.log(this.item);
                    this.items["Event Type"] = this.keyval[1];
                    params = params.filter(function(v) { return !(v === "t1=" + this.keyval[1] );});
                    break;
                default :
                case "" :
                    break;
            }

            switch(true){
                case regItem.test(keyval[0]):
                    this.items["Product Id n°" + this.keyval[0].match(regexpParamNumber)[1]] = this.keyval[1];
                    params = params.filter(function(v) { return !(v === "i"+this.keyval[0].match(regexpParamNumber)+"=" + this.keyval[1] );});
                    break;
                case regQuantity.test(keyval[0]):
                    this.items["Quantity n°" + keyval[0].match(regexpParamNumber)[1]] = keyval[1];
                    params = params.filter(function(v) { return !(v === "q"+keyval[0].match(regexpParamNumber)+"=" + keyval[1] );});
                    break;
                default :
                case "" :
                    break;
            }

        })
        console.log(result);
        result[0] = detectTrackerType(this.items);  
        show(result);
    }
    return this.items;
}

I think `this` is not what you expect anymore. Try to just `Console.log(this)` to see the object. Outside the `foreach` `this` is within the scope of the `extractParams` function but ones you in the `foreach` your `this` would be the local current object I believe. — Nope, Sep 04 '12 at 08:09
try to output `this` after first and second use. i'd say they are pointing to different objects in those two cases — Kuro, Sep 04 '12 at 08:11

score 1 · Answer 1 · edited May 23 '17 at 10:24

1

It is the nature of 'this' -- every time you enter a function this gets reset.

Try

extractParams : function(params){
var that = this;

then use that throughout your code.

Edit: Found a discussion that is worth reading: What does 'var that = this;' mean in JavaScript?

edited May 23 '17 at 10:24

Community

1
1

answered Sep 04 '12 at 08:12

Jeremy J Starcher

21,760
5
48
70

One of the weirdest answer I expected ... but it works ! Thank you :) – François Pérez Sep 04 '12 at 08:26
Yea, it is one of the less obvious warts about the language, I'll admit. Editing my answer to include a link to a discussion. – Jeremy J Starcher Sep 04 '12 at 08:35
@FrançoisPérez: `this` is context sensitive. If you are within a click event for example `this` is within the context of the event and would refer to the object that has been clicked on but if you add a `foreach` loop within the same event iterating through a list of items, `this` inside the `foreach` is now within the context of that loop and will refer to the current item being processed. – Nope Sep 04 '12 at 08:42

mornaner · Answer 2 · 2012-09-04T13:34:55.053

0

this is a little tricky in javascript. Try this doing var self = this; at the beggining of your function and then use self instead in your code.

edited Sep 04 '12 at 13:34

answered Sep 04 '12 at 08:12

mornaner

2,364
2
27
38

score 0 · Answer 3 · answered Sep 04 '12 at 08:13

You need to assign this to something else like self and then in your code refer to self instead of this

extractParams : function(params){
    var self = this;

    if(params != ""){
        self.items = {};
    ....
    params.forEach( function(dts){
        console.log(self.items); // = undefined

You need to do this because of the scope of this changes depending on where you are in the code. Within a nested function this is scoped to the inner function rather than the outer function.

Variable reset when entering forEach (javascript)

3 Answers3