Javascript use anonymous function inside class methods

Question

I am refactoring working code in to class. I am getting an error where I am loading some Json and parsing it. This code works fine as a function but not inside a class method.

Code:

class MemoryCards {
    
    constructor() {
        this.gameData = [];
        this.cardData = [];

        this.currentLives = 0;
        this.levelLives = 0;
        this.level = 1;

        this.hasFlippedCard = false;
        this.lockDeck = false;
        this.firstCard, this.secondCard;
        this.trackMatches = 0;

        this.cardSelection = [];
    }

    startGame () {
        this.loadJSON(function(response) {
            this.gameData = JSON.parse(response);}, 
            'gameData.json');
    }

    loadJSON(callback, file) {   

        var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
        xobj.open('GET', `assets/data/${file}`, false);
        xobj.onreadystatechange = function () {
            if (xobj.readyState == 4 && xobj.status == "200") {
                callback(xobj.responseText);
            }
        };
        xobj.send(null);  
    }
}

Error:

game.js:21 Uncaught TypeError: Cannot set property 'gameData' of undefined
    at game.js:21
    at XMLHttpRequest.xobj.onreadystatechange (game.js:68)
    at MemoryCards.loadJSON (game.js:71)
    at MemoryCards.startGame (game.js:20)
    at (index):77

Use an arrow function, `this.loadJSON(response => { this.gameData = ... })` — goto, Jan 16 '21 at 19:43
Does this answer your question? [Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?](https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-interchangeable) — goto, Jan 16 '21 at 19:46

Vince · Accepted Answer · 2021-01-16T20:13:33.913

Implement Arrow Function:

startGame () {
  this.loadJSON((response) => {
  this.gameData = JSON.parse(response);
 }, 'gameData.json');
}

Why it Works?

It is because of the this keyword. The this keyword is referring to the Global Object by default. functions have their own block scope but arrow and normal functions have different world when it comes to looking for global object.

This code or normal function is looking for it's parent object and that is the startGame function.

function(response) {
 this.gameData = JSON.parse(response);
}, 'gameData.json')

but this arrow function is looking for the last parent object and that is MemoryCards

(response) => {
  this.gameData = JSON.parse(response);
 }, 'gameData.json')

Think of this way the arrow function is looking for the LAST scope or { }

You should include an explanation as to why the arrow function solves this issue — Ted Brownlow, Jan 16 '21 at 19:47

Javascript use anonymous function inside class methods

1 Answers1