Benchmark: Private vs public class field access

Script Preparation code:

class ClassWithPublicFields {
  a;
  b;
  constructor() {
    this.a = 4;
    this.b = this.a + 3;
  }
}
window.ClassWithPublicFields = ClassWithPublicFields;

class ClassWithPrivateFields {
  #a;
  #b;
  constructor() {
    this.#a = 4;
    this.#b = this.#a + 3;
  }
}
window.ClassWithPrivateFields = ClassWithPrivateFields;

Tests:

Public field access
new ClassWithPublicFields();
Private field access
new ClassWithPrivateFields();

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Public field access

199.9M/s

Private field access

187.7M/s

View exact numbers

✓ Public field access: 199,894,208 ops/sec
• Private field access: 187,690,448 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
Public field access
Private field access

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 144 on Mac OS X 10.15.7

View result in a separate tab

Public field access

199.9M/s

Private field access

187.7M/s

View exact numbers

Test name	Executions per second
✓ Public field access	199,894,208 Ops/sec
Private field access	187,690,448 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 explanation of the provided benchmark.

**Benchmark Definition:**
The benchmark is designed to compare the performance of accessing public and private class fields in JavaScript. The script preparation code defines two classes, `ClassWithPublicFields` and `ClassWithPrivateFields`, with public and private fields respectively. The benchmark is then run by creating instances of these classes using their constructors.

**Options Compared:**

1. **Public field access**: This option accesses the class fields directly using the dot notation (e.g., `new ClassWithPublicFields().a`).
2. **Private field access**: This option accesses the private class fields using the bracket notation with double underscores (e.g., `new ClassWithPrivateFields().#a`).

**Pros and Cons:**

*   **Public field access**:
    *   Pros:
        *   Simpler to use
        *   More familiar for developers who are used to accessing properties directly
    *   Cons:
        *   Potential performance issues due to slower access times (as shown in the benchmark results)
*   **Private field access**:
    *   Pros:
        *   Provides better encapsulation and security, as private fields are not directly accessible from outside the class
        *   Can improve performance by reducing the need for indirection through getter/setters
    *   Cons:
        *   More complex to use, especially in older JavaScript versions (before ES6)
        *   May require additional syntax or helper functions

**Library and Purpose:**
The benchmark does not explicitly mention any libraries. However, it uses a common JavaScript pattern for defining classes, which is supported by most modern browsers.

**Special JS Feature or Syntax:**
This benchmark uses the `#` symbol to access private class fields, which was introduced in ES6 (ECMAScript 2015) as part of the JavaScript language standard. This feature allows developers to create private members within a class that can only be accessed through getter and setter methods.

**Other Alternatives:**

*   **ES6 Classes**: If you prefer an alternative syntax for defining classes, you could use ES6 classes with public fields (i.e., removing the `#` symbol from the field declarations).
    ```javascript
class ClassWithPublicFields {
  a;
  b;

constructor() {
    this.a = 4;
    this.b = this.a + 3;
  }
}
```
*   **Closure-based access**: Another approach to accessing private fields is by using closures and getter/setter functions. This method can provide better encapsulation but may be less performant.

Here's an example of how you could implement a closure-based access for the `ClassWithPrivateFields`:
```javascript
class ClassWithPrivateFields {
  #a;
  #b;

constructor() {
    this.#a = 4;
    this.#b = this.#a + 3;
  }

get a() { return this.#a; }
  set a(value) { this.#a = value; }
}

const privateAccess = new ClassWithPrivateFields();
console.log(privateAccess.a); // prints the value of #a
privateAccess.a = 10;
console.log(privateAccess.a); // prints 10
```
This approach involves using getter and setter functions to provide controlled access to the private fields.

Private vs public class field access (version: 2) Benchmark.js

This benchmark works in latest Chrome. It will not run in Firefox, until Firefox version 90, which should come out soon.

Comparing performance of: `Public field access vs Private field access`

Created: 5 years ago by: Registered User

Go to the latest result

Public field access

Private field access

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 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):

Private vs public class field access (version: 2) Benchmark.js

This benchmark works in latest Chrome. It will not run in Firefox, until Firefox version 90, which should come out soon.

Comparing performance of: Public field access vs Private field access

Created: 5 years ago by: Registered User

Go to the latest result

Public field access

Private field access

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 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: `Public field access vs Private field access`