Integer returning as NaN when added

Question

Writing some code, and when creating an instance of a class, something strange happens with an integer variable I have:

function Mat(x, y, spawner) {
    this.x = x;
    this.y = y;
    this.val = 1;
    this._spawner = spawner;
    this.newborn = true;
    this.bornTime = 0;
    this.spawnTimer = setInterval("this.bornTime++; console.log(this.bornTime);", 1000);
}

Pretty cut and clear code; every second after an instance of the variable is created, it should increment the bornTime variable by 1 and log it.

Mat.prototype.update = function() {
    if (this.bornTime >= 5) {
        this.bornTime = null;
        clearInterval(this.spawnTimer);
        this.newborn = false;
        console.log("Grown!");
    }
}

This additional code would cause this instance to be "grown" after 5 seconds, however when I check the console, it reads that bornTime is not a number(NaN).

Why is this, and is there a solution that I am not seeing?

Answer 1

this inside the setTimeout code is not the same as outside (more info on MDN), so your code is actually calculating undefined++, which is NaN.

You have to create another variable, and pass a function to setTimeout instead of letting it eval a string (by the way, passing a function is supposed to be faster, and looks better):

var that = this;
this.spawnTimer = setInterval(function(){
    that.bornTime++; 
    console.log(that.bornTime);
}, 1000);

Answer 2

I know this is 5 years old question but its 2018 and heres an Es6 syntax solution to avoid extra step of binding key word this.

this.spawnTimer = setInterval(() => {
    this.bornTime++; 
    console.log(this.bornTime);
}, 1000);