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: one year ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 17_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 17 on iOS 17.5.1

View result in a separate tab

Test name	Executions per second
setter getter	1425918.5 Ops/sec
proxy	1353739.2 Ops/sec
class getter setter	9444654.0 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.

Related benchmarks:

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

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

Created: 3 years ago by: Guest

Jump 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):