Benchmark: JS Proxy vs Getter - Actual

Script Preparation code:

obj = {
  value: "Value",
  getData() {
    return "Value";
  },
  get data() {
    return "Value";
  }
};

proxy = new Proxy({}, {
  get(_, prop) {
    if(prop !== "value") return;
    
    return "Value";
  }
});

Tests:

Raw access
obj.value;
Function
obj.getData();
Getter
obj.data;
Proxy
proxy.value;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Raw access
Function
Getter
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/115.0.0.0 Safari/537.36

Browser/OS: Chrome 115 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Raw access	15905296.0 Ops/sec
Function	15857075.0 Ops/sec
Getter	14723974.0 Ops/sec
Proxy	11989717.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON data to understand what is being tested.

**Benchmark Definition**

The benchmark defines two JavaScript objects: `obj` and `proxy`. Both objects have similar properties, but with some differences in how they are accessed.

`obj` has a getter method named `getData()` that returns the value `"Value"`. It also has a property `data` that is not defined as a getter. On the other hand, `proxy` is created using the `Proxy` constructor and has a getter method for its own properties.

**Options Compared**

The benchmark compares the performance of accessing these objects using different methods:

1. **Raw Access**: Directly accessing the property `value` on `obj`.
2. **Function Call**: Calling the `getData()` method on `obj`.
3. **Getter Access**: Using the `data` getter on `obj`, which is not explicitly defined as a getter.
4. **Proxy Access**: Using the `value` property on `proxy`.

**Pros and Cons of Each Approach**

1. **Raw Access**: This approach has the lowest overhead, as it simply accesses the property directly. However, if the property is not found or is not accessible due to some reason (e.g., permissions), this will result in an error.
2. **Function Call**: Calling a function on an object incurs additional overhead compared to raw access. This approach provides more explicit control and can be useful when the value needs to be computed or transformed.
3. **Getter Access**: Using getters allows for more flexibility and encapsulation. However, it requires that the getter is explicitly defined as a getter, which might not always be the case in production code.
4. **Proxy Access**: Proxies provide an additional layer of indirection, which can lead to better performance if optimized correctly. However, this approach also incurs overhead due to the creation and lookup of the proxy.

**Library/Function**

The `Proxy` constructor is a built-in JavaScript function that creates a proxy object. A proxy allows you to intercept and modify access to an object's properties by providing a custom getter or setter for each property. In this benchmark, the `Proxy` constructor is used to create a new object (`proxy`) with its own set of getters and setters.

**Special JS Feature**

There are no special JavaScript features or syntaxes being tested in this benchmark. It only involves standard JavaScript concepts like objects, properties, functions, and getters.

**Alternatives**

Other alternatives for accessing object properties include:

* Using a library like Lodash's `get` function
* Implementing a custom access checker using a utility library like Immer
* Using a meta-programming approach to create a custom accessor factory

However, in this specific benchmark, the use of `Proxy` provides a clear and concise way to demonstrate the performance implications of accessing object properties through different methods.

Related benchmarks:

JS Proxy vs Getter - Actual (version: 0)

Comparing performance of: Raw access vs Function vs Getter vs Proxy

Created: one year ago by: Guest

Jump to the latest result

Raw access

Function

Getter

Proxy

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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