Benchmark: js fn call - MeasureThat.net

HTML Preparation code:

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

Script Preparation code:

const o = { f1(){}, f2: () => {}, f3: undefined}

Tests:

f1
o.f1()
f2
o.f2()
f3
o.f3?.()

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 (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
f1	221880528.0 Ops/sec
f2	221078864.0 Ops/sec
f3	225731184.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark evaluates the performance of three different JavaScript function invocation styles using an object `o` that contains three methods: a standard function (`f1`), an arrow function (`f2`), and an undefined function (`f3`). Here’s a detailed explanation of what is being tested, the options compared, their pros and cons, and some related considerations.

### Options Compared

1. **Standard Function (`f1`)**:
   - **Definition**: `f1` is defined as a standard function notation within the object `o` (i.e., `f1() {}`).
   - **Test Invocation**: `o.f1()`
   
2. **Arrow Function (`f2`)**:
   - **Definition**: `f2` is defined as an arrow function (i.e., `f2: () => {}`).
   - **Test Invocation**: `o.f2()`
   
3. **Optional Chaining with Undefined (`f3`)**:
   - **Definition**: `f3` is defined as `undefined`, but the invocation uses optional chaining (i.e., `o.f3?.()`).
   - **Test Invocation**: `o.f3?.()`

### Performance Results
The benchmark results show how many times each function can be executed per second in the environment tested, which was Chrome 133 on a Windows Desktop. Here are the raw execution rates:
- `f3`: 225,731,184 executions per second
- `f1`: 221,880,528 executions per second
- `f2`: 221,078,864 executions per second

### Pros and Cons of Each Approach

#### 1. Standard Function (`f1`)
   **Pros**:
   - Traditional syntax is widely understood and compatible with older JavaScript versions.
   - Can be named (if desired) and has its own `this` context.

**Cons**:
   - May involve slightly more overhead due to context management compared to arrow functions, especially in different scopes.

#### 2. Arrow Function (`f2`)
   **Pros**:
   - Syntax is concise and allows cleaner code when dealing with inline functions or short callbacks.
   - Lexically binds `this`, making it easier to manage the context, particularly in functions within classes or objects.
   
   **Cons**:
   - Cannot be used as constructors (i.e., you cannot instantiate them with `new`).
   - Do not have their own `this`, which may lead to unexpected results in some situations.

#### 3. Optional Chaining with Undefined (`f3`)
   **Pros**:
   - Allows safe access to deeply nested properties/functions without throwing an error if the part being accessed is undefined.
   - In this benchmark, the effectiveness of optional chaining is demonstrated even when the function being invoked is not defined.

**Cons**:
   - Performance overhead due to the additional check and mechanism of optional chaining, though this overhead is minimal compared to the benefit of preventing runtime errors.
   - Can lead to less clarity if overused, especially in complex expressions.

### Other Considerations and Alternatives
- **Other Invocation Styles**: This benchmark specifically tests three styles, but there are other function invocation methods in JavaScript, including function expressions, immediate function execution, and higher-order functions.
- **Performance Variability**: The benchmark results may vary based on the JavaScript engine (e.g., V8, SpiderMonkey) and its version. Hence, understanding the underlying implementation is crucial for interpreting performance metrics.
- **Library Usage**: In this case, no external libraries are used in the benchmark. However, many JavaScript benchmarks might compare the performance of pure JavaScript against libraries (e.g., Lodash for utility functions) that abstract and optimize such calls.
- **Readability vs. Performance**: While the benchmark results may indicate raw performance, developers should prioritize code readability and maintainability, especially in larger codebases where function invocation clarity can impact overall project health.

### Conclusion
The benchmark provides clear insights into the execution performance of various JavaScript function styles. Each approach has its benefits and drawbacks, and it’s crucial for software engineers to choose based on the specific needs of their codebase, considering factors such as execution speed, context management, and readability.

Related benchmarks:

js fn call (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):