Attributes becoming undefined when passing methods around

[noble python]

Hey there!
I'm not much of a JS person so I'm rather confused about what's going on here. I've got this class here ```js
class TypeWriter {
constructor(text, speed) {
this.text = text;
this.speed = speed;
this.idx = 0;
}

        write() {
            if (this.idx < this.text.length) {
                document.getElementById("testing").innerHTML += this.text.charAt(this.idx);
                this.idx++;
                setTimeout(this.write, this.speed + randomness() * 15);
            }
        }
    }

And all is working fine when typing the very first letter, however afterwards I'm getting the error
Uncaught TypeError: Cannot read properties of undefined (reading 'length')
at write (index.html:21:42)
```So seems like when I pass this.write to setTimeout, when the method is next called this is no longer being referenced properly. I'm sure this is just me not really understanding how this works in JS or some odd referencing thing, but if anyone has any suggestions on how I could make this work do let me know.

[shadow light]

You'll need to explicitly bind this to the method you are passing into setTimeout:

setTimeout(this.write.bind(this), this.speed + …)

if you don't do this, this will just be bound by regular context rules when the reference to write is called. It will then contain the window object. You can confirm this by doing a console.log(this) at the top of write().

[hollow owl]

You could also do something like this, if I got your code correct 🙂

class TypeWriter {
    constructor(text, speed) {
        this.text = text;
        this.speed = speed;
        this.idx = 0;
    }

    async write() {
        while (this.idx < this.text.length) {
            document.getElementById("testing").innerHTML += this.text.charAt(this.idx);
            this.idx++;
            await this.sleep(this.speed + randomness() * 15);
        }
    }
    
    private sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
}

[noble python]

Ah gotcha

[noble python]

That does seem a little more intuitive, I'll go read up on what Promise and resolve do but looks like it's a means of creating async code which would be nice

[hollow owl]

If you go with your previous code, you are recursively calling the write-function, which is increasing the "call-stack". Even though the call-stack limit is somewhat high, there still is potential that you reach it and then you get some "call-stack limit exceeded" error. And since all recursive-functions can be written in a non-recursive, I facour the non-recursive ones imho 🙂

[noble python]

Ah true what is the call stack limit in JS

Because with what I have in mind if it's anything like Python's recursion limit then yeah I will hit it

[hollow owl]

I looked it up and it fully depends on the environment and engine-version etc. Just try to not stack calls if you don't know (or cannot estimate) the number of nested calls.

[noble python]

Yep that's fair

I'll go with the section option

*second

And I can't type today

Nice

Anyways

Thanks for the help guys