Benchmark: Direct call vs bind vs call vs apply vs self

Script Preparation code:

function test(msg) {
  console.log(this, msg);
}
function test1(self, msg) {
  console.log(self, msg);
}
function test2(msg) {
  console.log(this, msg);
}
function test3(msg) {
  console.log(this, msg);
}
function test4(msg) {
  console.log(this, msg);
}
String.prototype.test5 = function(msg) {
  console.log(this, msg)
}

Tests:

direct call
test1("World", "Hello");
bind
test2.bind("World", "Hello")();
call
test3.call("World", "Hello");
apply
test4.apply("World", ["Hello"]);
method call
"World".test5("Hello")

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
direct call
bind
call
apply
method call

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
direct call	222831.0 Ops/sec
bind	227481.4 Ops/sec
call	225925.9 Ops/sec
apply	223383.6 Ops/sec
method call	213645.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring JavaScript performance is crucial for optimizing code, and MeasureThat.net provides an excellent platform for doing so.

**Overview of the Benchmark**

The provided benchmark compares the performance of different ways to invoke functions in JavaScript:

1. **Direct Call**: `test1("World", "Hello");`
2. **Bind**: `test2.bind("World", "Hello")();`
3. **Call**: `test3.call("World", "Hello");`
4. **Apply**: `test4.apply("World", ["Hello"]);`
5. **Method Call** (string prototype extension): `"World".test5("Hello")`

Each test case is a separate benchmark, and the results are displayed for each browser, device platform, operating system, and execution rate.

**Options Compared**

The five options compared in this benchmark all aim to achieve a similar goal: invoking a function with specific arguments. However, they differ in how they approach this:

1. **Direct Call**: Simply calls the function `test1` with the provided arguments.
2. **Bind**: Creates a new function by binding the `this` context and argument values to `test2`.
3. **Call**: Passes the `this` context and argument values as separate arguments to `test3`.
4. **Apply**: Passes the `this` context and argument values as an array to `test4`.
5. **Method Call** (string prototype extension): Invokes a method on a string object, using the dot notation.

**Pros and Cons**

Here's a brief summary of each approach:

1. **Direct Call**:
	* Pros: Simple, intuitive.
	* Cons: May not work as expected when `this` is not the global object or an object property.
2. **Bind**:
	* Pros: Preserves the original function's context and argument values.
	* Cons: Creates a new function, which can be memory-intensive for large benchmarks.
3. **Call**:
	* Pros: Passes arguments explicitly, making it easier to debug.
	* Cons: Requires more code than direct call or method call.
4. **Apply**:
	* Pros: Passes `this` context and argument values as an array, which can be useful in certain situations.
	* Cons: May not work as expected when dealing with non-array arguments or a large number of arguments.
5. **Method Call** (string prototype extension):
	* Pros: Elegant, concise syntax.
	* Cons: Only works on string objects and may not be suitable for other types of objects.

**Library/Features Used**

In the provided benchmark, no specific JavaScript library is used. However, MeasureThat.net's custom JavaScript execution engine might have some internal optimizations or features that affect the results.

**Special JS Features/Syntax**

This benchmark does not use any special JavaScript features or syntax beyond what's standard in modern JavaScript engines (ES6+).

**Alternatives**

If you're interested in exploring alternative methods for invoking functions, here are a few options:

1. **Arrow Functions**: Can be used to create concise and memory-efficient function invocations.
2. **Lambda Expressions**: Similar to arrow functions but with a more functional programming style.
3. **Function constructors**: Allow creating new functions with specific properties (e.g., `function Foo(name) { return name; };`)
4. **Object methods**: Invoking methods on objects, like the `test5` method on strings.

Each of these alternatives has its own trade-offs and use cases. For the purpose of benchmarking performance-critical code, direct calls or bound/called methods might still be the most suitable choices.

Related benchmarks:

Direct call vs bind vs call vs apply vs self (version: 3)

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

Created: 7 years ago by: Registered User

Jump to the latest result

direct call

bind

call

apply

method call

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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