I`m using VS code and chrome debugger extension . The code below is executed without errors and produces the expected result, however i see that 'this' is undefined in WATCH section.

class Q {
    constructor() { 
        this.arr = [1,2,3]
    }
    log(e) {
        console.log(e)
    }
    test() {
        this.arr.forEach(e => {
            this.log(e); // this is undefined when debugging
        })
    }
}

const f = new Q().test()

what am I doing wrong?

I`m using VS code and chrome debugger extension . The code below is executed without errors and produces the expected result, however i see that 'this' is undefined in WATCH section.

class Q {
    constructor() { 
        this.arr = [1,2,3]
    }
    log(e) {
        console.log(e)
    }
    test() {
        this.arr.forEach(e => {
            this.log(e); // this is undefined when debugging
        })
    }
}

const f = new Q().test()

what am I doing wrong?

• javascript
• visual-studio-code

• Sounds like a Watch limitation rather than anything truly concerning. Does the code actually work? – Lightness Races in Orbit Commented Feb 10, 2018 at 16:13
• Possible duplicate of Value of "this" is incorrect when debugging Babel transpiled React with Chrome Devtools – Bergi Commented Aug 26, 2019 at 21:24

2 Answers 2

To avoid conflicts with the this JavaScript keyword, TypeScript renames this into _this when transpiled. Try watching for _this instead.

class Q {

  arr = []

  constructor() { 
     this.arr = [1,2,3]
  }
  log(e) {
     console.log(e)
  }
  test() {
     this.arr.forEach(e => {
         this.log(e);
     })
  }
}

const f = new Q().test()