Benchmark: js fn call v2 - 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: one year 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

250.8M/s

244.7M/s

227.7M/s

View exact numbers

Test name	Executions per second
✓ f1	250,836,128 Ops/sec
f3	244,662,144 Ops/sec
f2	227,694,608 Ops/sec

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

LLMs can make mistakes. Check important info.

In this benchmark, three approaches to defining and invoking functions in JavaScript are compared based on their performance when calculating the power of a number (using the exponentiation operator `**`). Each test utilizes a different method to define and invoke a function:

### Test Cases Compared

1. **Function Declaration (Method)**: `o.f1(123, 345)`
   - **Definition**: `f1(a, b) { a ** b }`
   - **Type**: Traditional function declaration.
   - **Execution**: This method directly calls a defined method on an object.

2. **Arrow Function**: `o.f2(123, 345)`
   - **Definition**: `f2: (a, b) => { return a ** b }`
   - **Type**: Concise syntax for functions introduced in ES6 (ECMAScript 2015).
   - **Execution**: Utilizes the arrow function syntax with an explicit return value. It is bound to the enclosing scope, bringing a different handling of the `this` context.

3. **Optional Chaining with Undefined**: `o.f3?.(123, 345)`
   - **Definition**: `f3: undefined` (no actual function).
   - **Type**: Syntax used to safely access properties or call methods on potentially undefined or null values.
   - **Execution**: The optional chaining operator (`?.`) allows the test to safely attempt to invoke `f3` without throwing an error even though `f3` is explicitly set to `undefined`.

### Performance Results

**Executions Per Second**:
- **f1**: 250,836,128.0
- **f3**: 244,662,144.0
- **f2**: 227,694,608.0

### Analysis of Pros and Cons

1. **Function Declaration (`f1`)**:
   - **Pros**:
     - The traditional method is straightforward and easy to understand.
     - It benefits from performance optimizations in JavaScript engines for named functions.
   - **Cons**:
     - Slightly less flexible than arrow functions in terms of `this` binding.

2. **Arrow Function (`f2`)**:
   - **Pros**:
     - More concise and modern syntax; often leads to cleaner code.
     - Lexically binds `this`, which can be beneficial in certain contexts (like callbacks in methods).
   - **Cons**:
     - In some JavaScript environments or for certain use cases, there may be a slight performance overhead due to the need for context binding.
  
3. **Optional Chaining (`f3`)**:
   - **Pros**:
     - Safeguards against `TypeError` when attempting to call methods on `undefined` or `null`.
     - Useful in scenarios where a method may or may not exist.
   - **Cons**:
     - Since `f3` is `undefined`, it offers no performance benefits and serves as a redundancy in this benchmark context.
     - The performance will not reflect actual function execution since there is no valid workload.

### Considerations and Alternatives

- The test highlights differences in function invocation methods that can impact performance. While using the `**` operator is straightforward, the distinctions in how functions are defined and executed can lead to performance variations depending on the JavaScript engine optimizations.
- Alternatives include:
  - Using standard function expressions instead of arrow functions.
  - Using built-in methods (like `Math.pow`) for some calculations, which can also be benchmarked to see how they perform in comparison to custom implementations.
  - Including more complex calculations or workloads in benchmarks could provide deeper insights, as performance may vary with input sizes or algorithmic complexity.

This benchmark provides valuable insights into function invocation performance in JavaScript, revealing that traditional functions may still have an edge in execution speed compared to newer syntax, though the practical differences may be negligible for many use-cases.

js fn call v2 (version: 1)

Comparing performance of: `f1 vs f2 vs f3`

Created: one year ago by: Guest

Go to the latest result

f1

f2

f3

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

js fn call v2 (version: 1)

Comparing performance of: f1 vs f2 vs f3

Created: one year ago by: Guest

Go to the latest result

f1

f2

f3

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `f1 vs f2 vs f3`