Benchmark: callback vs instance method

Script Preparation code:

const _onSuccess = () => {
    return {
        a: "something",
        b: "something else"
    }
}

const upload = (successCb) => {
    return successCb()
}

const onClick = () => {
    return upload(_onSuccess)
}

const onClickCb = () => {
    const onSuccess = () => {
        return {
            a: "something",
            b: "something else"
        }
    }

    return upload(onSuccess)
}

window.onClick = onClick
window.onClickCb = onClickCb

Tests:

instance method
onClick()
callback
onClickCb()

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
instance method
callback

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:77.0) Gecko/20100101 Firefox/77.0

Browser/OS: Firefox 77 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
instance method	96347256.0 Ops/sec
callback	111812848.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided JSON.

**Benchmark Definition**

The benchmark is testing two different approaches to handle an event: using a callback function (`onClickCb`) versus using an instance method (`onClick`).

In this case, both methods are intended to call an external function `upload`, which returns a value. The difference lies in how they pass this value to the `upload` function.

**Options compared**

There are two options being compared:

1. **Callback function**: `onClickCb()`
	* In this approach, a callback function `onSuccess` is defined within the `onClickCb` method.
	* When `onClickCb` is called, it executes the `onSuccess` callback function, which returns a value.
	* This value is then passed to the `upload` function via the callback parameter.
2. **Instance method**: `onClick()`
	* In this approach, an instance method `onClick` is defined and assigned to the `window.onClick` property.
	* When `onClick` is called, it directly returns the result of calling the `upload` function with the `_onSuccess` variable as a parameter.

**Pros and Cons**

Here are some pros and cons of each approach:

1. **Callback function**:
	* Pros:
		+ Easier to use for one-time executions or when the return value is not needed.
		+ Less overhead compared to instance methods, which require a separate execution context.
	* Cons:
		+ May lead to tighter coupling between components that use callbacks.
2. **Instance method**:
	* Pros:
		+ More flexible and reusable for repeated executions or when the return value is needed.
		+ Allows for easier testing and debugging due to its explicit nature.
	* Cons:
		+ Requires more overhead due to the creation of a new execution context.

**Library and special JS features**

There are no libraries explicitly mentioned in the provided JSON. However, it's worth noting that `window.onClick` is used as a property name, which might indicate that this code is intended for a browser environment or a specific JavaScript runtime.

No special JavaScript features or syntax are being tested or utilized in this benchmark.

**Other alternatives**

Some alternative approaches to handling events could include:

* Using a different event dispatching mechanism, such as `addEventListener` or a custom event bus.
* Employing a different pattern, like the "Observer Pattern" where the producer (in this case, `onClick`) notifies observers (the callback function) of changes.
* Utilizing functional programming techniques, such as using higher-order functions or currying.

Keep in mind that these alternatives are not directly related to the specific benchmark being tested and would require additional context to be considered viable alternatives.

Related benchmarks:

callback vs instance method (version: 1)

Comparing performance of: instance method vs callback

Created: 4 years ago by: Registered User

Jump to the latest result

instance method

callback

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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