Benchmark: Data Properties vs. Accessor Properties vs. Getter / Setter Methods v3

Data Properties vs. Accessor Properties vs. Getter / Setter Methods v3 (version: 0)

The purpose of this benchmark is to determine the performance differences between data properties, accessor properties and getters / setter functions.

Comparing performance of: `Read from data property vs Write to data property vs Read from accessor method vs Write to mutator method vs Read from object literal property vs Write to object literal property vs Read from object literal property on prototype vs Write to object literal property on prototype`

Created: one year ago by: Guest

Go to the latest result

Script Preparation code:

const foo = 5


var data = {
  property: foo
};



var method = {
  getProperty: function() {
    return foo;
  },

  setProperty: function(value) {
    property = value;
  }
};

var objectLiteralAccessor = {
  get property() {
    return foo;
  },
  set property(value) {
    property = value;
  }
};

function Class() {
}

Class.prototype = {
  get property() {
    return foo;
  },
  set property(value) {
    property = value;
  }
};
    
var prototypeAccessor = new Class();

Tests:

Read from data property
var value = data.property;
Write to data property
data.property = true;
Read from accessor method
var value = method.getProperty();
Write to mutator method
method.setProperty(true);
Read from object literal property
var value = objectLiteralAccessor.property;
Write to object literal property
objectLiteralAccessor.property = true;
Read from object literal property on prototype
var value = prototypeAccessor.property;
Write to object literal property on prototype
prototypeAccessor.property = true;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Read from data property
Write to data property
Read from accessor method
Write to mutator method
Read from object literal property
Write to object literal property
Read from object literal property on prototype
Write to object literal property on prototype

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Read from object literal property on prototype

27.0M/s

Read from data property

26.6M/s

Write to data property

26.6M/s

Read from accessor method

26.5M/s

Read from object literal property

21.1M/s

Write to mutator method

8.9M/s

Write to object literal property on prototype

8.9M/s

Write to object literal property

6.2M/s

View exact numbers

Test name	Executions per second
✓ Read from object literal property on prototype	27,012,620 Ops/sec
Read from data property	26,632,470 Ops/sec
Write to data property	26,598,838 Ops/sec
Read from accessor method	26,519,682 Ops/sec
Read from object literal property	21,108,186 Ops/sec
Write to mutator method	8,889,552 Ops/sec
Write to object literal property on prototype	8,876,211 Ops/sec
Write to object literal property	6,191,070 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 JavaScript microbenchmark on MeasureThat.net.

**Benchmark Overview**

The benchmark is designed to compare the performance differences between three approaches:

1. Data properties
2. Accessor properties (using object literals)
3. Getter / Setter methods (using functions)

These approaches are used to access or modify a value within an object.

**Options Compared**

* **Data Properties**: Directly accessing or modifying a property of an object using the dot notation (`obj.property = value;`).
* **Accessor Properties**: Using object literals with getter and setter methods (`objectLiteralAccessor.getProperty()` and `objectLiteralAccessor.setProperty(value);`).
* **Getter / Setter Methods**: Defining separate functions to access and modify a value (`method.getProperty()` and `method.setProperty(true);`).

**Pros and Cons of Each Approach**

1. **Data Properties**
	* Pros: Simple, widely supported, and efficient for most use cases.
	* Cons: Can lead to naming conflicts if multiple variables share the same name in the scope.
2. **Accessor Properties**
	* Pros: Provides a clear separation between data and behavior, making code more modular and reusable.
	* Cons: May require additional syntax (e.g., `get` and `set` keywords), and can be less efficient due to function call overhead.
3. **Getter / Setter Methods**
	* Pros: Offers explicit control over access and modification of values, which can improve code readability and maintainability.
	* Cons: May introduce unnecessary complexity, and the function call overhead can negate any performance benefits.

**Library Used (if applicable)**

There is no specific library mentioned in the benchmark definition or test cases. However, the `Class` constructor with a prototype property is used to demonstrate accessor properties on prototype objects.

**Special JS Features or Syntax**

This benchmark does not explicitly use any special JavaScript features or syntax, such as async/await, arrow functions, or modernized ECMAScript features.

**Other Alternatives**

If you'd like to explore alternative approaches, here are some additional options:

* **Computed Properties**: Introduced in ECMAScript 2015 (ES6), computed properties allow you to dynamically access and modify values using expressions.
* **Reflect API**: The Reflect API provides a way to access and manipulate object properties at runtime, offering more flexibility than traditional getter / setter methods.

Keep in mind that these alternatives might not be as widely supported or optimized for performance compared to the original three approaches.