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

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

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: 2 years 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 month ago)

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

Browser/OS: Chrome 151 on Windows

View result in a separate tab

Read from object literal property on prototype

876.7M/s

Write to mutator method

876.3M/s

Read from accessor method

875.0M/s

Write to object literal property on prototype

874.8M/s

Read from data property

841.8M/s

Write to data property

805.1M/s

Read from object literal property

107.8M/s

Write to object literal property

15.9M/s

View exact numbers

Test name	Executions per second
✓ Read from object literal property on prototype	876,714,112 Ops/sec
Write to mutator method	876,304,320 Ops/sec
Read from accessor method	875,009,728 Ops/sec
Write to object literal property on prototype	874,826,176 Ops/sec
Read from data property	841,810,496 Ops/sec
Write to data property	805,064,960 Ops/sec
Read from object literal property	107,807,296 Ops/sec
Write to object literal property	15,880,403 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.