Benchmark: ES6 Proxy vs JS Object get/set

Script Preparation code:

var object = { value: 'foo' };
var proxy = new Proxy(object, {
  get(target, prop) {
    return target[prop];
  },
  set(target, prop, value) {
    target[prop] = value;
  }
});

Tests:

Object read/write
const val = object.value; object.value = 'bar';
Proxy read/write
const val = proxy.value; proxy.value = 'bar';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object read/write
Proxy read/write

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/134.0.0.0 Safari/537.36 Edg/134.0.0.0

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Object read/write	94340448.0 Ops/sec
Proxy read/write	2443091.5 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**What is being tested?**

The benchmark compares two approaches:

1. Direct access to a JavaScript object (`object`).
2. Using a Proxy object (`proxy`) with custom getter and setter functions.

**Options compared:**

* **Direct Object Access**: This approach uses the dot notation (e.g., `object.value`) to read and write values.
* **Proxy Object Approach**: This approach creates a Proxy object, which is a special type of object that allows you to intercept and modify access to its properties. In this case, we define a custom getter function for the `get` property and a custom setter function for the `set` property.

**Pros and Cons:**

* **Direct Object Access**: Pros:
	+ Easy to understand and use.
	+ No additional overhead or complexity.
* Cons:
	+ May not be suitable for complex data access patterns or security requirements.
* **Proxy Object Approach**: Pros:
	+ Provides fine-grained control over property access and modification.
	+ Suitable for complex data access patterns, caching, or security requirements.
* Cons:
	+ Requires additional setup and configuration (defining the getter and setter functions).
	+ May introduce performance overhead due to the proxy object's indirection.

**Library and Purpose:**

The `Proxy` object is a built-in JavaScript library that allows you to create custom access controls for objects. The purpose of using `Proxy` in this benchmark is to demonstrate its flexibility and utility in controlling property access and modification.

**Special JS Feature or Syntax:**

This benchmark uses the `new Proxy()` constructor, which is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). This syntax allows you to create a proxy object with custom properties and behavior. The getter and setter functions used in this benchmark are also ES6 features.

**Other Alternatives:**

If you prefer not to use the `Proxy` object or want to explore alternative approaches, here are some options:

* **Using getters and setters as functions**: You can define separate functions for getting and setting properties instead of using a proxy object. This approach requires more code but provides similar functionality.
* **Using a decorator library**: Some JavaScript libraries, like `decorator` or `class-decorator`, provide a way to create decorators that can be used to control property access and modification.

Keep in mind that these alternatives may introduce additional complexity or overhead compared to using the `Proxy` object.

Related benchmarks:

ES6 Proxy vs JS Object get/set (version: 0)

Comparing performance of: Object read/write vs Proxy read/write

Created: 4 years ago by: Guest

Jump to the latest result

Object read/write

Proxy read/write

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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