Benchmark: Data Properties vs Getter / Setter Methods ES2015

Script Preparation code:

var data = {
  property: ''
};


class MyClass {  
  constructor() {
    this._property = '';
  }
  get property() {
    return this._property;
  }
  set property(value) {
    this._property = value;
  }
}
    
var classAccessor = new MyClass();

Tests:

get data from data property
var value = data.property;
set data to data property
data.property = 'test';
get data from class accessor
var value = classAccessor.property;
set data to class accessor
classAccessor.property = 'test';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
get data from data property
set data to data property
get data from class accessor
set data to class accessor

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 months ago)

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

Browser/OS: Chrome 142 on Windows

View result in a separate tab

Test name	Executions per second
get data from data property	160045248.0 Ops/sec
set data to data property	139008720.0 Ops/sec
get data from class accessor	153623088.0 Ops/sec
set data to class accessor	127838544.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark test case, specifically testing the performance of accessing properties on an object using both dot notation (e.g., `data.property`) and getter/setter methods (e.g., `classAccessor.property`).

**Test Scenarios**

There are four test cases:

1. Accessing a property directly on an object (`get data from data property`)
2. Setting a value on an object's property using dot notation (`set data to data property`)
3. Accessing a property on an instance of a class using the `property` getter method (`get data from class accessor`)
4. Setting a value on an instance of a class's property using the `property` setter method (`set data to class accessor`)

**Options Compared**

The test compares two approaches:

1. Direct access on an object (dot notation)
2. Accessing/setting values on an instance of a class using getter and setter methods

**Pros and Cons**

**Direct Access (Dot Notation)**

Pros:

* Typically faster, as it involves less overhead due to function calls
* Less memory allocation, as no additional data structures are created

Cons:

* Less explicit and easier to introduce side effects or unexpected behavior if not properly synchronized
* May lead to naming conflicts or issues with aliasing

**Getter/Setter Methods**

Pros:

* More explicit and safer, reducing the risk of introducing side effects or unexpected behavior
* Easier to implement thread-safety and synchronization mechanisms
* Can be used to add validation, logging, or other functionality around property access/setters

Cons:

* Typically slower due to function call overhead
* Requires additional memory allocation for storing data structures (e.g., `this._property` in the example)

**Library: None**

There are no external libraries mentioned in the benchmark definition.

**Special JS Features/Syntax**

This benchmark uses ES2015 features, including classes and getter/setter methods. Note that if you're using an older JavaScript version or a transpiler like Babel, some of these features might not be available or would require additional setup.

**Alternatives**

Other alternatives for accessing properties on objects include:

1. Using `Object.prototype.hasOwnProperty.call()` to check for property existence and access
2. Implementing custom getters and setters using functions (not shown in this benchmark)
3. Using a library like Lodash's `get` function, which can handle different types of property access (including dot notation, bracket notation, and getter/setter methods)

Keep in mind that each approach has its trade-offs in terms of performance, memory usage, and maintainability. The choice ultimately depends on the specific requirements and constraints of your project.

Related benchmarks:

Data Properties vs Getter / Setter Methods ES2015 (version: 0)

Comparing performance of: get data from data property vs set data to data property vs get data from class accessor vs set data to class accessor

Created: 3 years ago by: Registered User

Jump to the latest result

get data from data property

set data to data property

get data from class accessor

set data to class accessor

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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