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

ES6 property (get/set) & getter/setter function vs direct access to object attribute (private and not) (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`

Created: 2 years ago by: Guest

Go to the latest result

Script Preparation code:

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);

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_6_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.6 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 18 on iOS 18.6.2

View result in a separate tab

Public ES6 property (get)

492.4M/s

Public Getter function

457.4M/s

Public Directly get

440.0M/s

Private Getter function

437.4M/s

Public ES6 property (set)

409.7M/s

Private Setter function

404.4M/s

Private ES6 property (set)

393.0M/s

Private ES6 property (get)

347.7M/s

Public Setter function

266.7M/s

Public Directly set

264.2M/s

View exact numbers

Test name	Executions per second
✓ Public ES6 property (get)	492,417,024 Ops/sec
Public Getter function	457,440,608 Ops/sec
Public Directly get	439,977,152 Ops/sec
Private Getter function	437,433,824 Ops/sec
Public ES6 property (set)	409,728,416 Ops/sec
Private Setter function	404,419,936 Ops/sec
Private ES6 property (set)	393,028,672 Ops/sec
Private ES6 property (get)	347,661,888 Ops/sec
Public Setter function	266,689,936 Ops/sec
Public Directly set	264,156,992 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what is being tested, compared, and their pros and cons.

**Benchmark Definition:**

The benchmark measures the performance difference between accessing object attributes directly (using dot notation) versus using ES6 property access with getters and setters. The test cases compare these approaches for both public and private properties of an object.

**Test Cases:**

There are 8 test cases in total, each comparing a different approach:

1. Public ES6 property (get)
2. Public Getter function
3. Public Directly get
4. Public ES6 property (set)
5. Public Setter function
6. Private ES6 property (set)
7. Private Setter function
8. Private ES6 property (get)
9. Private Getter function

**Approaches Compared:**

The benchmark compares two approaches:

1. **Direct Access**: Accessing object attributes using dot notation (e.g., `obj.prop`).
2. **ES6 Property Access with Getters and Setters**: Using the `.` operator to access properties, which invokes a getter or setter function depending on the context.

**Pros and Cons of Each Approach:**

1. **Direct Access**:
	* Pros:
		+ Faster performance since it avoids the overhead of function calls.
		+ Easier to read and write code.
	* Cons:
		+ Can lead to bugs if not used carefully (e.g., accessing private properties directly).
2. **ES6 Property Access with Getters and Setters**:
	* Pros:
		+ Provides a way to encapsulate data and behavior, making it easier to reason about code.
		+ Allows for more flexible access control (e.g., read-only vs. read-write properties).
	* Cons:
		+ Slower performance due to the overhead of function calls.
		+ Can lead to confusion if not used carefully.

**Libraries Used:**

The benchmark uses JavaScript, which is a dynamic language that allows for easy creation of getters and setters using functions. The `Object.defineProperty()` method is used to define getter and setter properties on objects.

**Device and Browser:**

The benchmark results are reported for Firefox Mobile 125 on an Android device. This means the results may not be representative of other devices or browsers.

Now, let's take a deep breath and move on to analyzing the results...