Benchmark: Direct call vs bind vs call vs apply with bound options

Script Preparation code:

function test(msg) {
  var d = this.hello + msg
}

let opts = {
  hello:1,
  world:2
}

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
direct call
bind
call
apply

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 136 on Windows

View result in a separate tab

Test name	Executions per second
direct call	5489935.0 Ops/sec
bind	111790376.0 Ops/sec
call	111138976.0 Ops/sec
apply	49647324.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark compares several methods of invoking a JavaScript function with context and arguments: direct call, `bind`, `call`, and `apply`. Each method has its unique approach to how the function is executed with the provided context (`opts`) and arguments.

### Benchmark Analysis

#### JavaScript Function Invocation Methods Tested
1. **Direct Call**: `test("Hello");`
   - The function is called directly without any context or binding. The `this` keyword inside the function does not refer to `opts`, leading to undefined results for `this.hello`.
   
   **Pros**: 
   - Simple and straightforward.
   - Fastest execution time due to the lack of context binding.

**Cons**: 
   - Does not allow specifying a context, which may lead to errors since `this` will not be defined as intended.

2. **Bind**: `test.bind(opts, "Hello")();`
   - The `bind` method creates a new function that, when called, has its `this` keyword set to the provided value (`opts`), and the provided arguments are pre-filled.

**Pros**:
   - Clearly defines the context in which the function will be executed.
   - Can be reused, as it creates a new bound function.

**Cons**:
   - Slightly slower performance compared to direct invocation due to function creation.

3. **Call**: `test.call(opts, "Hello");`
   - The `call` method allows you to call a function with a specified `this` value and arguments provided individually.

**Pros**:
   - Executes the function immediately with a specified context and arguments.
   - More performance-efficient than `apply` when you have a known number of arguments.

**Cons**:
   - Not as flexible as `apply` for handling multiple arguments when you need an array.

4. **Apply**: `test.apply(opts, ["Hello"]);`
   - The `apply` method calls a function with a specified `this` value and an array of arguments.

**Pros**:
   - Great for invoking functions with a varying number of arguments or when arguments are stored in an array.

**Cons**:
   - Generally slower than both `call` and `bind` due to the array handling.

### Benchmark Results Summary
- **Highest Performance**: `bind` exhibited the highest execution rate at approximately 111.79 million executions per second.
- **Next Best**: `call` came close, with about 111.14 million executions per second.
- **Moderate Performance**: `apply` had a significantly lower rate at approximately 49.65 million.
- **Lowest Performance**: The direct call method had the lowest execution rate at about 5.49 million, largely due to the uncaught `this` context issue.

### Other Considerations
When considering these invocation methods, it's important to understand the specific use cases where each would be advantageous. For instance, when performance is critical and context is not required, a direct call may still be suitable. Conversely, if a function relies heavily on context, utilizing `bind` or `call` would yield better results.

### Alternatives
Aside from these methods, developers can also explore:
- **Arrow Functions**: Arrow functions encapsulate the context automatically from their surrounding scope. They do not have their own `this`, which may simplify certain use cases.
- **Higher-order Functions**: You can create higher-order functions that return functions, effectively binding context.

Each approach has its trade-offs, and the best choice depends on specific application requirements regarding performance, clarity, and flexibility.

Related benchmarks:

Direct call vs bind vs call vs apply with bound options (version: 1)

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

Created: one year ago by: Guest

Jump to the latest result

direct call

bind

call

apply

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):