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

Possible duplicate of [ES6 class variable alternatives](https://stackoverflow.com/questions/22528967/es6-class-variable-alternatives) — Ivar, Jan 05 '19 at 01:23

CertainPerformance · Accepted Answer · 2022-02-23T20:05:45.137

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 = {};
  ...
}

Thank you! It's sad to read that js doesn't support it jet. (<3 bug fixed) — Nurio Fernández, Jan 05 '19 at 01:29

score 1 · Answer 2 · answered Jan 05 '19 at 01:24

1

If you mean static variable for all instance of the class, declare: GCache.cache = {} below your class declaration

answered Jan 05 '19 at 01:24

artkon

11
2

score 0 · Answer 3 · answered Jan 05 '19 at 01:22

0

Babel's plugin-proposal-class-properties is probably what you're looking for. It enables support for static variables/methods inside the class declaration.

answered Jan 05 '19 at 01:22

Yunyu L.

715
9
22

How to define a static variable inside a JS class

3 Answers3