Benchmark: Constructor parameters versus object assignment

HTML Preparation code:

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

Script Preparation code:

/*your preparation JavaScript code goes here
To execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/
async function globalMeasureThatScriptPrepareFunction() {
    // This function is optional, feel free to remove it.
    // await someThing();
}

Tests:

Constructor parameters
class Component { constructor(x, y) { this.x = x; this.y = y; } } for(let i = 0; i < 100000; i++) { const component = new Component(i, i); }
Constructor object
class Component { constructor(params) { const keys = Object.keys(params); for(let i = 0, l = keys.length; i < l; i++) { this[keys[i]] = params[i]; } } } for(let i = 0; i < 100000; i++) { const component = new Component({ x: i, y: i}); }
Factory function with object
const createComponent = (params) => { const component = {}; const keys = Object.keys(params); for(let i = 0, l = keys.length; i < l; i++) { component[keys[i]] = params[i]; } return component; } for(let i = 0; i < 100000; i++) { const component = createComponent({ x: i, y: i}); }
Factory function with definition and parameters
const positionComponentDef = { x: Number, y: Number, }; const createComponent= (def, ...params) => { const component = {}; const keys = Object.keys(def); for(let i = 0, l = keys.length; i < l; i++) { component[keys[i]] = params[i]; } return component; } for(let i = 0; i < 100000; i++) { const component = createComponent(positionComponentDef, i, i); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Constructor parameters
Constructor object
Factory function with object
Factory function with definition and parameters

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:133.0) Gecko/20100101 Firefox/133.0

Browser/OS: Firefox 133 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Constructor parameters	167.4 Ops/sec
Constructor object	50.8 Ops/sec
Factory function with object	131.5 Ops/sec
Factory function with definition and parameters	149.1 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark you're examining focuses on comparing different approaches for creating and initializing JavaScript objects, particularly in the context of a component-like structure. The main aspects being tested are:

1. **Constructor Parameters**: This approach involves passing individual parameters directly to the constructor of a class. Each instance of the `Component` class is initialized with individual properties `x` and `y`.

- **Pros**: 
     - Direct and clear initialization of properties.
     - Lower overhead since properties are assigned directly during construction.
   - **Cons**:
     - This method can become cumbersome if there are many parameters.
     - Less flexible as it doesn’t naturally allow for optional parameters or default values.

2. **Constructor with an Object**: In this case, the constructor accepts a single parameter which is an object. This object contains properties that are assigned to the instance based on its keys.

- **Pros**:
     - More flexible; you can easily add more properties without changing the constructor signature.
     - Handles optional properties better.
   - **Cons**:
     - Slightly more overhead due to the need to create an object and iterate over its properties.
     - Potential for misuse if the object structure is not enforced.

3. **Factory Function with Object**: This benchmark uses a factory function that takes an object as input. Instead of a class instance, it creates a plain object and initializes its properties via a similar approach as the constructor with an object.

- **Pros**:
     - Can be more versatile and decoupled from the class structure.
     - Good for scenarios where you might need to create multiple objects dynamically and don't require methods tied to a class.
   - **Cons**:
     - No instance methods or inheritance since it creates plain objects.
     - The object can inadvertently miss properties if the input doesn't conform exactly to expectations.

4. **Factory Function with Definition and Parameters**: Here, the factory function accepts a definition object along with parameters, allowing a structured approach to object creation.

- **Pros**:
     - Provides clear expectations about what properties will exist in the created object.
     - Flexibility to enforce property types and required properties.
   - **Cons**:
     - More complex to set up due to the additional abstraction layer (definition).
     - Can introduce overhead through multiple function calls and checks.

### Benchmark Results Analysis

The results from the provided benchmark indicate the counts of executions per second for each test, highlighting the relative performance of each method:

- **Constructor Parameters**: With the highest executions per second (271.08), this approach is the most efficient for creating component instances, making it a suitable choice when performance is a critical factor.
  
- **Factory Function with Definition and Parameters**: This method significantly reduces performance (226.46) but is still reasonably efficient given its balance of flexibility and type enforcement.

- **Factory Function with Object**: Performance drops further (212.50), indicating a higher overhead than simply using constructor parameters but still offers usable flexibility.

- **Constructor Object**: This approach sees the lowest performance (82.36). The extra overhead from creating an object and iterating through its keys leads to a noticeable performance penalty.

### Considerations

- **Choosing the Right Approach**: The choice between these methods often hinges on the specific use case. If performance is paramount and the parameter list is relatively small, using constructor parameters is advisable. For greater flexibility and dynamic object structure, consider the object-based approaches.

- **Alternatives**: Other alternatives might include using classes with static factory methods or leveraging libraries like **lodash** for more sophisticated object manipulation and assignment. Utility functions or libraries such as **Immer** can further streamline immutable object handling, but these may introduce additional overhead and complexity.

In conclusion, this benchmark is valuable not only in understanding the performance implications of object creation methods but also in guiding developers toward choosing the appropriate method based on performance needs and design patterns.

Related benchmarks:

Constructor parameters versus object assignment (version: 1)

Comparing performance of: Constructor parameters vs Constructor object vs Factory function with object vs Factory function with definition and parameters

Created: 4 months ago by: Guest

Jump to the latest result

Constructor parameters

Constructor object

Factory function with object

Factory function with definition and parameters

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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