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

Go 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: 10 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

Private - ES6 property (set)

54.5M/s

Public - Directly set

53.8M/s

Private - Setter function

50.4M/s

Closure - Getter function

50.2M/s

Public - Setter function

48.0M/s

Closure - Setter function

47.8M/s

Public - ES6 property (set)

46.9M/s

Public - ES6 property (get)

4.4M/s

Private - Getter function

4.2M/s

Private - ES6 property (get)

4.2M/s

Public - Getter function

3.9M/s

Public - Directly get

3.9M/s

View exact numbers

Test name	Executions per second
✓ Private - ES6 property (set)	54,450,944 Ops/sec
Public - Directly set	53,844,792 Ops/sec
Private - Setter function	50,408,920 Ops/sec
Closure - Getter function	50,244,436 Ops/sec
Public - Setter function	48,009,744 Ops/sec
Closure - Setter function	47,758,816 Ops/sec
Public - ES6 property (set)	46,882,192 Ops/sec
Public - ES6 property (get)	4,435,008 Ops/sec
Private - Getter function	4,191,207 Ops/sec
Private - ES6 property (get)	4,171,432 Ops/sec
Public - Getter function	3,933,790 Ops/sec
Public - Directly get	3,907,206 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.