46

I want to have a static property in an ES6 class. This property value is initially an empty array.

    class Game{

        constructor(){
           // this.cards = [];
        }

        static cards = [];
    }
    
    Game.cards.push(1);

    console.log(Game.cards);

How can I do it?

sepehr
  • 17,110
  • 7
  • 81
  • 119
Amir Azarbashi
  • 463
  • 1
  • 4
  • 4
  • https://jsfiddle.net/03xnguf6/ – Hackerman Dec 28 '17 at 18:45
  • This is not valid ES6 syntax. – Bergi Dec 28 '17 at 19:28
  • If the need is to retrieve some constant and not required to be from the same class, module exporting an objecting could be enough. For Example: `module.exports = { AppConstants: { SOME_CONSTANT: value } };` And to use, just import it as `const { AppConstants } = require('../path/to/AppConstants');` and call in code as `AppConstants.SOME_CONSTANT;` – VPaul Nov 14 '19 at 21:35
  • 1
    In 2021 you can just declare static property as you did. Your code snippet is just working now! (https://caniuse.com/?search=class%20fields). – maxime schoeni Aug 24 '21 at 11:20

2 Answers2

57
class Game{
   constructor(){}
}
Game.cards = [];

Game.cards.push(1);
console.log(Game.cards);

You can define a static variable like that.

zagoa
  • 798
  • 4
  • 23
  • 8
    thanks for the info, but is there not a concept to create a static variable for that class inside the class itself? It's just weird to see the property floating somewhere outside the class, I know in Java you can simply create a static class variable... is that not possible yet in javascript? – MMMM Mar 13 '19 at 09:06
  • 3
    @user2774480 The `Game.cards = []` part does exactly what you want. There is no syntax to do within the class declaration. – pishpish May 19 '19 at 09:04
53

One way of doing it could be like this:

let _cards = [];
class Game{
    static get cards() { return _cards; }
}

Then you can do:

Game.cards.push(1);
console.log(Game.cards);

You can find some useful points in this discussion about including static properties in es6.

margaretkru
  • 2,751
  • 18
  • 20
  • 1
    Something to note (could be helpful or harmful): Using a getter like this is functionally distinct from an answer like zarnifoulette's below, in that a getter allows you to access and modify a class's "static properties" (even though they're not technically *properties of* the class, but rather the value of a closure defined next to the class) even after using something like Object.freeze() to informally prevent further modifications to class structure/properties/keys. – iono Sep 19 '18 at 05:49
  • 1
    Defining a variable this way, in global scope, is a very bad and dangerous idea. Although in @zagoa 's answer the variable declaration is outside the class definition but its scope is Game class (note that not the instance or prototype, but the class itself) which means really a static property. And in his answer, you can also add this kind of static getter method inside the Game class but it does not add any additional capability to it. And note that a getter is being recalculated every 200 ms and it will be harmful. – ConductedClever Aug 11 '19 at 09:00