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: 4 years ago by: Guest

Jump 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

Autogenerated LLM Summary (model llama3.2:3b, generated one month 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.

Latest run results:

Run details: (Test run date: 4 years ago)

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

Browser/OS: Chrome 86 on Windows

View result in a separate tab

Test name	Executions per second
Read from data property	8346999.0 Ops/sec
Write to data property	8945231.0 Ops/sec
Read from accessor method	4455889.5 Ops/sec
Write to mutator method	3267494.5 Ops/sec
Read from object literal property	3645362.8 Ops/sec
Write to object literal property	1926492.1 Ops/sec
Read from object literal property on prototype	4566367.5 Ops/sec
Write to object literal property on prototype	3488152.5 Ops/sec
Read with prototype method	4479296.5 Ops/sec
Write with prototype method	3499108.2 Ops/sec

Related benchmarks:

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.

Created: 4 years ago by: Guest

Jump to the latest 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

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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