Benchmark: Arrow vs Regular Functions (with ternary operation)

Tests:

arrow
const a = (x, y, z) => (x < 3 && y < 4 && z < 5) ? z - x - y : x - y - z; a(3, 4, 5); a(5, 4, 3);
function
function a(x, y, z) { return (x < 3 && y < 4 && z < 5) ? z - x - y : x - y - z; } a(3, 4, 5); a(5, 4, 3);

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Firefox 6 runs

function

945.6M/s

arrow

935.8M/s

View exact numbers

✓ function: 945,556,480 ops/sec
• arrow: 935,774,592 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
arrow
function

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

Browser/OS: Chrome 133 on Windows

View result in a separate tab

function

166.7M/s

arrow

153.2M/s

View exact numbers

Test name	Executions per second
✓ function	166,713,840 Ops/sec
arrow	153,152,272 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark presented is a comparison between two different styles of defining functions in JavaScript: **arrow functions** and **regular functions**. Both types are used to perform the same operation involving a ternary conditional statement, but they have distinct characteristics and implications for performance, readability, and context handling.

### What is Being Tested
The benchmark consists of a single test case executed twice:
1. An **arrow function** defined with the syntax `const a = (x, y, z) => ...`.
2. A **regular function** defined with the traditional syntax `function a(x, y, z) { ... }`.

The purpose of the test is to measure how many times each function can be executed in one second (Executions Per Second), indicating their performance in this specific context.

### Performance Results
According to the results:
- **Arrow Function**: 107,193,096 executions per second.
- **Regular Function**: 104,213,384 executions per second.

The arrow function outperforms the regular function slightly in this test scenario.

### Pros and Cons of Each Approach

#### Arrow Functions
**Pros**:
- **Conciseness**: They require less syntax to define. This can lead to cleaner and more readable code, especially for simple functions.
- **Lexical `this`**: Arrow functions do not have their own `this` context; they inherit it from the parent scope, which can help avoid common pitfalls related to context binding.

**Cons**:
- **Unusable as Constructors**: Arrow functions cannot be used with the `new` keyword since they do not have their own `this` context.
- **Limitations**: They lack the `arguments` object, which may require additional handling in cases where argument counting or manipulation is necessary.

#### Regular Functions
**Pros**:
- **Versatility**: Regular functions can be used as constructors, and they have their own `this` context, making them suitable for object-oriented programming.
- **Full Feature Set**: They support all JavaScript features, including the `arguments` object for accessing parameters passed to the function.

**Cons**:
- **Verbosity**: They tend to be more verbose than arrow functions, potentially making the code less clean, particularly for simple callbacks.

### Other Considerations
When choosing between arrow and regular functions, developers should consider the context in which they are used. If preserving the `this` context is important (such as within a method of an object or in class methods), then arrow functions may be more appropriate. However, if the function needs to act as a constructor, regular function syntax is required.

### Alternatives
Other alternatives to function definitions in JavaScript include:
- **Function Expressions**: Similar constructs to the regular function but assigned to a variable or passed as an argument.
- **Anonymous Functions**: Functions defined without a name, often used in callbacks or immediately invoked function expressions (IIFE).
- **Class Syntax**: Utilizing classes and methods, which implicitly use regular function semantics but provide a more structured approach to object-oriented programming in JavaScript.

In conclusion, the difference between arrow functions and regular functions can significantly impact readability and functionality, depending on the specific use case and developer preferences.

Arrow vs Regular Functions (with ternary operation) (version: 1)

Does more than a simple addition.

Comparing performance of: `arrow vs function`

Created: one year ago by: Guest

Go to the latest result

arrow

function

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Firefox 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Arrow vs Regular Functions (with ternary operation) (version: 1)

Does more than a simple addition.

Comparing performance of: arrow vs function

Created: one year ago by: Guest

Go to the latest result

arrow

function

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Firefox 6 runs

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: `arrow vs function`