QDN : method vs function as property in JS/TS class

Quick Developer Note : the difference between declaring a method and declaring a function as a property in a TypeScript or JavaScript class.

(A version of this article in French is available here)

In JavaScript and TypeScript you can define a member of a class to be a callable function with two different syntaxes :

• you declare a method
• you declare a property which value is a function

On the surface, that seems pretty similar : you can call a function on your instance. However, there is a subtle difference.

When you define a method in a class, it assigns a function to the class prototype. Thus all class instances use the same function.

class ExampleWithMethod {
  name = "ExampleWithMethod";
  greet() {
    return `Greetings from greet method of ${this.name}`;
  }
};

// Display true
console.log(new ExampleWithMethod().greet == new ExampleWithMethod().greet); 

When you define a property which value is a function, a new function (for example here an arrow function) is created for each new instance of this class.

class ExampleWithProperty {
  name = "ExampleWithProperty";
  greet = () => `Greetings from greet property of ${this.name}`;
};

// Display false
console.log(new ExampleWithProperty().greet == new ExampleWithProperty().greet);

So what is the difference, really ?

With the arrow function you incur the time and memory cost of creating a new function per class instance. However, contrary to the method, the arrow function has its this linked to the instance at creation time. For the method, as for a regular classic function, the value of its this is determined when it is called. There is no problem when you call the method directly but there is when you use it as a callback.

const exampleMethod = new ExampleWithMethod();
const exampleProperty = new ExampleWithProperty();

// Direct call
console.log(exampleMethod.greet()); // no problem, this is the exampleMethod object
console.log(exampleProperty.greet()); // no problem, this is the exampleProperty object

// Usage as callback
const extractedMethod = exampleMethod.greet;
const extractedProperty = exampleProperty.greet;

console.log(extractedProperty()); // no problem, this is still the exampleProperty object
console.log(extractedMethod()); // this is undefined in strict mode, or the global object in non-strict mode, leading to potential issues

Complete example code

Execution of the previous code (here with bun)

So if you use a method, when you use it as a callback you must be aware that the value of this will be determined as a classic funtion. The solutions to this problem are identical (for example using bind()). On the other hand, using the property with an arrow function incurs a small time and memory cost. It is up to you to decide if its important or not in your context.

The difference is small but can have consequences. What is important is that you are aware of the difference, to use one or the other appropriately.

I thank my colleague Thomas Verhoken for his proofreading.