Benchmark: Class vs bind vs hook

Script Preparation code:

class TestClass {
    ctx = {index: 0};

    constructor(ctx) {
        this.ctx = ctx;
    }

    callback() {
        this.ctx.index += 1;
        console.log(this.ctx.index);
    }
}

function testFunction() {
    this.ctx.index += 1;
    console.log(this.ctx.index);
}

function useTestFunction(ctx) {
    return () => {
        ctx.index += 1;
        console.log(ctx.index);
    }
}

document.addEventListener('test1', () => {
    console.clear();

    const ctx = {index: 0};
    while (ctx.index < 100000) {
        const item = new TestClass(ctx);
        item.callback();
    }
});

document.addEventListener('test2', () => {
    console.clear();

    const ctx = {index: 0};
    while (ctx.index < 100000) {
        const callback = testFunction.bind({ctx});
        callback();
    }
});

document.addEventListener('test3', () => {
    console.clear();

    const ctx = {index: 0};
    while (ctx.index < 100000) {
        const callback = useTestFunction(ctx);
        callback();
    }
});

document.addEventListener('test4', () => {
    console.clear();

    const ctx = {index: 0};
    const item = new TestClass(ctx);
    while (ctx.index < 100000) {
        item.callback();
    }
});

Tests:

Class
document.dispatchEvent(new CustomEvent('test1'));
Bind
document.dispatchEvent(new CustomEvent('test2'));
Hook
document.dispatchEvent(new CustomEvent('test3'));
Class (reused)
document.dispatchEvent(new CustomEvent('test4'));

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Class (reused)

5/s

Class

5/s

Hook

5/s

Bind

5/s

View exact numbers

✓ Class (reused): 5 ops/sec
• Class: 5 ops/sec
• Hook: 5 ops/sec
• Bind: 5 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Class
Bind
Hook
Class (reused)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Windows

View result in a separate tab

Class

4/s

Bind

4/s

Hook

3/s

Class (reused)

3/s

View exact numbers

Test name	Executions per second
✓ Class	4 Ops/sec
Bind	4 Ops/sec
Hook	3 Ops/sec
Class (reused)	3 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Benchmark Test**

The benchmark measures the speed of making and running three different types of methods:

1. **Class Method**: A method defined as a class property, which is instantiated and called repeatedly.
2. **Bound Function**: A function that has been bound to an object using the `bind()` method, which returns a new function with the original function's `this` context set to the specified value.
3. **Hook Created Function**: A function created directly in the code, which does not have any special properties or methods attached to it.

**Options Compared**

The benchmark compares the performance of these three approaches:

* Class Method: Creating a new instance of the class and calling its method
* Bound Function: Binding a function to an object using `bind()`
* Hook Created Function: Creating a new function directly in the code without any special properties or methods

**Pros and Cons**

* **Class Method**: Pros:
	+ Easier to understand and maintain for some developers.
	+ Can be more flexible due to the use of context objects.
*   Cons:
    *   Creates a new instance each time, which can lead to performance overhead
    *   May not be suitable for all use cases where memory efficiency is crucial
* **Bound Function**: Pros:
    + Optimizes performance by reusing existing functions with bound context
    + Can improve code readability and maintainability
*   Cons:
	+ Requires careful consideration when binding functions to ensure correct behavior
	+ May lead to confusing code if not used correctly
* **Hook Created Function**: Pros:
	+ Provides the most direct and efficient way of executing a function
	+ Does not create unnecessary overhead like bound functions or class instances

Cons:
    *   May require additional setup and maintenance for some developers

**Library Usage**

The benchmark does not explicitly mention any libraries, but it does use the `CustomEvent` API to dispatch events. The `CustomEvent` API is part of the Web APIs specification and allows developers to create custom events that can be dispatched by various elements on a webpage.

**Special JS Features/Syntax**

This benchmark does not appear to utilize any special JavaScript features or syntax, such as async/await, destructuring, or modern class definitions. It primarily focuses on comparing the performance of traditional function-based approaches.

**Alternatives**

There are several alternatives that can be used for creating functions or methods in JavaScript:

*   **Arrow Functions**: Shorter and more concise than traditional functions
*   **Function Expressions**: Allow developers to create functions with specific parameter names, improving readability
*   **Constructors**: Provide an alternative way of defining classes using constructors

It's essential to consider the trade-offs between these alternatives when choosing a suitable approach for your project.

Class vs bind vs hook (version: 1)

This test measures the speed of making and running a class method vs bound function vs hook created function

Comparing performance of: `Class vs Bind vs Hook vs Class (reused)`

Created: 2 years ago by: Registered User

Go to the latest result

Class

Bind

Hook

Class (reused)

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Class vs bind vs hook (version: 1)

This test measures the speed of making and running a class method vs bound function vs hook created function

Comparing performance of: Class vs Bind vs Hook vs Class (reused)

Created: 2 years ago by: Registered User

Go to the latest result

Class

Bind

Hook

Class (reused)

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `Class vs Bind vs Hook vs Class (reused)`