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

Data Properties vs. Accessor Properties vs. Getter / Setter Methods (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: 8 years ago by: Registered User

Jump to the latest result

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;
  }
};
    
var prototypeAccessor = new Class();

​x
 
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;  }};    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: one month ago)

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

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
Read from data property	104244984.0 Ops/sec
Write to data property	116202304.0 Ops/sec
Read from accessor method	107148176.0 Ops/sec
Write to mutator method	107122016.0 Ops/sec
Read from object literal property	38019892.0 Ops/sec
Write to object literal property	10091188.0 Ops/sec
Read from object literal property on prototype	105660328.0 Ops/sec
Write to object literal property on prototype	104419448.0 Ops/sec

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

Let's break down the benchmark test cases and explain what is being tested, the pros and cons of each approach, and other considerations.

Benchmark Definition

The benchmark tests the performance differences between three approaches to access and modify properties in JavaScript:

Data Properties: Directly accessing a property on an object using dot notation (e.g., data.property).
Accessor Properties: Using accessor methods or getters and setters to access and modify properties (e.g., objectLiteralAccessor.property).
Getter/Setter Methods: Using getter and setter functions as methods to access and modify properties (e.g., method.getProperty()).

Pros and Cons of Each Approach

Data Properties:
- Pros: Simple, efficient, and widely supported.
- Cons: Can lead to polluting the global scope if not used carefully, can cause issues with property shadowing, and may not be as readable as other approaches.
Accessor Properties:
- Pros: Encapsulate data and behavior, improve code readability, and reduce polluting the global scope.
- Cons: May introduce additional overhead due to method calls, and can lead to confusion if not used consistently.
Getter/Setter Methods:
- Pros: Decoupling between data and behavior, improving code modularity, and better support for dependency injection.
- Cons: Can be more verbose than accessor properties, may introduce additional overhead, and can lead to performance issues if not implemented efficiently.

Other Considerations

Prototype Chain: In JavaScript, objects inherit properties from their prototype chain. This means that the prototypeAccessor test case also accesses the property through the prototype chain.
Property Accessors on Prototypes: Some browsers may optimize property access on prototypes, making them faster than accessing properties directly.

Library and Dependencies

There is no explicit library or dependency mentioned in the benchmark definition or test cases. However, it's worth noting that some JavaScript engines, like V8, have optimized built-in support for accessor properties and getters/setters.

Special JS Features or Syntax

The benchmark does not explicitly use any special JavaScript features or syntax beyond standard language constructs. However, the use of getter and setter functions (getter/setter methods) may be a more advanced concept that not all developers are familiar with.

In summary, this benchmark tests the performance differences between three approaches to access and modify properties in JavaScript: data properties, accessor properties, and getter/setter methods. Each approach has its pros and cons, and understanding these trade-offs is essential for writing efficient, readable, and maintainable code.

LLMs can make mistakes. Check important info.

Let's break down the benchmark test cases and explain what is being tested, the pros and cons of each approach, and other considerations.

**Benchmark Definition**

The benchmark tests the performance differences between three approaches to access and modify properties in JavaScript:

1. **Data Properties**: Directly accessing a property on an object using dot notation (e.g., `data.property`).
2. **Accessor Properties**: Using accessor methods or getters and setters to access and modify properties (e.g., `objectLiteralAccessor.property`).
3. **Getter/Setter Methods**: Using getter and setter functions as methods to access and modify properties (e.g., `method.getProperty()`).

**Pros and Cons of Each Approach**

1. **Data Properties**:
	* Pros: Simple, efficient, and widely supported.
	* Cons: Can lead to polluting the global scope if not used carefully, can cause issues with property shadowing, and may not be as readable as other approaches.
2. **Accessor Properties**:
	* Pros: Encapsulate data and behavior, improve code readability, and reduce polluting the global scope.
	* Cons: May introduce additional overhead due to method calls, and can lead to confusion if not used consistently.
3. **Getter/Setter Methods**:
	* Pros: Decoupling between data and behavior, improving code modularity, and better support for dependency injection.
	* Cons: Can be more verbose than accessor properties, may introduce additional overhead, and can lead to performance issues if not implemented efficiently.

**Other Considerations**

* **Prototype Chain**: In JavaScript, objects inherit properties from their prototype chain. This means that the `prototypeAccessor` test case also accesses the property through the prototype chain.
* **Property Accessors on Prototypes**: Some browsers may optimize property access on prototypes, making them faster than accessing properties directly.

**Library and Dependencies**

**Special JS Features or Syntax**

Related benchmarks: