Benchmark: Property Get/Set vs Function vs Proxy

Tests:

Get/Set
const obj = { __value: 0, get value() { return this.__value; }, set value(v) { this.__value = v; } }; function increase() { obj.value = obj.value + 1; } while (obj.value < 1000) { increase(); }
Function
const obj = { __value: 0, getValue() { return this.__value; }, setValue(v) { this.__value = v; } }; function increase() { obj.setValue(obj.getValue() + 1); } while (obj.getValue() < 1000) { increase(); }
Proxy
const obj = new Proxy( { value: 0 }, { get(obj, key) { return obj[key] }, set(obj, key, value) { obj[key] = value }, } ); function increase() { obj.value = obj.value + 1; } while (obj.value < 1000) { increase(); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Get/Set
Function
Proxy

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/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Get/Set	18360.9 Ops/sec
Function	1048986.8 Ops/sec
Proxy	6100.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark tests the performance of three different approaches for incrementing a value in an object: property get/set, function, and Proxy.

**Property Get/Set**

In this approach, the `value` property is defined with both getter and setter methods. The getter method returns the current value, while the setter method updates the value. In the test case, the `increase` function increments the value by 1 in each iteration of the loop.

Pros:

* Simple and easy to understand
* No additional overhead from creating or using a proxy

Cons:

* May be slower due to the additional indirection introduced by the getter/setter pair
* Can lead to unexpected behavior if not used carefully (e.g., modifying the property directly)

**Function**

In this approach, two separate functions are defined: `getValue` and `setValue`. The `getValue` function returns the current value, while the `setValue` function updates the value. In the test case, the `increase` function calls `setValue` with the result of `getValue` plus 1.

Pros:

* Similar to property get/set, but without the overhead of a getter/setter pair
* Easy to understand and maintain

Cons:

* Still introduces an additional indirection due to the function call
* Can lead to unexpected behavior if not used carefully (e.g., modifying the value directly)

**Proxy**

In this approach, a Proxy object is created with two handlers: `get` and `set`. The `get` handler returns the current value, while the `set` handler updates the value. In the test case, the `increase` function increments the value by 1 in each iteration of the loop.

Pros:

* Most efficient approach, as it bypasses the overhead of getter/setter pairs and functions
* Provides a clear and explicit way to define getters and setters

Cons:

* Requires creating and using a Proxy object, which may introduce additional overhead
* Can be less intuitive for some developers who are not familiar with Proxies

**Library Used**

In all test cases, the `Proxy` function is used from the JavaScript standard library. The purpose of `Proxy` is to create an object that can be manipulated by defining getters and setters on its properties.

**Special JS Features/ Syntax**

None.

Other Alternatives

* Using a library like Lodash or Underscore.js, which provides utility functions for working with objects and arrays.
* Using a different approach, such as using a closure to encapsulate the incrementing logic.
* Using a different data structure, such as an array or a Map, instead of an object.

Related benchmarks:

Property Get/Set vs Function vs Proxy (version: 4)

Comparing performance of: Get/Set vs Function vs Proxy

Created: 5 years ago by: Registered User

Jump to the latest result

Get/Set

Function

Proxy

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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