Benchmark: this vs closure - MeasureThat.net

Script Preparation code:

const fooA = {
a: ""
};
const barA = {
 fooA,
  setFooA(val){
  fooA.a = val;
  }
}

const barB = {
 fooB: {
a: ""
},
  setFooB(val){
  this.fooB.a = val;
  }
}

function getBars(){
 return {
   barA,
   barB
};
}

Tests:

closure
const {barA} = getBars(); barA.setFooA("a"); barA.setFooA("b"); barA.setFooA("c"); barA.setFooA("d"); barA.setFooA("e"); barA.setFooA("f");
this
const {barB} = getBars(); barB.setFooB("a"); barB.setFooB("b"); barB.setFooB("c"); barB.setFooB("d"); barB.setFooB("e"); barB.setFooB("f");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
closure
this

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.1.1 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
closure	95937600.0 Ops/sec
this	98181840.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

The benchmark compares two approaches: using an object reference (`barA` or `barB`) in a closure, versus using the `this` keyword to access a property of the surrounding scope.

**Approach 1: Using an object reference (closure)**

In this approach, the code creates an object `fooA` and another object `barA`. The `barA` object has two properties: `fooA` and `setFooA`. When `setFooA` is called, it updates the `a` property of the `fooA` object. This creates a closure where `barA` "remembers" its parent object.

**Approach 2: Using the `this` keyword**

In this approach, the code creates an object `fooB` and another object `barB`. The `barB` object has two properties: `fooB` (which is not directly used) and `setFooB`. When `setFooB` is called, it updates the `a` property of the surrounding scope (`this.fooB`). This creates a closure where `barB` accesses its parent scope using `this`.

**Pros and Cons**

* **Closure approach**
	+ Pros: More explicit and controlled way to access parent objects.
	+ Cons: Can lead to tighter coupling between objects, making it harder to modify or reuse code.
* **This keyword approach**
	+ Pros: Loose coupling between objects, making it easier to modify or reuse code. Also allows for more dynamic property access.
	+ Cons: Can be less explicit and more prone to errors due to the use of `this`.

**Library usage**

The benchmark uses no external libraries, as it only relies on built-in JavaScript features.

**Special JS feature/syntax**

There is no specific special JS feature or syntax used in this benchmark. It's a straightforward example of object-oriented programming (OOP) concepts.

**Other alternatives**

To compare these approaches, you could also consider using:

* Function expressions instead of objects
* Classes and constructors
* Using `bind()` to create closures
* Using `call()` or `apply()` to access parent scopes

However, the current approach using objects with closures is a common and straightforward way to demonstrate this concept.

Keep in mind that the benchmark results show that Chrome 104 performs better for the `this` keyword approach (faster executions per second), but this might not be consistent across other browsers or versions.

Related benchmarks:

this vs closure (version: 0)

Comparing performance of: closure vs this

Created: 2 years ago by: Registered User

Jump to the latest result

closure

this

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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