Benchmark: Direct call vs bind vs call vs apply vs self but makes sense

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: 4 years ago)

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

Browser/OS: Chrome 85 on Mac OS X 10.13.6

View result in a separate tab

Test name	Executions per second
direct call	12885965.0 Ops/sec
bind	10496329.0 Ops/sec
call	10522191.0 Ops/sec
apply	9681875.0 Ops/sec
method call	909749184.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its various test cases.

**Benchmark Overview**

The benchmark measures the performance of different ways to call a function in JavaScript, specifically when it comes to accessing the `this` context. The tests compare the execution time of direct function calls (`test1`, `test2`, `test3`, `test4`) versus using `bind`, `call`, and `apply` methods.

**Test Cases**

Each test case represents a different way to call a function:

1. **Direct Call**: `test1("World", "Hello");`
	* This is the most straightforward approach, where the function is called directly with its arguments.
	* Pros: Simple and easy to understand.
	* Cons: May not be optimized for performance.
2. **Bind**: `test2.bind("World", "Hello")();`
	* The `bind` method creates a new function that has its `this` context set to the specified value.
	* Pros: Allows for fine-grained control over the `this` context.
	* Cons: Creates a new function, which may incur overhead due to memory allocation and copying of function arguments.
3. **Call**: `test3.call("World", "Hello");`
	* The `call` method calls a function with its specified `this` context and arguments.
	* Pros: Similar to bind, but without creating a new function.
4. **Apply**: `test4.apply("World", ["Hello"]);`
	* The `apply` method calls a function with its specified `this` context and an array of arguments.
	* Pros: Allows for flexible passing of arguments, including arrays.
	* Cons: May be slower due to the need to create an array of arguments.
5. **Method Call**: `"World".test5("Hello")`
	* This is a more concise way to call a method on an object using dot notation.
	* Pros: More readable and convenient than direct function calls or `bind`/`call`/`apply`.
	* Cons: May not be as efficient due to the overhead of creating a new context.

**JavaScript Library**

None are explicitly mentioned, but it's worth noting that some browsers may have optimizations for certain methods. For example, modern JavaScript engines often optimize `call` and `apply` by inlining or hoisting the function calls.

**Special JS Feature**

The `bind` method is using a modern JavaScript feature (ECMAScript 2015+) to create a new function with its `this` context set. This is done using the `bind` method's syntax, which creates a new function that takes the specified arguments and has its `this` context set accordingly.

**Alternatives**

Other approaches could be used to call functions in JavaScript:

* **Arrow Functions**: Using arrow functions (`() => { ... }`) can simplify the code and avoid the need for explicit `this` binding.
* **Constructor Functions**: Creating a constructor function using `function Constructor(...args) { ... }` can provide a way to create objects with a specific `this` context.

Keep in mind that these alternatives might not be as efficient or concise as the original test cases.

Related benchmarks:

Direct call vs bind vs call vs apply vs self but makes sense (version: 0)

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

Created: 4 years ago by: Guest

Jump to the latest result

direct call

bind

call

apply

method call

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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