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

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Get Function

6.0M/s

Get function wrapped in proxy

3.7M/s

Proxy access

3.3M/s

Proxy wrapped in proxy

2.4M/s

Fastest: Get Function (2.5x faster)

View exact numbers

✓ Get Function: 5,969,040 ops/sec
• Get function wrapped in proxy: 3,697,301 ops/sec
• Proxy access: 3,291,237 ops/sec
• Proxy wrapped in proxy: 2,383,644 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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 year 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

Get Function

234.4M/s

Get function wrapped in proxy

68.9M/s

Proxy access

44.1M/s

Proxy wrapped in proxy

30.1M/s

View exact numbers

Test name	Executions per second
✓ Get Function	234,383,712 Ops/sec
Get function wrapped in proxy	68,931,712 Ops/sec
Proxy access	44,140,048 Ops/sec
Proxy wrapped in proxy	30,115,650 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 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.

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: one year ago by: Registered User

Go to the latest result

Get Function

Proxy access

Get function wrapped in proxy

Proxy wrapped in proxy

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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: one year ago by: Registered User

Go to the latest result

Get Function

Proxy access

Get function wrapped in proxy

Proxy wrapped in proxy

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

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: `Get Function vs Proxy access vs Get function wrapped in proxy vs Proxy wrapped in proxy`