Benchmark: ES6 property (get/set) & getter/setter function vs direct access vs closure

ES6 property (get/set) & getter/setter function vs direct access vs closure (version: 0)

Comparing performance of: Public - ES6 property (get) vs Public - Getter function vs Public - Directly get vs Public - ES6 property (set) vs Public - Setter function vs Public - Directly set vs Private - ES6 property (get) vs Private - Getter function vs Private - ES6 property (set) vs Private - Setter function vs Closure - Getter function vs Closure - Setter function

Created: 2 years ago by: Guest

Jump to the latest result

Script Preparation code:

var Closure = (function initClosure() {
    let value = 0;
    return {
        getValue: function getValue() {
            return value;
        },
        setValue: function setValue(x) {
            value = x;
        }
    };
}());
class Private {
    #value = 0;
    constructor() {
        this.#value = 1
    }
    get value() {
        return this.#value
    }
    set value(x) {
        this.#value = x
    }
    getValue() {
        return this.#value
    }
    setValue(x) {
        this.#value = x
    }
}
class Public {
    value = 0;
    constructor() {
        this.value = 1
    }
    get value() {
        return this.value
    }
    set value(x) {
        this.value = x
    }
    getValue() {
        return this.value
    }
    setValue(x) {
        this.value = x
    }
}
var private = new Private();
var public = new Public();
var val = 0;

Tests:

Public - ES6 property (get)
val = public.value;
Public - Getter function
val = public.getValue();
Public - Directly get
val = public.value;
Public - ES6 property (set)
public.value = 1;
Public - Setter function
public.setValue( 1 );
Public - Directly set
public.value = 1;
Private - ES6 property (get)
val = private.value;
Private - Getter function
val = private.getValue();
Private - ES6 property (set)
private.value = 1;
Private - Setter function
private.setValue( 1 );
Closure - Getter function
Closure.getValue();
Closure - Setter function
Closure.setValue( 1 );

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Public - ES6 property (get)
Public - Getter function
Public - Directly get
Public - ES6 property (set)
Public - Setter function
Public - Directly set
Private - ES6 property (get)
Private - Getter function
Private - ES6 property (set)
Private - Setter function
Closure - Getter function
Closure - Setter function

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 140 on Android

View result in a separate tab

Test name	Executions per second
Public - ES6 property (get)	4435008.0 Ops/sec
Public - Getter function	3933790.2 Ops/sec
Public - Directly get	3907206.5 Ops/sec
Public - ES6 property (set)	46882192.0 Ops/sec
Public - Setter function	48009744.0 Ops/sec
Public - Directly set	53844792.0 Ops/sec
Private - ES6 property (get)	4171432.5 Ops/sec
Private - Getter function	4191206.8 Ops/sec
Private - ES6 property (set)	54450944.0 Ops/sec
Private - Setter function	50408920.0 Ops/sec
Closure - Getter function	50244436.0 Ops/sec
Closure - Setter function	47758816.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 benchmark measures the performance of different approaches to accessing and modifying properties in JavaScript classes.

**Property Access Methods**

There are three primary methods being tested:

1. **Direct Access**: Directly accessing a property without using any additional syntax or functions (e.g., `obj.prop`).
2. **ES6 Property Syntax**: Using the ES6-inspired property syntax, such as `objProp` or `this.prop`, to access and modify properties.
3. **Setter Functions**: Using setter functions, like `setProp()`, to modify properties.

**Performance Comparison**

The benchmark data shows the performance of each approach across various devices and browsers. The results indicate that:

* Direct Access is generally the fastest way to access and modify properties.
* ES6 Property Syntax and Setter Functions are slower than direct access but have consistent performance across different browsers and devices.

**Key Takeaways**

1. Direct access to properties is usually the fastest method, especially for simple accesses.
2. ES6 property syntax and setter functions can be slower due to additional overhead, but they provide a more concise and expressive way to work with properties.
3. Performance variations exist between browsers and devices, highlighting the importance of considering device-specific factors when optimizing code.

**Recommendations**

1. Use direct access for simple property accesses or cases where performance is critical.
2. Consider using ES6 property syntax or setter functions for more complex scenarios or where readability is important.
3. Be mindful of potential performance variations between browsers and devices when deciding which approach to use.

Related benchmarks: