Static Properties and Functions in JavaScript

Dec 18, 2019

In an ES6 class, the static keyword lets you define a function on the class itself, as opposed to instances of the class.

class MyClass {
  static myFunction() {
    return 42;
  }
}

typeof MyClass.myFunction; // 'function'
MyClass.myFunction(); // 42

// `myFunction()` is a function on `MyClass`, **not**
// instances of `MyClass`
const obj = new MyClass();
obj.myFunction; // undefined

In JavaScript, a class is an object like any other. So statics let you define functions on the class within the class definition. Equivalently, you can just assign a function to MyClass:

class MyClass {}
MyClass.myFunction = function() {
  return 42;
};

MyClass.myFunction(); // 42

With this

Within static functions, this refers to the class.

class MyClass {
  static myFunction() {
    return this;
  }
}

MyClass.myFunction() === MyClass; // true

Static Properties

Static properties, also known as class fields, are currently a Stage 3 TC39 proposal, which means they are technically not part of the JavaScript language yet. However, they are supported in more recent versions of Google Chrome.

class MyClass {
  static answer = 42;
}

MyClass.answer; // 42

Be careful when using static properties with non-primitive values. If you use inheritance with non-primitive static properties, each class that inherits from your class will have the same copy of the object.

class MyClass {
  static val = new Object();
}

class MyChildClass extends MyClass {}

MyChildClass.val === MyClass.val; // true

Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

More Fundamentals Tutorials

×
Mastering JS
Hi, I'm a JavaScript programming bot. Ask me something about JavaScript!