Benchmark: ES6 Proxy vs JS Object get/set vs get/set Function

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;
  }
});
function getData(prop) {
  return object[prop];
}
function setData(prop, val) {
  object[prop] = val;
}

Tests:

Object read/write
const val = object.value; object.value = 'bar';
Proxy read/write
const val = proxy.value; proxy.value = 'bar';
get/set function
const val = getData('value'); setData('value', 'bar');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object read/write
Proxy read/write
get/set function

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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Linux

View result in a separate tab

Test name	Executions per second
Object read/write	66050972.0 Ops/sec
Proxy read/write	2075251.1 Ops/sec
get/set function	64830928.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks to compare the performance of different approaches. In this analysis, we'll break down the provided benchmark definition JSON and individual test cases to understand what's being tested.

**Benchmark Definition**

The benchmark definition represents a group of tests that compare three approaches:

1. **JS Object get/set**: This approach uses the built-in `get` and `set` methods on JavaScript objects.
2. **Proxy read/write**: This approach uses the `Proxy` constructor to create a proxy object with custom `get` and `set` handlers.
3. **get/set function**: This approach defines two functions, `getData` and `setData`, which mimic the behavior of get and set operations.

**Options Compared**

The benchmark compares the performance of these three approaches in different scenarios:

* **Object read/write**: The first test case measures the performance of getting and setting a property on a JavaScript object.
* **Proxy read/write**: The second test case measures the performance of getting and setting a property on a proxy object created with `Proxy`.
* **get/set function**: The third test case measures the performance of using custom functions to get and set properties.

**Pros and Cons**

Here's a brief summary of each approach:

1. **JS Object get/set**:
	* Pros: Simple, widely supported, and well-documented.
	* Cons: May involve more overhead due to the need for object creation and property access.
2. **Proxy read/write**:
	* Pros: Offers fine-grained control over property access and manipulation, which can be beneficial in certain scenarios.
	* Cons: Requires manual setup of proxy objects and handler functions, which can add complexity.
3. **get/set function**:
	* Pros: Can provide a more explicit and predictable way to get and set properties, reducing the reliance on built-in methods.
	* Cons: May require additional setup and maintenance, as well as potential performance overhead due to function calls.

**Library and Special JS Features**

The benchmark uses JavaScript objects and the `Proxy` constructor, which are built-in features. There are no external libraries or special JS features used in this benchmark.

**Other Alternatives**

If you're looking for alternatives to these approaches, consider the following:

* **Using a library like Lodash**: If you need fine-grained control over property access and manipulation, a library like Lodash can provide a more straightforward way to achieve your goals.
* **Using a custom implementation**: If you need extreme performance or specific requirements not met by built-in methods, creating a custom implementation might be necessary.

In summary, the benchmark provides a simple and concise way to compare the performance of different approaches for getting and setting properties in JavaScript. By understanding the pros and cons of each approach, developers can make informed decisions about which method best suits their needs.

Related benchmarks:

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

Comparing performance of: Object read/write vs Proxy read/write vs get/set function

Created: 4 years ago by: Guest

Jump to the latest result

Object read/write

Proxy read/write

get/set function

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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