Benchmark: Getter / Setter vs Proxy vs Class getter

Script Preparation code:

data1 = {};
handler = {
  get: (target, prop) => (target[prop]),
  set: (target, prop, value) => (target[prop] = value),
};
proxy = new  Proxy(data1, handler);
data2 = {
  get test() {
    return this._test;
  },
  set test(value) {
    return this._test = value;
  }
};

class Data3 {
    _test;
  
	get test()
    {
      return this._test;
    }
    set test(value)
    {
      this._test = value;
    }
}
data3 = new Data3();

Tests:

setter getter
data2.test = Math.random(); console.log(data2.test);
proxy
proxy.test = Math.random(); console.log(proxy.test);
class getter setter
data3.test = Math.random()

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
setter getter
proxy
class getter setter

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/150.0.0.0 Safari/537.36

Browser/OS: Chrome 150 on Mac OS X 10.15.7

View result in a separate tab

class getter setter

75.2M/s

proxy

495K/s

setter getter

485K/s

View exact numbers

Test name	Executions per second
✓ class getter setter	75,191,000 Ops/sec
proxy	494,769 Ops/sec
setter getter	485,254 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to explain the benchmark and its various components.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark on MeasureThat.net. The benchmark consists of three test cases that compare the performance of different approaches to implement getter and setter methods.

**Options Compared**

There are three options being compared:

1. **Setter Getter**: This approach uses the traditional method of defining a getter and setter method directly on an object using the `get` and `set` keywords, respectively.
2. **Proxy**: This approach utilizes the `Proxy` object to create a proxy instance that intercepts property access. The ` Proxy` object is initialized with a handler object that specifies how to handle getter and setter operations.
3. **Class Getter Setter**: This approach uses a class definition to implement getter and setter methods for an object.

**Pros and Cons of Each Approach**

Here's a brief summary of the pros and cons of each approach:

1. **Setter Getter**
	* Pros: Simple, widely supported, and easy to understand.
	* Cons: Can be verbose, especially when dealing with complex validation logic or multiple getter/setter pairs.
2. **Proxy**
	* Pros: Flexible, allows for fine-grained control over property access, and can be used to implement more complex logic.
	* Cons: Requires a good understanding of the `Proxy` object and its handling mechanism.
3. **Class Getter Setter**
	* Pros: Encapsulates data and behavior within a class, making it easier to manage complexity and enforce data integrity.
	* Cons: Can lead to over-engineering, and may require additional setup or boilerplate code.

**Library Used (Proxy)**

The `Proxy` object is used in the benchmark to create a proxy instance that intercepts property access. The library is part of the JavaScript standard library and provides a way to dynamically inspect and manipulate objects at runtime.

**Special JS Feature/Syntax**

This benchmark does not use any special JavaScript features or syntax, so there's nothing to mention here!

**Other Alternatives**

If you're looking for alternative approaches to implement getter and setter methods, you could consider:

* Using a library like Lodash or Underscore.js, which provide utility functions for working with objects and data.
* Implementing a custom wrapper class around the object being accessed.
* Using a different data structure, such as an array or Map, that provides built-in support for getter/setter-like behavior.

However, these alternatives may not be directly comparable to the `Proxy` approach used in this benchmark.

Getter / Setter vs Proxy vs Class getter (version: 0) Benchmark.js

Comparing performance of: `setter getter vs proxy vs class getter setter`

Created: 3 years ago by: Guest

Go to the latest result

setter getter

proxy

class getter setter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Getter / Setter vs Proxy vs Class getter (version: 0) Benchmark.js

Comparing performance of: setter getter vs proxy vs class getter setter

Created: 3 years ago by: Guest

Go to the latest result

setter getter

proxy

class getter setter

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: `setter getter vs proxy vs class getter setter`