I was doing some research whether I should use arrow functions or functions with bind(this). I have a class that will be instantiated multiple times (x1000) in some specific scenarios.

Google seems to return results related to react only which is not my case.The only valid info I found was this one https://medium.com/@charpeni/arrow-functions-in-class-properties-might-not-be-as-great-as-we-think-3b3551c440b1 + some stackoverflow answers stating the exact opposite so I decided to do my own tests.

I do care about the instantiation of classes, not so much about calling of the functions itself (as it will be rare in my case)

I wrote this simple typescript (compiled to ES6) to do some tests

class FuncClass {
  val = 5;
  constructor() { this.func = this.func.bind(this); }
  func() { return this.val; }
}

class ArrowClass {
  val = 5;
  arrow = () => this.val;
}

const outterCount = 20;
const count = 100000;

const fc = [];
export function funcClassTest() {
  for (let out = 0; out < outterCount; out++) {
    console.time('funcClass');
    for (let index = 0; index < count; index++) {
      const x = new FuncClass();
      //x.func();
      //fc.push(x);
    }
    console.timeEnd('funcClass');
  }
}

const ac = [];
export function arrowClassTest() {
  for (let out = 0; out < outterCount; out++) {
    console.time('arrowClass');
    for (let index = 0; index < count; index++) {
      const x = new ArrowClass();
      //x.arrow();(
      //ac.push(x);
    }
    console.timeEnd('arrowClass');
  }
}

My observations:

1. Arrow functions are easier to write (obviously :))

2. Constructing the objects is same in both cases (100k instances takes ~0.2ms on my laptop)

3. Constructing and calling a function is a big difference (uncomment the arrow/func call, increase the counter for bigger difference). Arrow function is 1.5-2x slower then bound function.I tried also doing all calls on single instance, and the difference is almost zero.

4. Uncoment the push call to see some memory info. This is where the biggest surprise comes. Classes with arrow function increase the heap size by ~350MBs. Bound function test needs "only" ~200MBs of heap.

My conslusion

This was obviously very simple test. I ignored the first run and run it couple times to get some averages. The results might be different with other JS engine or HW. It aimed to test my specific scenario where bound functions seem to be a winner (because of less memory usage).

The number of instances in this is test is extreme 20x100k so in real app it probably does not matter.

Do you have a similar/opposite experience?