When comparing TypeScript class functions with regular functions and variables, which one yields better performance?

Question

When comparing TypeScript class functions with regular functions and variables, which one yields better performance?

When it comes to defining functions, is it better to use variables or functions directly? Also, how does this affect tree-shaking?

I am dealing with a lot of calculation-intensive helper classes and I am unsure about the optimal approach in terms of memory and speed.

Here are the different methods I have been considering:

class MyClass {
  readonly functionA = (v: string | number, maxDeep: number, curDeep: number = 0): string => {
      if (curDeep < maxDeep) {
          return this.functionA(v, maxDeep, curDeep + 1);
      } else {
          return "function A" + v;
      }
  }

  static functionB(v: string | number, maxDeep: number, curDeep: number = 0): string {
      if (curDeep < maxDeep) {
          return MyClass.functionB(v, maxDeep, curDeep + 1);
      } else {
          return "function B" + v;
      }
  }

  functionC(v: string | number, maxDeep: number, curDeep: number = 0): string {
      if (curDeep < maxDeep) {
          return this.functionC(v, maxDeep, curDeep + 1);
      } else {
          return "function C" + v;
      }
  }

  static readonly functionD = (v: string | number, maxDeep: number, curDeep: number = 0): string => {
      if (curDeep < maxDeep) {
          return MyClass.functionD(v, maxDeep, curDeep + 1);
      } else {
          return "function D" + v;
      }
  }
}

I attempted to use JSBen to compare the difference, but the results appeared to be inconsistent. https://i.sstatic.net/rc8Pw.png

javascript typescript function class tree-shaking

Answer 1

Answer №1

If the concern for performance optimization is at such a granular level, then including a class with only static methods can introduce unnecessary overhead. Classes are typically meant to be instantiated, and not utilizing this feature leads to wastage of computational resources.

Upon testing your examples on MacOS using Chrome 90.0.4430.93, the results showed:

https://i.sstatic.net/1cd2S.png

The performance costs of static methods were significantly higher compared to instance methods which are guaranteed to be faster. This could possibly be attributed to classes being designed for instantiation.

A simpler alternative would be using a simple object. Consider incorporating these two tests:

const obj = {
  functionE(v, maxDeep, curDeep = 0) {
    //...
  },

  functionF: (v, maxDeep, curDeep = 0) => {
    //...
  }
};

https://i.sstatic.net/9yZ3K.png

These perform nearly as well as instance methods and follow a more logical pattern. Without the need for classes, there is no instantiation required.

Alternatively, an even simpler approach can be taken:

function rawFunctionStatementG(v, maxDeep, curDeep = 0) {
  //...
}

const rawFunctionVarH = (v, maxDeep, curDeep = 0) => {
  //...
};

https://i.sstatic.net/Q5aVO.png

In terms of performance, this method stands out due to direct reference to the function without needing to look it up in an object.

Updated jsben.ch

Furthermore, from a tree shaking perspective, this format proves to be the most efficient. Bundlers find it easier to manage whole exported values rather than handling individual objects separately.

If you structure your code like this:

// util-fns.ts
export function myFuncA() { /* ... */ }
export function myFuncB() { /* ... */ }

// some consumer file
import { myFuncA } from './util-fns'

It becomes simple for a bundler to identify unused functions like myFuncB and potentially remove them during bundling.

To conclude...

“The real problem is that programmers have spent far too much time worrying about efficiency in the wrong places and at the wrong times; premature optimization is the root of all evil (or at least most of it) in programming.” – Donald Knuth

In the vast majority of JavaScript applications, performance optimizations at such a micro-level may not have significant impact. It's essential to prioritize data structures that align with the application's requirements and adhere to the established standards within the codebase/organization.

Answer 2

If the concern for performance optimization is at such a granular level, then including a class with only static methods can introduce unnecessary overhead. Classes are typically meant to be instantiated, and not utilizing this feature leads to wastage of computational resources.

Upon testing your examples on MacOS using Chrome 90.0.4430.93, the results showed:

https://i.sstatic.net/1cd2S.png

The performance costs of static methods were significantly higher compared to instance methods which are guaranteed to be faster. This could possibly be attributed to classes being designed for instantiation.

A simpler alternative would be using a simple object. Consider incorporating these two tests:

const obj = {
  functionE(v, maxDeep, curDeep = 0) {
    //...
  },

  functionF: (v, maxDeep, curDeep = 0) => {
    //...
  }
};

https://i.sstatic.net/9yZ3K.png

These perform nearly as well as instance methods and follow a more logical pattern. Without the need for classes, there is no instantiation required.

Alternatively, an even simpler approach can be taken:

function rawFunctionStatementG(v, maxDeep, curDeep = 0) {
  //...
}

const rawFunctionVarH = (v, maxDeep, curDeep = 0) => {
  //...
};

https://i.sstatic.net/Q5aVO.png

In terms of performance, this method stands out due to direct reference to the function without needing to look it up in an object.

Updated jsben.ch

Furthermore, from a tree shaking perspective, this format proves to be the most efficient. Bundlers find it easier to manage whole exported values rather than handling individual objects separately.

If you structure your code like this:

// util-fns.ts
export function myFuncA() { /* ... */ }
export function myFuncB() { /* ... */ }

// some consumer file
import { myFuncA } from './util-fns'

It becomes simple for a bundler to identify unused functions like myFuncB and potentially remove them during bundling.

To conclude...

“The real problem is that programmers have spent far too much time worrying about efficiency in the wrong places and at the wrong times; premature optimization is the root of all evil (or at least most of it) in programming.” – Donald Knuth

In the vast majority of JavaScript applications, performance optimizations at such a micro-level may not have significant impact. It's essential to prioritize data structures that align with the application's requirements and adhere to the established standards within the codebase/organization.

When comparing TypeScript class functions with regular functions and variables, which one yields better performance?

Answer №1

Similar questions

Using VueJS: accessing this.$store within component data property

passport not initializing session with requests

The inner nested ng-repeat section is not properly binding to the scope variable and appears to be commented out

TypeScript in Angular causing lodash tree shaking failure

Handling AJAX requests using jQuery

Leveraging Ajax and jQuery to create a POST request for adding a new record to a MySQL table within a Node.js server

How do I prevent my image slider from scrolling to the top of the page when I click next or prev?

What is the best way to update a value and trigger a re-render in ReactJS?

Tips for invoking C language code from JavaScript by using the js-ctypes extension in Firefox

Is it possible to modify a prop in a functional component?

Crafting a robust and secure password using Yup and Formik while receiving personalized error notifications

The efficiency of Testing Library findBy* queries is optimized when utilized alongside async/await functionality

What is preventing my counter from functioning when I click on the canvas?

The fetch request in a React application is not returning a response body, whereas the same request functions properly when made using Postman

How can I exclude the last parameter from a function type in Typescript?

Save a PHP variable and then use it on an HTML page

What is the best way to refresh updated .js files directly from the browser console?

Navigate to the specified URL once the Ajax function has completed successfully

eliminating reliance on promises

Is it possible to create multiple text input components using the "each" function, and how can I update the state by combining all of them together?