Benchmark: Proxy vs getter vs get function

Script Preparation code:

const obj = {
    a: 'a',
    b: 'b',
    c: 'c'
}

const proxy = new Proxy(obj, {
    get(target, key, receiver) {
        return Reflect.get(target, key, receiver)
    }
})

function getAFromProxy() {
    return proxy.a;
}

function getA() {
    return obj.a;
}

function getAFromFunction() {
    return getA()
}

const outerProxyGetFunction = new Proxy({}, {
    get(target, key, receiver) {
        return getAFromFunction()
    }
})

const outerProxyProxy = new Proxy({}, {
    get() {
        return getAFromProxy()
    }
})

function getOuterProxyGetFunction(){
 return outerProxyGetFunction 
}

function getOuterProxyProxyAccess(){
 return outerProxyProxy 
}

Tests:

Get Function
getAFromFunction()
Proxy access
getAFromProxy()
Get function wrapped in proxy
getOuterProxyGetFunction().a
Proxy wrapped in proxy
getOuterProxyProxyAccess().a

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Get Function
Proxy access
Get function wrapped in proxy
Proxy wrapped in proxy

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36 Edg/133.0.0.0

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
Get Function	234383712.0 Ops/sec
Proxy access	44140048.0 Ops/sec
Get function wrapped in proxy	68931712.0 Ops/sec
Proxy wrapped in proxy	30115650.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's break down the provided JSON benchmark and explain what's being tested.

**Benchmark Overview**

The test compares three different approaches to accessing a value in an object: a built-in `get()` function, a custom getter function, and a proxy (a runtime-created object that provides access to an underlying object).

**Approaches Compared**

1. **Built-in `get()` function**: This is the most straightforward approach. It uses the `get()` method of the Object prototype to retrieve the value associated with a given key.
2. **Custom getter function**: In this approach, a separate function (`getAFromFunction()`) is created that simply calls another function (`getA()`), which returns the desired value. The custom getter function wraps around the original `getA()` function and adds an extra layer of indirection.
3. **Proxy (wrapped in proxy)**: This approach creates two proxies:
	* An outer proxy (`outerProxyGetFunction`) that wraps a function (`getOuterProxyGetFunction()`) that returns another function (`getAFromProxy()`), which is used to access the value through the inner proxy.
	* An inner proxy (`innerProxyProxy`) that simply returns the result of calling `getAFromProxy()`.

**Pros and Cons**

1. **Built-in `get()` function**:
	* Pros: Fast, lightweight, and well-supported by modern browsers.
	* Cons: Limited control over the access mechanism (e.g., no possibility to modify or extend the getter behavior).
2. **Custom getter function**:
	* Pros: Allows for fine-grained control over the access mechanism, including the ability to modify or extend the getter behavior.
	* Cons: Adds an extra layer of indirection, which can lead to performance overhead and increased complexity.
3. **Proxy (wrapped in proxy)**:
	* Pros: Provides a high degree of flexibility and customizability, allowing for complex access mechanisms that cannot be achieved with built-in functions or custom getter functions.
	* Cons: Can lead to increased complexity, performance overhead, and decreased readability due to the added layers of indirection.

**Libraries and Syntax**

None of the approaches rely on any external libraries. However, JavaScript provides a built-in `Proxy` object that can be used to create proxies.

The custom getter function uses a simple function call chain to access the value. The proxy approach creates two separate proxies using the `new Proxy()` constructor and configures their behavior using objects with `get()` methods.

**Other Considerations**

When choosing an approach, consider the specific requirements of your use case:

* If performance is critical and readability is secondary, the built-in `get()` function or custom getter function might be a better choice.
* If you need fine-grained control over the access mechanism, the proxy approach provides more flexibility.

**Alternatives**

Other alternatives to accessing values in an object include:

1. **Array destructuring**: If you're working with objects that have an array-like structure, you can use array destructuring to extract values directly.
2. **Object destructuring**: Similar to array destructuring, object destructuring allows you to extract values from objects using dot notation or bracket notation.
3. **Function returns**: You can also access values by calling a function that returns the desired value.

However, these alternatives may not provide the same level of control and flexibility as the approaches compared in this benchmark.

Related benchmarks:

Proxy vs getter vs get function (version: 0)

Comparing performance of: Get Function vs Proxy access vs Get function wrapped in proxy vs Proxy wrapped in proxy

Created: 6 months ago by: Registered User

Jump to the latest result

Get Function

Proxy access

Get function wrapped in proxy

Proxy wrapped in proxy

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):