5

When setting a breakpoint on the console.log statement, why would this be undefined in the debugger but the statement print with no issues? Am I missing something in regards to scope here?

export class OptionsSidebarComponent {

  ... 

  public filters: Object = new Object();

  ... 

  public generateFilters() {
    for (let property in this.terms) {
      if (this.terms.hasOwnProperty(property) && this.terms[property] !== null) {

        if (!this.filters.hasOwnProperty(this.productGroup.id)){
          this.filters[this.productGroup.id] = new Filters();
        }

        this.terms[property].forEach((term) => {
          console.log(this.filters);
        });
      }
    }
  }
}
jrnxf
  • 744
  • 8
  • 22
  • `this` is referencing an instance of your class which is only available in that exclusive context – Kyle Burkett Jul 23 '18 at 04:21
  • 1
    Are you targeting ES5? Check the JavaScript output. If the arrow function has been compiled to a non-arrow function, `this` will have had to be stored in a variable. – Ry- Jul 23 '18 at 04:33
  • http://krasimirtsonev.com/blog/article/post-transpilation-the-real-face-of-your-code-babel-es6 https://stackoverflow.com/questions/37182473/getting-this-as-undefined-when-using-arrow-function – yurzui Jul 23 '18 at 04:59

2 Answers2

3

With typescript While debugging, keep in mind that transpilers can rename variables. Using the original name in the console without sourcemaps that include renaming will show you undefined even if the original value isn't. Make sure you use the transpiled name in watches or console commands.

Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
2

When you're referencing this with your console.log statement inside its own class, you're using it in its relevant scope. Depending on the framework you are using, different terms are used to reference your class... AngularJS used $scope- Angular 2+ uses this to reference the current class (or current scope/context).

When you use this in your debugger you're using it outside of its scope. It no longer references the class you intend it to.

Each one of your components in Angular uses this to reference itself. Here's an article to explain in further detail: https://angular-2-training-book.rangle.io/handout/features/refresher_on_this.html

If we simplify it to basic javascript and look at your class as just a function a good example would be this:

function example(){
    var anything = 10;
    console.log(anything); //output: 10
}

console.log(anything); //undefined! we're out of scope :)

So looking at it from this perspective, this is nothing magical. It's just provided to us by Angular to make our references to other things inside our components easier.

Kyle Burkett
  • 1,375
  • 12
  • 28
  • 2
    Sorry, this isn’t right. Try it in regular JS, it’ll work fine. – Ry- Jul 23 '18 at 10:05
  • 1
    Ok, for sanity I took two seconds to do this in my console... I recieved: VM125:6 Uncaught ReferenceError: anything is not defined at :6:13.... @Ry ...you're incorrect- and whoever up vote your comment is crazy! – Kyle Burkett Jul 25 '18 at 21:53
  • If you're talking about console.log(this) in the dev console with js alone then you're not taking the angular tag into consideration and observing the question out of context... he doesnt specifically say angular in the question but he does tag it – Kyle Burkett Jul 25 '18 at 22:00
  • No, my comment is specifically pointing out this difference between Angular (specifically, TypeScript, a language compiled to JavaScript and possibly compiled to ES5) and how that compilation is responsible for the difference. Your “simplified to basic JavaScript” example has nothing to do with how a debugger works when stopped inside the function `example` (where `anything` is in scope). – Ry- Jul 26 '18 at 00:45
  • @Ry- you're right I completely misread his question... I missed the 'breakpoint' piece – Kyle Burkett Jul 26 '18 at 15:06