Benchmark: Direct call vs bound call vs call vs apply

Script Preparation code:

function test(msg) {
  var d = msg;
}

var bound = test.bind(null, "Hello");

Tests:

direct call
test("Hello");
bind
bound();
call
test.call(null, "Hello");
apply
test.apply(null, ["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 month ago)

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

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
direct call	112271040.0 Ops/sec
bind	102724704.0 Ops/sec
call	82008872.0 Ops/sec
apply	102240304.0 Ops/sec

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

LLMs can make mistakes. Check important info.

This benchmark compares different methods of invoking a function in JavaScript: direct call, bound call, call, and apply. Each method has distinct characteristics and use cases, which affect their performance, as shown in the provided results.

### Benchmark Overview

#### Test Cases
1. **Direct Call**: 
   - **Code**: `test("Hello");`
   - **Description**: Invokes the function `test` directly with the argument `"Hello"`.
   - **Performance**: Highest execution rate in the results, indicating that direct calls are the most efficient way of executing functions when no special context or binding is required.

2. **Bind**: 
   - **Code**: `bound();`
   - **Description**: Uses `Function.prototype.bind()` to create a new function (`bound`) that, when called, has its `this` keyword set to `null` and a preset argument of `"Hello"`.
   - **Performance**: Close to the direct call performance, this method is efficient for cases where a function needs to be called later with predefined arguments.

3. **Call**: 
   - **Code**: `test.call(null, "Hello");`
   - **Description**: Invokes `test` using the `call` method, allowing you to set the `this` context (which is `null` in this case) and pass arguments directly.
   - **Performance**: Slower than direct and bind calls, as it involves an extra step of looking up the function and setting execution context.

4. **Apply**: 
   - **Code**: `test.apply(null, ["Hello"]);`
   - **Description**: Similar to `call`, but instead, it takes an array of arguments. This is particularly useful when the number of arguments is not fixed or when working with arrays.
   - **Performance**: The slowest among the tested methods, likely due to the overhead of handling an array as input.

### Pros and Cons

#### Direct Call
- **Pros**: 
  - Fastest execution.
  - Simple and straightforward usage.
- **Cons**: 
  - Limited flexibility when the function needs a different context (`this`) or argument binding.

#### Bound Call
- **Pros**: 
  - Allows preset arguments for future execution, useful in scenarios such as event handlers or callbacks.
  - Maintains performance close to direct calls.
- **Cons**: 
  - Slightly more complex than direct calls.
  - Memory overhead due to the creation of a bound function.

#### Call
- **Pros**: 
  - Provides flexibility in setting the context and passing arguments seamlessly.
  - Useful when dynamically determining the context for a function (e.g., methods in objects).
- **Cons**: 
  - Adds overhead compared to direct calls and bound functions, which can impact performance.

#### Apply
- **Pros**: 
  - Ideal for functions with variable arguments, especially when working with arrays.
  - Useful for spreading arguments and handling lists of inputs.
- **Cons**:
  - Slowest method in this benchmark, primarily due to the array handling overhead.

### Other Considerations
- Choosing which method to use depends on the requirements for context binding and the structure of your arguments.
- In general, if performance is a priority and no context or argument binding is needed, direct calls are preferable.
- For scenarios where functions require specific contexts and arguments preset for later use, using `bind` provides a good balance between performance and usability.
- `call` and `apply` are essential in more dynamic scenarios. Use `call` when you have a specific, known number of arguments and `apply` when dealing with an array of arguments.

### Alternatives
Other alternatives to function invocation methods include using arrow functions, though they don't replace the functionality of `bind`, `call`, or `apply`. Arrow functions provide a lexical binding of `this`, which can simplify code but do not work with dynamic contexts as well as the traditional functions.

Additionally, for modern JavaScript, the introduction of `...spread` and `...rest` syntax provides alternative methods to manage arguments in functions, though they still involve the same underlying invocation mechanisms.

In summary, understanding the performance implications and suitable use cases of direct call, bind, call, and apply will assist software engineers in choosing the best approach for their specific functions and situations.

Related benchmarks:

Direct call vs bound call vs call vs apply (version: 1)

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

Created: 4 months ago by: Guest

Jump to the latest result

direct call

bind

call

apply

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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