Arrow function vs bound function with 100 instances

Benchmark created by Nicolas Charpentier on November 13, 2017

Setup

// Arrow function method
  const A = class A {
    constructor() {
      this.counter = 0;
  
      this.handleClick = () => {
        this.counter++;
      }
    }
  }
  
  // Binded function method
  const B = class B {
    constructor() {
      this.counter = 0;
      this.handleClick = this.handleClick.bind(this);
    }
    
    handleClick() {
      this.counter++;
    }
  }
  
  // Function method
  const C = class C {
    constructor() {
      this.counter = 0;
    }
    
    handleClick() {
      this.counter++;
    }
  }

Test runner

Array(100).fill({})
  .map(() => new A())
  .map(component => component.handleClick());

Array(100).fill({})
  .map(() => new B())
  .map(component => component.handleClick());

Array(100).fill({})
  .map(() => new C())
  .map(component => component.handleClick());

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published by Nicolas Charpentier on November 13, 2017