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

Historical Performance Data aggregated from 102 community runs

Desktop Results:

Chrome 92 runs

Setter function

30.1M/s

Directly set

30.1M/s

ES6 property (set)

30.1M/s

Directly get

10.1M/s

Getter function

10.0M/s

ES6 property (get)

9.9M/s

Fastest: Setter function (3.1x faster)

View exact numbers

✓ Setter function: 30,080,532 ops/sec
• Directly set: 30,067,328 ops/sec
• ES6 property (set): 30,050,098 ops/sec
• Directly get: 10,125,688 ops/sec
• Getter function: 10,013,770 ops/sec
• ES6 property (get): 9,850,222 ops/sec

Firefox 5 runs

ES6 property (set)

668.1M/s

Setter function

665.3M/s

Directly set

588.8M/s

Getter function

468.8M/s

Directly get

436.7M/s

ES6 property (get)

409.9M/s

Fastest: ES6 property (set) (1.6x faster)

View exact numbers

✓ ES6 property (set): 668,133,312 ops/sec
• Setter function: 665,300,992 ops/sec
• Directly set: 588,798,080 ops/sec
• Getter function: 468,817,856 ops/sec
• Directly get: 436,712,480 ops/sec
• ES6 property (get): 409,875,360 ops/sec

Mobile Results:

Safari 5 runs

ES6 property (set)

14.4M/s

Setter function

14.0M/s

Directly set

13.5M/s

Getter function

7.0M/s

ES6 property (get)

6.9M/s

Directly get

6.8M/s

Fastest: ES6 property (set) (2.1x faster)

View exact numbers

✓ ES6 property (set): 14,368,485 ops/sec
• Setter function: 14,045,416 ops/sec
• Directly set: 13,467,989 ops/sec
• Getter function: 6,984,238 ops/sec
• ES6 property (get): 6,934,939 ops/sec
• Directly get: 6,771,478 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 3 months ago)

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

Browser/OS: Chrome 147 on Windows

View result in a separate tab

Setter function

123.2M/s

Directly set

119.5M/s

ES6 property (set)

112.7M/s

Directly get

7.7M/s

ES6 property (get)

7.7M/s

Getter function

7.6M/s

View exact numbers

Test name	Executions per second
✓ Setter function	123,234,120 Ops/sec
Directly set	119,511,040 Ops/sec
ES6 property (set)	112,687,680 Ops/sec
Directly get	7,695,976 Ops/sec
ES6 property (get)	7,695,340 Ops/sec
Getter function	7,635,258 Ops/sec

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

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: 6 years ago by: Registered User

Go to the latest result

ES6 property (get)

Getter function

Directly get

ES6 property (set)

Setter function

Directly set

Historical Performance Data aggregated from 102 community runs

Desktop Results:

Chrome 92 runs

Firefox 5 runs

Mobile Results:

Safari 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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: 6 years ago by: Registered User

Go to the latest result

ES6 property (get)

Getter function

Directly get

ES6 property (set)

Setter function

Directly set

Historical Performance Data aggregated from 102 community runs

Desktop Results:

Chrome 92 runs

Firefox 5 runs

Mobile Results:

Safari 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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