How to define a static variable inside a JS class

Question

I'm building a static class to store data inside an a array and i want to declare a static variable but i don't know how to do it on javascript.

JS code:

class GCache {

    // Define cache variable
    static cache = {}; // <--- that is what i don't know how to do

    /**
     * Check if data is on cache
     * @param {*} id 
     */
    static isOnCache(id){
        return this.cache.hasOwnProperty(id);
    }

    /**
     * Add data to cache
     * @param {*} id 
     * @param {*} json 
     */
    static addToCache(id, json){
        if(this.isOnCache(id)) return;
        this.cache[id] = json;
    }

    /**
     * Obtain data from cache
     * @param {*} id 
     */
    static getFromCache(id){
        if(this.isOnCache(id)) return;
        return this.cache[id];
    }

}

Thank you <3

Answer 1

In up-to-date JavaScript environments, you can use the static keyword when inside a class to assign properties to the instance itself - the code in your question works fine now.

class SomeClass {
    static someStaticProperty = {}
}
console.log(SomeClass.someStaticProperty);

---

In older environments, and at the time the question was originally posted, non-function properties couldn't be added to a class itself inside the class definition. It looks ugly, but you'll have to assign the property outside of the class definition:

class GCache {
  ...
}
GCache.cache = {};

Also note that your getFromCache function probably has a bug: you probably want to return early if the id being searched for does not exist in the cache:

if(!this.isOnCache(id)) return;

class GCache {
    /**
     * Check if data is on cache
     * @param {*} id 
     */
    static isOnCache(id){
        return this.cache.hasOwnProperty(id);
    }

    /**
     * Add data to cache
     * @param {*} id 
     * @param {*} json 
     */
    static addToCache(id, json){
        if(this.isOnCache(id)) return;
        this.cache[id] = json;
    }

    /**
     * Obtain data from cache
     * @param {*} id 
     */
    static getFromCache(id){
        if(!this.isOnCache(id)) return;
        return this.cache[id];
    }

}
GCache.cache = {};
GCache.addToCache('myid', 'data');
console.log(GCache.getFromCache('myid'));

But, in this case, it would probably be easier to use a plain object, rather than a class. The class isn't being used to instantiate anything, after all, and with an object, you can both define cache inside the object, and reduce the syntax noise by getting rid of all the statics:

const GCache = {
  cache: {},
  isOnCache(id) {
    return this.cache.hasOwnProperty(id);
  },
  addToCache(id, json) {
    if (this.isOnCache(id)) return;
    this.cache[id] = json;
  },
  getFromCache(id) {
    if (!this.isOnCache(id)) return;
    return this.cache[id];
  }
}
GCache.addToCache('myid', 'data');
console.log(GCache.getFromCache('myid'));

---

There is currently a proposal allowing you to set static non-method properties onto a class. It's currently at Stage 2, which means it's expected to eventually be implemented officially. Once it lands, the code:

class GCache {
  ...
}
GCache.cache = {};

can be replaced by:

class GCache {
  static cache = {};
  ...
}