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: one year 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;

AخA
 
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;
val = public.value;
Public - Getter function
val = public.getValue();
val = public.getValue();
Public - Directly get
val = public.value;
val = public.value;
Public - ES6 property (set)
public.value = 1;
public.value = 1;
Public - Setter function
public.setValue( 1 );
public.setValue( 1 );
Public - Directly set
public.value = 1;
public.value = 1;
Private - ES6 property (get)
val = private.value;
val = private.value;
Private - Getter function
val = private.getValue();
val = private.getValue();
Private - ES6 property (set)
private.value = 1;
private.value = 1;
Private - Setter function
private.setValue( 1 );
private.setValue( 1 );
Closure - Getter function
Closure.getValue();
Closure.getValue();
Closure - Setter function
Closure.setValue( 1 );
Closure.setValue( 1 );

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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

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

Browser/OS: Chrome 132 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Public - ES6 property (get)	7462431.5 Ops/sec
Public - Getter function	6705466.0 Ops/sec
Public - Directly get	6156127.0 Ops/sec
Public - ES6 property (set)	65838800.0 Ops/sec
Public - Setter function	63478128.0 Ops/sec
Public - Directly set	64529084.0 Ops/sec
Private - ES6 property (get)	5265531.0 Ops/sec
Private - Getter function	5159066.5 Ops/sec
Private - ES6 property (set)	58952800.0 Ops/sec
Private - Setter function	58186636.0 Ops/sec
Closure - Getter function	54487944.0 Ops/sec
Closure - Setter function	50046764.0 Ops/sec

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

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:

Direct Access: Directly accessing a property without using any additional syntax or functions (e.g., obj.prop).
ES6 Property Syntax: Using the ES6-inspired property syntax, such as objProp or this.prop, to access and modify properties.
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

Direct access to properties is usually the fastest method, especially for simple accesses.
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.
Performance variations exist between browsers and devices, highlighting the importance of considering device-specific factors when optimizing code.

Recommendations

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

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: