How do I use a static variable in ES6 class?

Question

I'm trying to use a static variable in es6. I'd like to declare a static variable count in Animal class and increase it. However, I couldn't declare a static variable through static count = 0;, so I tried another way like this:

class Animal {
  constructor() {
    this.count = 0;
  }

  static increaseCount() {
    this.count += 1;
  }

  static getCount() {
    return this.count;
  }
}

console.log(Animal.increaseCount()); // undefined
console.log(Animal.getCount()); // NaN

I expected console.log(Animal.getCount()); to be 1, but it doesn't work. How do I declare a static variable and modify it by calling a method?

see https://stackoverflow.com/questions/1535631/static-variables-in-javascript — Sébastien Palud, Jul 17 '18 at 12:58

T.J. Crowder · Accepted Answer · 2020-04-12T07:33:35.173

Your class has no static variables (if by static variable you mean static property). getCount returns NaN (after you call increaseCount) because Animal has no count property initially. Then increaseCount does undefined + 1 which is NaN. Instances created by new Animal have a count property initially, but Animal itself does not until you call increaseCount. this within a static method refers to the Animal class (constructor function) itself (if you call it via Animal.methodName(...)).

You could give Animal a count property:

Animal.count = 0;

Live Example:

class Animal {
  constructor() {
  }

  static increaseCount() {
    this.count += 1;
  }

  static getCount() {
    return this.count;
  }
}
Animal.count = 0;

Animal.increaseCount();
console.log(Animal.getCount());
Animal.increaseCount();
console.log(Animal.getCount());

With the static class fields proposal (currently at Stage 3), you could do that declaratively with static count = 0; in Animal. Live Example (Stack Snippets' Babel configuration seems to support it):

class Animal {
  constructor() {
  }

  static count = 0;
  
  static increaseCount() {
    this.count += 1;
  }

  static getCount() {
    return this.count;
  }
}

Animal.increaseCount();
console.log(Animal.getCount());
Animal.increaseCount();
console.log(Animal.getCount());

With the private static proposal (at Stage 3 and actively being implemented), you could even make count private:

class Animal {
  constructor() {
  }

  static #count = 0;

  static increaseCount() {
    this.#count += 1;
  }

  static getCount() {
    return this.#count;
  }
}

Animal.increaseCount();
console.log(Animal.getCount());
Animal.increaseCount();
console.log(Animal.getCount());

Stack Snippets' Babel config doesn't support that, but you can run it live in their REPL.

Side note: Using this within a static method to refer to the class (constructor function) is a bit tricky if there are subclasses, because for instance, if you had:

class Mammal extends Animal {}

and then

Mammal.increaseCount();

this within increaseCount (which it inherits from Animal) refers to Mammal, not Animal.

If you want that behavior, use this. If you don't, use Animal in those static methods.

Is it allowed `static count = 0;` in `Animal` class? It causes `SyntaxError: Unexpected token`. I'm using Babel with Webpack. — Simon Park, Jul 17 '18 at 13:19
@Caesium133 - As I said above, that's part of the [static class fields proposal](https://github.com/tc39/proposal-static-class-features/) which is currently at Stage 3 of the process (so, it's not in the spec yet, and engines are only just now looking to add it). — T.J. Crowder, Jul 17 '18 at 15:27
How do you put increaseCount in the constructor of a new Animal? isn't that, ultimately, why people usually want counters on classes? Seems you don't show that case. (tho' i suppose `count` should really be a property of a collection, not the instance-class -- making count a static property of the class is a kind of 'low-budget' collection, eh? — johny why, Apr 12 '20 at 00:37
`static count = 0;` seems to work these days... am I dreaming? however, it is very different than Java's static — OhadR, Apr 14 '20 at 13:48
@OhadR - No, you're not dreaming. :-) V8 (in Chrome, Node.js, Brave, Chromium, the new Edge, etc.) and SpiderMonkey (in Firefox 75+) have both started supporting `static` public fields. Safari is still in progress. — T.J. Crowder, Apr 14 '20 at 14:33

Estus Flask · Answer 2 · 2020-04-22T08:59:34.720

14

As mentioned in other answers, this.count refers to instance property in constructor. In order for static property to be initialized, Animal.count should be set.

Class fields proposal provides syntactic sugar for Animal.count = 0 that is available with transpilers (Babel, etc):

class Animal {
  static count = 0;
  ...
}

An alternative in ES6 is to use initial values, in this case Animal.count initial value doesn't need to be set explicitly, e.g.:

class Animal {    
  static increaseCount() {
    this.count = this.getCount() + 1;
  }

  static getCount() {
    return this.count || 0;
  }
}

Accessor methods aren't welcome in JavaScript classes - this is what getter/setter descriptors are for:

class Animal {    
  static increaseCount() {
    this.count += 1;
  }

  static get count() {
    return this._count || 0;
  }

  static set count(v) {
    this._count = v;
  }
}

Static-only class is considered antipattern in JavaScript because a state or other traits that are specific to classes aren't used. In case there should be only one instance, plain object should be used (unless there are other concerns that could benefit from class):

const animal = {    
  increaseCount() {
    this.count += 1;
  },

  get count() {
    return this._count || 0;
  },

  set count(v) {
    this._count = v;
  }
};

edited Apr 22 '20 at 08:59

answered Jul 17 '18 at 13:13

Estus Flask

206,104
70
425
565

But aren't your getter and setter functions Accessor methods? – johny why Apr 12 '20 at 00:11
Isn't your getCount an Accessor method? – johny why Apr 12 '20 at 00:26
Your Animal class with getter and setter returns 0 with: `let b = new Animal; console.log(Animal.count);` – johny why Apr 12 '20 at 00:33
@johnywhy This is expected behaviour. It's static-only class. It's supposed to be used like `Animal.increaseCount(); console.log(Animal.count === 1)`. `getCount` is called accessor method, `count` defined by a pair of `get` and `set` is called accessor descriptor. – Estus Flask Apr 12 '20 at 06:35
1

I would say to be more useful, your class with get/set should increment itself when a new instance is created. Your final object style doesn't actually return the value of _count, if _count == 0. It returns 0 when _count is actually undefined. It's a false result. I'd consider that a bug. Since that object requires initializing count to 0 externally, it seems no different than just using a variable. Is an object which acts no different than a variable considered an anti-pattern? – johny why Apr 22 '20 at 08:26
1

@johnywhy Thanks for noticing, there was a typo, it should be this.count and not this._count in increaseCount and other members besides get/set count. `get count() { return this._count || 0 }` is mostly the same as `_count: 0, get count() { return this._count }`. I prefer `|| 0` because it takes less chars to type and also fixes some invalid values, could be changed to `this._count = +v || 0` in `set` instead for better value conditioning. It depends on the case if it's an antipattern. An object can be extended and is more testable. And its behaviour can be changed any time if needed – Estus Flask Apr 22 '20 at 09:18

score 4 · Answer 3 · answered Jul 17 '18 at 13:05

4

Static class-side properties and prototype data properties must be defined outside of the ClassBody declaration.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

class Animal {

  static increaseCount() {
    Animal.count += 1;
  }

  static getCount() {
    return Animal.count;
  }
}

Animal.count = 0;

Animal.increaseCount();
console.log(Animal.getCount()); // undefined

answered Jul 17 '18 at 13:05

Farooq Hanif

1,779
1
15
22

2

It's ok but the last code line return 1 , not undefined. It could be misleading for newbie – Nick Mar 23 '20 at 21:43
Today you don't have to declare it outside anymore – Eric Feb 20 '21 at 04:22

score 2 · Answer 4 · answered Dec 14 '21 at 15:55

You can simulate static variables with static getter and setter

 export class MyClass {
  static get variable() {
    return this.foo;
  }

  static set variable(foo) {
    this.foo = foo;
  }
}

And use it like this

  MyClass.variable = 'bar';
  console.log(MyClass.variable);

mpm · Answer 5 · 2018-07-17T13:05:24.870

To set a static variable, set it on the object Animal itself. As of now in Javascript you cannot directly declare static properties inside classes like you can declare static methods.

class Animal {
    constructor() {
    }

    static increaseCount() {
        this.count += 1;
    }

    static getCount() {
        return this.count;
    }
}
Animal.count = 0;
console.log(Animal.increaseCount());
console.log(Animal.getCount());

score 1 · Answer 6 · answered Oct 01 '20 at 16:13

you can use closures to simulate static variables

const Animal= (() => {
    let count= 0;

    class Animal {
        constructor() {}

        static increaseCount() {
            count += 1;
        }

        static getCount() {
            return count;
        }
    }

    return Animal;
})();

console.log(Animal.getCount());
Animal.increaseCount();
console.log(Animal.getCount());

score 0 · Answer 7 · answered Jul 08 '21 at 08:39

0

If you want to have incremential ids:

 constructor() {
    super(template);
    if (typeof MyClass.nextId == 'undefined') {
    MyClass.nextId = 0;
    }
    this._id = `${MyClass.nextId++}`;
 }

answered Jul 08 '21 at 08:39

Dotista

404
3
12

How do I use a static variable in ES6 class?

7 Answers7

Linked