'Cannot read properties of undefined' method inside another

Question

I have the following typescript class

export default class BaselineCtrl {
  constructor() {}

  async foo() {
    this.bar();
  }

  async bar() {}
}

When I call the method via

baselineCtrl = new BaselineCtrl();
this.baselineCtrl.foo();

Im getting the error

TypeError: Cannot read properties of undefined (reading 'bar')

What am I doing wrong?

How do you call `this.baselineCtrl.foo();` ? In a method or global scope? — captain-yossarian from Ukraine, Oct 21 '21 at 07:13

score 3 · Accepted Answer · answered Oct 21 '21 at 07:13

3

Check usage of arrow function. https://www.typescriptlang.org/docs/handbook/functions.html#this-and-arrow-functions

In JavaScript, this is a variable that’s set when a function is called.

Change your function like this:

async foo = () => {
    this.bar();
}

PS: why async here ?

answered Oct 21 '21 at 07:13

Gilsdav

1,147
7
10

It worked! Thanks for the answer and the explanation. The async is there because I forgot to remove it for the example. – guygrinberger Oct 21 '21 at 07:29

score 3 · Answer 2 · answered Oct 21 '21 at 07:15

baselineCtrl and this.baselineCtrl refer to two different things, the first one is a local variable (presumably) and the second one is a property on the current object. I'm not sure which one of them you want, it depends on what you're trying to do, but you definitely want the same one in both places.

'Cannot read properties of undefined' method inside another

2 Answers2