Benchmark: Accessor vs method vs direct property access

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

const simpleObject = () => ({ 
  property: Math.random()
})

class SimpleClass {
  property = Math.random()
}

const methodObject = () => ({ 
  getProperty() { 
    return Math.random()
  } 
})

class MethodClass {
  getProperty() {
    return Math.random()
  }
}

const accessorObject = () => ({
  get property() {
    return Math.random()
  }
})

class AccessorClass {
  get property() {
    return Math.random()
  }
}

Tests:

Simple object
const result = simpleObject().property
Simple class
const result = new SimpleClass().property
Method object
const result = methodObject().getProperty()
Method class
const result = new MethodClass().getProperty()
Accessor object
const result = accessorObject().property
Accessor class
const result = new AccessorClass().property

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Simple object
Simple class
Method object
Method class
Accessor object
Accessor class

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
Simple object	128585392.0 Ops/sec
Simple class	107972248.0 Ops/sec
Method object	101302056.0 Ops/sec
Method class	122080592.0 Ops/sec
Accessor object	10168510.0 Ops/sec
Accessor class	117083168.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

The benchmark titled "Accessor vs method vs direct property access" evaluates different approaches to accessing properties in JavaScript objects and classes. Specifically, it compares the performance of:

1. **Simple Object**: Direct property access in a plain object.
    - **Test Definition**: `const result = simpleObject().property`
    - **Pros**: Fastest due to direct access without any additional overhead.
    - **Cons**: Limited to simple properties without any behavior or encapsulation logic.

2. **Simple Class**: Direct property access in a class field.
    - **Test Definition**: `const result = new SimpleClass().property`
    - **Pros**: Provides a constructor-based approach, suitable for object-oriented design.
    - **Cons**: Has slightly more overhead compared to a simple object due to the class creation process.

3. **Method Object**: Accessing a property value through a method in an object.
    - **Test Definition**: `const result = methodObject().getProperty()`
    - **Pros**: Allows for encapsulation and can include logic when retrieving a value, ensuring that the internal state can be controlled.
    - **Cons**: Generally slower than direct access due to the overhead involved in method calls.

4. **Method Class**: Accessing a property via a method defined in a class.
    - **Test Definition**: `const result = new MethodClass().getProperty()`
    - **Pros**: Encapsulation and behavior encapsulated in method, neatly packages functionality together.
    - **Cons**: Similar to the method object, it has overhead from the method call, which can be significant in performance-critical situations.

5. **Accessor Object**: Using getters to access a property in an object.
    - **Test Definition**: `const result = accessorObject().property`
    - **Pros**: Provides an opportunity to encapsulate property access and can include access control or computation when returning a value.
    - **Cons**: Slower compared to direct access, similar to using a method, as there is an overhead for property access through a getter.

6. **Accessor Class**: Using a getter in a class to access a property.
    - **Test Definition**: `const result = new AccessorClass().property`
    - **Pros**: Gives the flexibility of encapsulation along with the object-oriented structure.
    - **Cons**: It generally has the highest overhead due to the getter method being called on instantiation.

### Summary of Results
From the benchmark's results, the performance (in executions per second) shows a clear preference for the simplest forms of property access:

- The **Simple object** method is the fastest, followed by the **Method object**.
- The other approaches (Accessor classes and objects) are significantly slower, primarily due to the overhead of using methods or accessors.

### Considerations and Alternatives
- **Direct Access**: Simpler and faster, making it ideal for small, functional programming used cases or where performance is critical.
- **Encapsulation**: If behavior or state management is needed, methods and accessors are essential, even at the cost of performance.
- Other alternatives might include using libraries or patterns (like the observer pattern) that offer combination utility functions and state management.

Overall, engineers should weigh the need for speed against architectural considerations when choosing the method of property access in their JavaScript applications.

Related benchmarks:

Accessor vs method vs direct property access (version: 1)

Comparing performance of: Simple object vs Simple class vs Method object vs Method class vs Accessor object vs Accessor class

Created: 2 months ago by: Guest

Jump to the latest result

Simple object

Simple class

Method object

Method class

Accessor object

Accessor class

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):