Why can’t I use add operator in function with this?

Question

Why when I run the following code:

function Pessoa(){
    this.idade = 0;
    console.log(this.idade);
    setTimeout(function() {
        this.idade++;
          console.log(this.idade);
    }, 2000);
}

new Pessoa();

My way out is

0
NaN

And when I change the assignment done within the function setTimeout() for:

function Pessoa(){
    this.idade = 0;
    console.log(this.idade);
    setTimeout(function() {
        this.idade = 1;
          console.log(this.idade);
    }, 2000);
}

new Pessoa();

My way out is:

0
1

Answer 1

This happens because the this in the function within the setTimeout no longer refers to Person but the anonymous function you defined.

You have two alternatives to this scenario:

1 - Save reference to this for Pessoa within a variable, so that you can then access with this variable the reference for person.

function Pessoa(){
    this.idade = 0;
    console.log(this.idade);

    var _this = this;
    setTimeout(function() {
        _this.idade++;
          console.log(_this.idade);
    }, 2000);
}

new Pessoa();

2 - Using Arrow functions. With Arrow functions you can maintain the reference of this in the external function.

function Pessoa(){
    this.idade = 0;
    console.log(this.idade);

    setTimeout(() => {
        this.idade++;
          console.log(this.idade);
    }, 2000);
}

new Pessoa();