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

Data Properties vs. Accessor Properties vs. Getter / Setter Methods 2 (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 vs Read with prototype method vs Write with prototype method`

Created: 5 years ago by: Guest

Go to the latest result

HTML Preparation code:

<b>Comparing performance of:</b> 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

Script Preparation code:

var data = {
  property: property
};

var property = undefined;

var method = {
  getProperty: function() {
    return property;
  },

  setProperty: function(value) {
    property = value;
  }
};

var objectLiteralAccessor = {
  get property() {
    return property;
  },
  set property(value) {
    property = value;
  }
};

function Class() {
}

Class.prototype = {
  get property() {
    return property;
  },
  set property(value) {
    property = value;
  },
  getProperty() {
    return property;
  },
  setProperty(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;
Read with prototype method
var value = prototypeAccessor.getProperty();
Write with prototype method
prototypeAccessor.setProperty(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
Read with prototype method
Write with prototype method

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:133.0) Gecko/20100101 Firefox/133.0

Browser/OS: Firefox 133 on Linux

View result in a separate tab

Read from data property

2388.6M/s

Write to data property

1466.2M/s

Write to object literal property on prototype

1364.5M/s

Write with prototype method

1359.8M/s

Write to mutator method

1341.9M/s

Write to object literal property

1275.3M/s

Read with prototype method

848.7M/s

Read from object literal property on prototype

677.7M/s

Read from accessor method

649.8M/s

Read from object literal property

649.7M/s

View exact numbers

Test name	Executions per second
✓ Read from data property	2,388,566,528 Ops/sec
Write to data property	1,466,171,776 Ops/sec
Write to object literal property on prototype	1,364,491,520 Ops/sec
Write with prototype method	1,359,838,464 Ops/sec
Write to mutator method	1,341,940,864 Ops/sec
Write to object literal property	1,275,260,160 Ops/sec
Read with prototype method	848,672,320 Ops/sec
Read from object literal property on prototype	677,672,448 Ops/sec
Read from accessor method	649,753,152 Ops/sec
Read from object literal property	649,740,544 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The MeasureThat.net benchmark measures the performance differences between three approaches to accessing and modifying data in JavaScript:

1. **Data Properties**: Using dot notation (e.g., `data.property`) to access and modify properties directly on an object.
2. **Accessor Properties**: Defining getter and setter functions as properties of an object (e.g., `objectLiteralAccessor.property`).
3. **Getter/Setter Methods**: Defining separate methods for accessing and modifying data (e.g., `method.getProperty()`).

**Options Compared**

The benchmark compares the performance of each approach:

* Reading from and writing to data properties (`data.property`)
* Using accessor properties (`objectLiteralAccessor.property`, `accessorProperty`)
* Accessing and modifying data using getter and setter methods (`method.getProperty()`, `method.set()`) on a prototype object

**Performance Comparison**

The benchmark results show the execution speed of each approach, measured in executions per second (FPS). The fastest approach is generally used as the default or recommended method.

**Key Observations**

1. **Data Properties**: Accessing and modifying data properties is relatively fast, with an average FPS of around 400-500.
2. **Accessor Properties**: Using accessor properties is slightly slower than data properties, with an average FPS of around 300-350.
3. **Getter/Setter Methods**: Accessing and modifying data using getter and setter methods on a prototype object is the slowest approach, with an average FPS of around 100-200.

**Reasons for Performance Differences**

The performance differences between these approaches can be attributed to various factors:

* Data properties: Direct access to object properties is fast because it involves a simple property lookup.
* Accessor properties: Defining getter and setter functions as properties introduces additional overhead due to function calls and property checks.
* Getter/Setter Methods: Separate methods for accessing and modifying data on a prototype object incur additional overhead from method calls, parameter passing, and potential cache misses.

**Best Practices**

Based on these results, the recommended approach is to use **data properties** when possible, as they offer the best balance between readability and performance. However, if using accessor properties or getter/setter methods is necessary for specific requirements (e.g., encapsulation, validation), it's essential to consider the potential performance trade-offs and optimize accordingly.

Please note that these observations and recommendations are based on a specific JavaScript engine and environment. Results may vary depending on other factors, such as version, optimization levels, or specific use cases.