Benchmark: object creation: object mutation vs hidden class vs combined vs field declaration

Tests:

With mutation
class SomeClass { one = "" two = 1 } for (var i = 0; i < 10_000; i++) { const obj = new SomeClass() obj.two = 2 }
constructor
class SomeClass { one = "" constructor(two) { this.two = two } } for (var i = 0; i < 10_000; i++) { const obj = new SomeClass(2) }
with constructor and mutation
class SomeClass { one = "" two = 1 constructor(two) { this.two = two } } for (var i = 0; i < 10_000; i++) { const obj = new SomeClass(2) }
declaration and constructor
class SomeClass { one constructor(one) { this.one = one } } for (var i = 0; i < 10_000; i++) { const obj = new SomeClass(2) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
With mutation
constructor
with constructor and mutation
declaration and constructor

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 115 on Windows

View result in a separate tab

Test name	Executions per second
With mutation	192.8 Ops/sec
constructor	353.6 Ops/sec
with constructor and mutation	196.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what's being tested, compared, and the pros and cons of each approach.

**Benchmark Definition**

The benchmark is testing four different approaches to creating objects in JavaScript:

1. **Object mutation**: Creating an object by assigning properties one by one.
2. **Hidden class**: Using the `hiddenClass` function from V8 engine (used by Chrome) to create a hidden class, which is a lightweight way of creating classes.
3. **Combined**: Combining the above two approaches by using `hiddenClass` and then assigning properties to the object.
4. **Field declaration**: Creating an object using the `class` keyword with field declarations.

**Options Comparison**

The four options are compared in terms of their performance, which is measured by the number of executions per second.

Pros and Cons:

* **Object mutation**: Simple and easy to implement, but may lead to slower performance due to the overhead of assigning properties one by one. Pros: straightforward implementation; Cons: potential performance impact.
* **Hidden class**: This approach uses V8 engine's hidden class mechanism, which provides good performance and is optimized for JavaScript object creation. Pros: fast execution; Cons: requires knowledge of V8 engine and `hiddenClass` function.
* **Combined**: Combining the above two approaches may provide a better balance between simplicity and performance. Pros: easier to understand than pure `hiddenClass`; Cons: slightly slower than using `hiddenClass` directly.
* **Field declaration**: This approach uses the new class syntax in JavaScript, which is more concise but may lead to slightly slower execution due to the overhead of parsing the code. Pros: concise implementation; Cons: potential performance impact.

**Library Usage**

None of the test cases use any external libraries. However, it's worth noting that some modern browsers (like Chrome) have built-in optimizations for object creation, which might affect the results.

**Special JS Features or Syntax**

This benchmark doesn't use any special JavaScript features or syntax beyond the `class` keyword and `hiddenClass` function (specific to V8 engine).

**Alternative Approaches**

Other approaches to creating objects in JavaScript could include:

1. Using a constructor function with `new` keyword.
2. Creating an object using a factory function or a builder pattern.
3. Using a library like Lodash or Underscore.js, which provide various methods for working with objects.

However, these alternatives are not compared in this benchmark.

Keep in mind that the choice of approach to creating objects depends on the specific requirements and constraints of the project. This benchmark provides valuable insights into the performance characteristics of different approaches, but may not cover all possible scenarios or use cases.

Related benchmarks:

object creation: object mutation vs hidden class vs combined vs field declaration (version: 2)

Comparing performance of: With mutation vs constructor vs with constructor and mutation vs declaration and constructor

Created: one year ago by: Registered User

Jump to the latest result

With mutation

constructor

with constructor and mutation

declaration and constructor

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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