The biggest JavaScript OOP gotcha: the `this` keyword

Object Oriented programming is very straightforward for most OOP languages but JavaScript is a bit different. Here is an example of what I consider to be the biggest JavaScript gotcha.

Given a game creator function, we want to extend the game object so it has some additional methods to increment the score game.scorePoint().

You can use es6console to run our experiments.

Let's look at the code:

function GameCreator(score) {
    this.score = score;
}

GameCreator.prototype.scorePoint = function() {
    function incrementScore() {
        this.score++;
    }
    incrementScore();
};

GameCreator.prototype.endGame = function() {
    console.log("Game has finished ${this.score}")
};

var game = new GameCreator(0);

game.scorePoint();

After executing this code you will notice that game.score is still 0. But why? What happened? Is our code wrong?

Yes it's wrong (but it looks fine, right?). First let's understand why it is wrong. It turns out this from this.score++ represents the window object not the game instance. HA! Gotcha! That means our score is somewhere lost in the window.

The idea with this example is to understand that a nested function will not look up the instance, in our case the game instance. Imagine for a moment that scorePoint not only has incrementScore but also printScore, but hey why not also another function endGameWhenMaXScore. See? The function could be split into smaller ones which is great since it helps to organise the code, and ensures that each function is responsible for one and only thing.

Now to fix the issue... we can use Arrow Functions:

function GameCreator(score) {
    this.score = score;
}

GameCreator.prototype.scorePoint = function() {
    const incrementScore = ()=> {this.score++};
    incrementScore();
};

GameCreator.prototype.endGame = function() {
    console.log("Game has finished ${this.score}")
};

var game = new GameCreator(0);

game.scorePoint();

By using the Arrow Function we are indicating that we want to use the game instance instead of window.

Now game.score; will return 1.

Another way to get around this problem is ES6 class keyword.

function GameCreator(score) {
    constructor (score) {
        this.score = score;
    }

    increment() {
        this.score++;
    }

    endGame(){
        console.log("Game has finished ${this.score}")
    }
}

var game = new GameCreator(0);

game.scorePoint();

Isn't it pretty? I like it, you like it, everybody does.

So we have learn that while this can be very tricky, it can be managed. You just need to understand this in each context.

Try experimenting with the this keyword on different contexts and analyse the results. It will help you understanding how it works. At the end you will avoid a lot of mistakes and you will become a better JS developer!