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: 5 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:147.0) Gecko/20100101 Firefox/147.0

Browser/OS: Firefox 147 on Windows

View result in a separate tab

Raw access

1277.7M/s

Function

1275.1M/s

Getter

1273.3M/s

Proxy

52.8M/s

View exact numbers

Test name	Executions per second
✓ Raw access	1,277,675,520 Ops/sec
Function	1,275,143,936 Ops/sec
Getter	1,273,338,240 Ops/sec
Proxy	52,755,372 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 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.

JS Proxy vs Getter - Actual (version: 0)

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

Created: 2 years ago by: Guest

Go to the latest result

Raw access

Function

Getter

Proxy

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

JS Proxy vs Getter - Actual (version: 0)

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

Created: 2 years ago by: Guest

Go to the latest result

Raw access

Function

Getter

Proxy

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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