Benchmark: js fn call v23 - MeasureThat.net

HTML Preparation code:

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

Script Preparation code:

const o = { f1(a,b){a**b}, f2: (a,b) => {return a**b}, f3: undefined}

Tests:

f1
o.f1?.(123,345)
f2
o.f2?.(123,345)
f3
o.f3?.(123,345)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
f1
f2
f3

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6.1 Safari/605.1.15

Browser/OS: Safari 17 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
f1	497376832.0 Ops/sec
f2	493495872.0 Ops/sec
f3	487984672.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON evaluates the performance of three different function call styles in JavaScript: a method of an object using traditional function syntax, an arrow function, and an undefined reference. Below is a detailed explanation of each aspect of the benchmark.

### Benchmark Setup

- **Preparation Code:**
  - A JavaScript object, `o`, is created with three properties:
    - `f1`: A traditional function defined using the `function` keyword.
    - `f2`: An arrow function.
    - `f3`: An undefined value.
  - The mathematical operation tested is exponentiation (`**`), which raises the first argument to the power of the second argument.

### Individual Test Cases

The benchmark tests function calls using optional chaining:

1. **`o.f1?.(123,345)`**
   - **Test Name:** `f1`
   - **Type:** Traditional function defined in the object.
   - **Execution Context:** If `f1` exists on object `o`, it calls the function; otherwise, it returns `undefined`.
  
2. **`o.f2?.(123,345)`**
   - **Test Name:** `f2`
   - **Type:** Arrow function.
   - **Execution Context:** Similar to `f1`, if `f2` exists, it invokes the function; otherwise, it evaluates to `undefined`.

3. **`o.f3?.(123,345)`**
   - **Test Name:** `f3`
   - **Type:** Undefined reference.
   - **Execution Context:** This will always evaluate to `undefined`, as `f3` is explicitly set to `undefined`.

### Results

The benchmark results provide the number of executions per second for each test case when run in Chrome 133 on a Windows desktop environment:

- **f2 (Arrow Function):** 232,444,656 executions per second (the fastest).
- **f1 (Traditional Function):** 223,764,192 executions per second (slightly slower).
- **f3 (Undefined Function):** 219,150,784 executions per second (also slower than `f1`).

### Pros and Cons of Each Approach

1. **Traditional Function (`f1`):**
   - **Pros:**
     - It has its own `this` context, which can be beneficial in methods that need to access object properties.
     - Suitable for function declarations that are hoisted.
   - **Cons:**
     - Slightly slower than arrow functions in many cases, depending on the JavaScript engine's optimizations.

2. **Arrow Function (`f2`):**
   - **Pros:**
     - Typically faster as shown by the benchmark.
     - Lexically binds `this`, which can simplify code in many scenarios, especially in callbacks.
   - **Cons:**
     - Cannot be used as constructor functions (they don’t have a `[[Construct]]` method).
     - Does not have its own `this`, which can lead to confusion if used in contexts expecting it.

3. **Undefined Reference (`f3`):**
   - **Pros:**
     - No performance cost, but essentially it is equivalent to doing nothing (returns `undefined`).
   - **Cons:**
     - Not a valid function call, which makes it irrelevant for functional evaluations.

### Other Considerations

- **Optional Chaining (`?.`):** This operator allows for safe access to deeply nested properties or methods without throwing an error if any reference is `null` or `undefined`. In this context, it specifically helps in verifying if the function is callable before executing it.
  
- **Performance Variability:** The benchmark performance can vary based on different JavaScript engines, optimizations applied by the engines, and hardware capabilities. As highlighted, while arrow functions performed better in this test case, this performance can vary in other complex situations or depending on subsequent modifications to the JavaScript engine.

### Alternatives

- **Function expressions:** Instead of defining functions directly on an object, one could define standalone functions and invoke them or pass them as callbacks.
- **Classes:** In modern JavaScript (ES6 and beyond), you could consider defining methods within classes, which can also encapsulate state and behavior.
- **Higher-order Functions:** Using functions that return or take functions as their arguments can provide more flexible and reusable code structures compared to simple function calls.

These various approaches and techniques provide a robust toolkit for JavaScript developers, offering flexibility to choose the most suitable mechanism based on their specific application needs and performance considerations.

Related benchmarks:

js fn call v23 (version: 1)

Comparing performance of: f1 vs f2 vs f3

Created: 2 months ago by: Guest

Jump to the latest result

f1

f2

f3

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