Benchmark: Time Cost for different calling

HTML Preparation code:

<script>
    function fn1() {

        const a = new Object();
        a.val1 = 1;
        a.val2 = 2;
        a.f0 = () => a.val1 + a.val2;
        return a;
    }

    function fn2() {

        const a = new Function();
        a.val1 = 1;
        a.val2 = 2;
        a.f0 = () => a.val1 + a.val2;
        return a;
    }

    const f0 = function() {
        console.log(this.val1 + this.val2);
    };


    function fn3() {

        const a = {};
        let f1 = f0.bind(a);
        a.val1 = 1;
        a.val2 = 2;
        return f1;
    }
    class BB {
        get name() {
            return 'hi'
        }
    }
    const BBp = BB.prototype;

    BBp.val1 = 1;
    BBp.val2 = 2;

    function fn4() {

        const a = () => {};
        Object.setPrototypeOf(a, BBp);

        return a;
    }

    function fn5() {

        const a = () => {};
        a.prototype = BBp;

        return a;
    }
    let m = new Float64Array(256);

    function fn6() {
        const a = {};
        a.b = m.subarray(0, 64);
        return a;
    }
  
    function fn7() {
        const a = {};
        Object.defineProperty(a, 'b', {get: ()=> m.subarray(0, 64)})
        return a;
    }
</script>

Tests:

test1
fn1();fn1();fn1();fn1();fn1();fn1();fn1();fn1();fn1();fn1();
test2
fn2();fn2();fn2();fn2();fn2();fn2();fn2();fn2();fn2();fn2();
test3
fn3();fn3();fn3();fn3();fn3();fn3();fn3();fn3();fn3();fn3();
test4
fn4();fn4();fn4();fn4();fn4();fn4();fn4();fn4();fn4();fn4();
test5
fn5();fn5();fn5();fn5();fn5();fn5();fn5();fn5();fn5();fn5();
test6
fn6();fn6();fn6();fn6();fn6();fn6();fn6();fn6();fn6();fn6();
test7
fn7();fn7();fn7();fn7();fn7();fn7();fn7();fn7();fn7();fn7();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
test1
test2
test3
test4
test5
test6
test7

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month 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 Edg/133.0.0.0

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
test1	11284150.0 Ops/sec
test2	399979.7 Ops/sec
test3	36674316.0 Ops/sec
test4	1409040.4 Ops/sec
test5	50850840.0 Ops/sec
test6	4118291.5 Ops/sec
test7	465188.4 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON tests different approaches in JavaScript for creating objects and functions. Specifically, it compares four methods: using `new Object`, `new Function`, function binding, and setting prototype with an arrow function. Each approach has its characteristics which can impact performance and usage.

### Options Compared
1. **`fn1()`**: This function uses the `new Object()` constructor to create an object. It initializes properties (`val1` and `val2`) and defines a method (`f0`) using an arrow function.
   
2. **`fn2()`**: This function uses the `new Function()` constructor to create a function dynamically, similar to how you would create an object using `new Object()`. However, the function created doesn't perform any specific operations; it initializes the same properties and method as in `fn1()`.
  
3. **`fn3()`**: This option uses a plain object (`const a = {}`) and employs `Function.prototype.bind()` to bind the context of function `f0` to the object `a`. This is significant because `bind()` allows you to set the `this` value within the method.

4. **`fn4()`**: This method creates an arrow function, then sets its prototype using `Object.setPrototypeOf()`. This allows the function to have access to the properties defined on the prototype object, in this case, `BBp`.

### Pros and Cons of Each Approach

#### 1. `new Object()`
- **Pros**:
  - Simple and clear syntax for creating objects.
  - Generally fast for simple object creation.
- **Cons**:
  - Can have less flexibility compared to other object creation methods.
  
#### 2. `new Function()`
- **Pros**:
  - Provides a way to define functions at runtime as strings.
- **Cons**:
  - This method is generally considered less secure and can lead to performance issues; it creates functions that are not easily optimized by JavaScript engines.
  - More complex and less transparent than declaring functions normally.

#### 3. `bind()`
- **Pros**:
  - `bind()` gives you control over the `this` context, which is useful when working with methods that require access to the object’s properties.
- **Cons**:
  - The use of `bind()` may have a slight performance overhead compared to direct method calls since it returns a new function.

#### 4. Setting Prototype with Arrow Function
- **Pros**:
  - The use of prototypes can lead to more memory-efficient code when dealing with multiple instances sharing methods.
  - Arrow functions preserve the `this` context from their enclosing scope, which can reduce common pitfalls related to `this`.
- **Cons**:
  - Arrow functions cannot be used as constructors, which could limit their usage in certain scenarios.

### Benchmark Results
From the latest benchmark results:
- The best performing option was `test3` (fn3), with approximately 65.77 million executions per second.
- `test1` (fn1) was the second best with around 21.35 million executions per second.
- `test2` (fn2) significantly lagged behind with approximately 530.57 thousand executions per second.

### Other Considerations
Performance is not the only factor in choosing an object creation method. Readability, maintainability, and appropriate use cases must also guide decisions. Developers should choose techniques based on the needs of their specific applications, considering how these methods interact with JavaScript’s event-driven nature, closure behavior, and scope management.

### Alternatives
Some alternatives to the methods tested could include:
- Using ES6 classes.
- Object literals for direct property assignment and faster instantiation.
- Factory functions for generating objects without the need for `new`.

In conclusion, the benchmark highlights important performance differences among common JavaScript object creation techniques while also outlining the inherent trade-offs that developers must consider. Each method suits different scenarios, and making an informed choice can lead to more optimized and maintainable code in JavaScript applications.

Related benchmarks:

Time Cost for different calling (version: 4)

Comparing performance of: test1 vs test2 vs test3 vs test4 vs test5 vs test6 vs test7

Created: one month ago by: Registered User

Jump to the latest result

test1

test2

test3

test4

test5

test6

test7

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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