Benchmark: Setting on Proxy vs Object

Script Preparation code:

object = { value: 'data' };
proxy = new Proxy(object, {})
proxyWithHandler = new Proxy(object, {
	set(target, prop, receiver) {
    	return Reflect.set(target, prop, receiver)
    }
})

Tests:

set on object
object.value = 'other'
set on proxy
proxy.value = 'other'
Proxy with get handler access
proxyWithHandler.value = 'other';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
set on object
set on proxy
Proxy with get handler access

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:128.0) Gecko/20100101 Firefox/128.0

Browser/OS: Firefox 128 on Linux

View result in a separate tab

Test name	Executions per second
set on object	723501184.0 Ops/sec
set on proxy	5464465.5 Ops/sec
Proxy with get handler access	5290567.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explore what's being tested.

**Benchmark Overview**

The benchmark compares three approaches to setting values on an object in JavaScript:

1. **Direct Object Access**: Setting a value directly on the `object` variable.
2. **Proxy with Setter Handler**: Using a Proxy object with a setter handler to set a value on the target object.
3. **Proxy with Get Handler Access**: Using a Proxy object with a get handler to access and set a value on the target object.

**Options Compared**

The benchmark is comparing these three options:

* Direct Object Access (`object.value = 'other'`)
* Proxy with Setter Handler (`proxyWithHandler.value = 'other';`)
* Proxy with Get Handler Access (`proxy.value = 'other'`)

**Pros and Cons of Each Approach**

1. **Direct Object Access**
	* Pros: Fast, straightforward, and easy to implement.
	* Cons: Can lead to unexpected behavior if not properly synchronized or protected from external modifications.
2. **Proxy with Setter Handler**
	* Pros: Provides a clear separation between the target object and the proxy, allowing for better control over access and modification. Also, allows for validation of incoming values through the setter handler.
	* Cons: Can introduce additional overhead due to the use of Proxy objects and their associated setup costs (e.g., creating a proxy instance). The setter handler can also add complexity if not properly implemented.
3. **Proxy with Get Handler Access**
	* Pros: Allows for read-only access to the target object's properties while still providing some control over write operations through the get handler.
	* Cons: Does not provide a clear way to modify the target object's properties, as any writes would be intercepted by the get handler.

**Library and Its Purpose**

In this benchmark, the `Proxy` object is used. A Proxy in JavaScript is an object that acts as a surrogate or placeholder for another object, allowing you to intercept and manipulate access to the target object's properties. The Proxy object can be used to implement custom behavior for property access, such as validation, logging, or modification.

**Special JS Features and Syntax**

There are no special JS features or syntax mentioned in this benchmark that would require specific explanations. However, it's worth noting that Proxies are a built-in JavaScript feature that has been available since ECMAScript 2015 (ES6).

**Other Alternatives**

If you're looking for alternative approaches to setting values on an object, you could consider using:

* **ES6 Map**: A data structure that allows you to store key-value pairs and provides efficient access to values.
* **Class-based inheritance**: Instead of using a Proxy, you could create a class that extends the target object's class, allowing for inherited behavior.
* **Custom functions or methods**: You could write custom functions or methods to set values on the target object, providing more control over the behavior.

Keep in mind that each alternative has its own trade-offs and use cases. The choice of approach depends on your specific requirements, performance considerations, and desired level of complexity.

Related benchmarks:

Setting on Proxy vs Object (version: 0)

Comparing performance of: set on object vs set on proxy vs Proxy with get handler access

Created: 2 years ago by: Guest

Jump to the latest result

set on object

set on proxy

Proxy with get handler access

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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