Cannot read properties of undefined while testing if undefined (but it is defined)?

Question

I have the following chunk of Typescript code in a function, with variableInQuestion = 0 being defined outside of the function:

console.log(this.variableInQuestion);
this.arrayOfObjects.each(function(thing) {
    if (this.variableInQuestion !== undefined && thing.property == this.variableInQuestion) {
        ...
    }
});

The problem is that the console.log line prints out exactly what I would expect (the default value of 0), but I get an error for the third line saying Cannot read properties of undefined (reading 'variableInQuestion') at [[[location of the first variableInQuestion in the third line]]]. I don't understand why it's giving me a "cannot read properties of undefined" error while I am testing to see if it's undefined.

EDIT: the .each thing is specific to the array of objects in question; that's not the issue. If I run the following...

console.log(this.variableInQuestion);
this.arrayOfObjects.each(function(thing) {
    if (0 !== undefined && thing.property == 0) {
        ...
    }
});

It works exactly as I'd expect.

Where does `.each()` come from? The Typescript/JavaScript array iteration method is called "forEach", not "each". — Pointy, Apr 06 '23 at 13:16
can you post the actual code? it is hard to understand with your example — Efraim Jerszurki, Apr 06 '23 at 13:17
In any case the error is that `this` is `undefined`, and that's because there's no default `this` binding in an iterative method like "forEach". If you use an `=>` function, you'll get the `this` binding from the enclosing context. — Pointy, Apr 06 '23 at 13:18
Does this answer your question? [How to access the correct \`this\` inside a callback](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Heretic Monkey, Apr 06 '23 at 15:52

QuillAndSaber · Answer 1 · 2023-04-06T14:50:52.937

1

The way to address this problem is as follows:

variableInQuestion = 0;

myFunction() {
    let placeholder = this.variableInQuestion;
    this.arrayOfObjects.each(function(thing) {
        if (placeholder !== undefined && thing.property == placeholder) {
            ...
        }
    });
}

Special thanks to Pointy for identifying the problem!

edited Apr 06 '23 at 14:50

answered Apr 06 '23 at 14:28

QuillAndSaber

167
1
8

score 0 · Answer 2 · answered Apr 06 '23 at 19:12

If you console.log your data, you'll see

class X {
    variableInQuestion = 123;
    arrayOfObjects = [1, 2, 3];

    example() {
        console.log(this.variableInQuestion);
        this.arrayOfObjects.forEach(function (thing) {
            console.log({
                this: this,
                thing: thing,
            })
        })
    }
}

new X().example()
// 123
// { "this": undefined, thing: 1 }
// { "this": undefined, thing: 2 }
// { "this": undefined, thing: 3 }

because forEach doesn't keep this value.

Either use lambda

this.arrayOfObjects.forEach((thing) => { console.log(this) })

, keep this value

let that = this;
this.arrayOfObjects.forEach((thing) => { console.log(that) })

, or provide thisArg into forEach (dunno about .each but Array.prototype.forEach supports that)

this.arrayOfObjects.forEach(function(thing){ console.log(this) }, this)

Cannot read properties of undefined while testing if undefined (but it is defined)?

2 Answers2