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: 6 months ago by: Guest

Jump 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();

​x
 
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;
var value = data.property;
Write to data property
data.property = true;
data.property = true;
Read from accessor method
var value = method.getProperty();
var value = method.getProperty();
Write to mutator method
method.setProperty(true);
method.setProperty(true);
Read from object literal property
var value = objectLiteralAccessor.property;
var value = objectLiteralAccessor.property;
Write to object literal property
objectLiteralAccessor.property = true;
objectLiteralAccessor.property = true;
Read from object literal property on prototype
var value = prototypeAccessor.property;
var value = prototypeAccessor.property;
Write to object literal property on prototype
prototypeAccessor.property = true;
prototypeAccessor.property = true;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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: 4 months 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

Test name	Executions per second
Read from data property	26632470.0 Ops/sec
Write to data property	26598838.0 Ops/sec
Read from accessor method	26519682.0 Ops/sec
Write to mutator method	8889552.0 Ops/sec
Read from object literal property	21108186.0 Ops/sec
Write to object literal property	6191070.5 Ops/sec
Read from object literal property on prototype	27012620.0 Ops/sec
Write to object literal property on prototype	8876211.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 5 months ago):

Let's break down the JavaScript microbenchmark on MeasureThat.net.

Benchmark Overview

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

Data properties
Accessor properties (using object literals)
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

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.
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.
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.

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.

Related benchmarks: