Benchmark: Direct call vs bind vs call vs apply vs underscore

HTML Preparation code:

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js

Script Preparation code:

function test(msg) {
  var d = msg;
}

Tests:

direct call
test("Hello");
bind
test.bind(null, "Hello")();
call
test.call(null, "Hello");
apply
test.apply(null, ["Hello"]);
_.bind
_.bind(test, "Hello");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
direct call
bind
call
apply
_.bind

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36

Browser/OS: Chrome 90 on Mac OS X 10.14.6

View result in a separate tab

Test name	Executions per second
direct call	17042724.0 Ops/sec
bind	15083409.0 Ops/sec
call	14750788.0 Ops/sec
apply	13019816.0 Ops/sec
_.bind	2602306.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided benchmark compares the performance of different methods for invoking a function: direct call, bind, call, apply, and underscore.bind (using the Underscore.js library).

**Methods Compared**

1. **Direct Call**: `test("Hello");`
	* A straightforward method where the function is invoked directly with the argument passed as a string.
2. **Bind**: `test.bind(null, "Hello")();`
	* The `bind` method creates a new function that has its `this` keyword set to the specified value (in this case, `null`) and calls the original function with the provided arguments.
3. **Call**: `test.call(null, "Hello");`
	* Similar to bind, but uses the `call` method instead.
4. **Apply**: `test.apply(null, ["Hello"]);`
	* Uses the `apply` method to invoke the function with the provided arguments and `this` keyword set to the specified value (in this case, `null`).
5. **Underscore.Bind**: `_.bind(test, "Hello");`
	* Uses the Underscore.js library's `bind` method to create a new function that has its `this` keyword set to the specified value and calls the original function with the provided arguments.

**Pros and Cons of Each Approach**

1. **Direct Call**:
	* Pros: Simple, fast, and efficient.
	* Cons: May not work well with certain contexts (e.g., event handlers) where the `this` keyword needs to be set.
2. **Bind**, **Call**, and **Apply**:
	* Pros: Flexible, allow setting the `this` keyword and provide a clear way to invoke the function.
	* Cons: May introduce additional overhead due to the use of method calls.
3. **Underscore.Bind**:
	* Pros: Convenient, provides a simple way to create bound functions without having to implement it manually.
	* Cons: Requires the Underscore.js library, which may not be desirable in all situations.

**Additional Considerations**

* In modern JavaScript, `this` context is often determined by the surrounding scope and function call stack. As such, the difference between direct calls and bound functions becomes less relevant.
* The use of `bind`, `call`, or `apply` can introduce additional overhead due to the creation of a new function object and potentially unnecessary method calls.

**Alternatives**

If you don't need to invoke a function with a specific `this` keyword, you might consider using:

1. **Arrow Functions**: Create a simple, concise function that doesn't require the `this` keyword.
2. **Generator Functions**: Use generator functions for asynchronous or cooperative execution, which can be more efficient than traditional function calls.

However, if you need to invoke a function with a specific `this` context, the methods compared in this benchmark are still relevant and widely used.

Related benchmarks:

Direct call vs bind vs call vs apply vs underscore (version: 1)

Comparing performance of: direct call vs bind vs call vs apply vs _.bind

Created: 4 years ago by: Registered User

Jump to the latest result

direct call

bind

call

apply

_.bind

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):