Benchmark: ES6 property (get/set) & getter/setter function & direct access to object attribute

Script Preparation code:

class Class {
    constructor () {
        this._val = 1
    }
    get value() { return this._val }
    set value(x) { this._val = x }
    getValue() { return this._val }
    setValue(x) { this.val = x }
}
var cls = new Class()
var wtf

Tests:

ES6 property (get)
wtf = cls.value
Getter function
wtf = cls.getValue()
Directly get
wtf = cls._val
ES6 property (set)
cls.value = 1
Setter function
cls.setValue(1)
Directly set
cls._val = 1

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ES6 property (get)
Getter function
Directly get
ES6 property (set)
Setter function
Directly set

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
ES6 property (get)	18835938.0 Ops/sec
Getter function	18941810.0 Ops/sec
Directly get	18817872.0 Ops/sec
ES6 property (set)	217459584.0 Ops/sec
Setter function	226226944.0 Ops/sec
Directly set	225610880.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Definition**

The benchmark measures the performance of accessing and modifying properties of an object in JavaScript, specifically using ES6 property syntax (get/set), getter/setter functions, and direct access to object attributes. The script defines a class with private fields (`_val`) and exposes them through getter and setter methods or direct access.

**Options Compared**

The benchmark compares the performance of six different approaches:

1. **ES6 property (get)**: Accessing the `_val` field using the `value` getter method.
2. **Getter function**: Calling a separate `getValue()` function to retrieve the `_val` field's value.
3. **Directly get**: Directly accessing the `_val` field without any additional functions or methods.
4. **ES6 property (set)**: Setting the `_val` field using the `value` setter method.
5. **Setter function**: Calling a separate `setValue()` function to set the `_val` field's value.
6. **Directly set**: Directly modifying the `_val` field without any additional functions or methods.

**Pros and Cons of Each Approach**

Here are some pros and cons of each approach:

* **ES6 property (get)**: Pros: concise, efficient; Cons: relies on getter method implementation details.
* **Getter function**: Pros: flexible, easy to understand; Cons: may introduce overhead due to function call.
* **Directly get**: Pros: simple, fast; Cons: assumes direct access is allowed and might be restricted by JavaScript engine or platform.
* **ES6 property (set)**: Pros: concise, efficient; Cons: relies on setter method implementation details.
* **Setter function**: Pros: flexible, easy to understand; Cons: may introduce overhead due to function call.
* **Directly set**: Pros: simple, fast; Cons: assumes direct modification is allowed and might be restricted by JavaScript engine or platform.

**Library and Its Purpose**

The `Class` constructor is used to define the object with private fields (`_val`) and public getter and setter methods. The purpose of this library-like structure is to provide a concise way to expose internal state while maintaining encapsulation.

**Special JS Features/Syntax**

This benchmark uses ES6 property syntax, which introduces several features:

* Private fields (`_val`): introduced in ECMAScript 2020.
* Getter and setter methods (`value`, `setValue`, `getValue`, `setValue`): part of the ES6 standard.

The benchmark does not explicitly use any special JavaScript features or syntax beyond what's required for the test cases.

**Alternatives**

There are alternative approaches to accessing and modifying properties, such as:

* Using dot notation (e.g., `cls._val`) instead of getter/setter methods.
* Utilizing other data structures, like arrays or objects with custom getters and setters.
* Implementing accessors using a library like Lodash's `get` and `set` functions.

However, these alternatives may not be as concise or efficient as the approaches used in this benchmark.

Related benchmarks:

ES6 property (get/set) & getter/setter function & direct access to object attribute (version: 0)

Comparing performance of: ES6 property (get) vs Getter function vs Directly get vs ES6 property (set) vs Setter function vs Directly set

Created: 5 years ago by: Registered User

Jump to the latest result

ES6 property (get)

Getter function

Directly get

ES6 property (set)

Setter function

Directly set

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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