Benchmark: Anon functions vs named functions

Tests:

named function passed as reference
function a(){ this.x++; } for(let ii = 0; ii < 100; ii++){ let b = {a, x: 0}; for(let i = 0; i < 100; i++) b.a(); }
multiple named functions instances
for(let ii = 0; ii < 100; ii++){ let b = {a(){ this.x ++}, x:0} for(let i = 0; i < 100; i++) b.a(); }
named arrow function refrence
const a = (b) => b.x++; for(let ii = 0; ii < 100; ii++){ let b = {a, x:0}; for(let i = 0; i < 100; i++) b.a(b); }
multiple anonymous functions instances
for(let ii = 0; ii < 100; ii++){ let b = {a: B => B.x++, x:0}; for(let i = 0; i < 100; i++) b.a(b); }
Class named function on prototype
class B{ x = 0; a(){ this.x++ } } for(let ii = 0; ii < 100; ii++){ let b = new B; for(let i = 0; i < 100; i++) b.a(); }
Class arrow function on prototype
class B{ x = 0; a = b => { b.x++ } } for(let ii = 0; ii < 100; ii++){ let b = new B; for(let i = 0; i < 100; i++) b.a(b); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
named function passed as reference
multiple named functions instances
named arrow function refrence
multiple anonymous functions instances
Class named function on prototype
Class arrow function on prototype

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Browser/OS: Chrome 127 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
named function passed as reference	123258.6 Ops/sec
multiple named functions instances	123092.4 Ops/sec
named arrow function refrence	123826.2 Ops/sec
multiple anonymous functions instances	127166.5 Ops/sec
Class named function on prototype	10016.8 Ops/sec
Class arrow function on prototype	11844.6 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

The test compares different approaches to passing functions as arguments or referencing them, and how it affects performance. Specifically:

1. **Named Functions**: Passing a named function as a reference (`function a(){...}`) vs. creating multiple instances of the same named function.
2. **Arrow Functions**: Using arrow functions (introduced in ECMAScript 2015) with `=>` instead of `function`. The test compares two approaches:
	* Creating an array of references to the same arrow function instance (`a(){...}`).
	* Passing a reference to the result of evaluating an arrow function expression (`B => B.x++`).
3. **Classes**: Defining named and arrow functions on class prototypes.

Here's a brief overview of each approach:

**Named Functions**

* Creating multiple instances of the same named function can lead to:
	+ Increased memory usage due to duplicated code.
	+ Potential performance issues if the function is complex or has side effects.
* Passing a named function as a reference allows for more flexibility, but may still incur overhead due to function call and binding.

**Arrow Functions**

* Arrow functions are generally more lightweight than traditional function expressions.
* Using `=>` can simplify code and reduce verbosity.
* However, creating multiple instances of the same arrow function using references might not be as efficient as using named functions or classes.

**Classes**

* Defining named functions on class prototypes allows for:
	+ Late binding and potential optimizations by the browser.
	+ Easier access to prototype methods through `this`.
* Defining arrow functions on class prototypes has similar benefits, but may have some limitations due to the differences in function binding and caching.

Now, let's consider the pros and cons of each approach:

**Named Functions**

Pros: More flexible, can be used with any function, and might be more efficient due to late binding.
Cons: Increased memory usage, potential performance issues if complex or side-effecting.

**Arrow Functions**

Pros: Lightweight, simplified code, and potentially better performance due to reduced overhead.
Cons: Might not be as flexible as named functions, and creating multiple instances using references can lead to performance issues.

**Classes**

Pros: Late binding and potential optimizations by the browser, easier access to prototype methods through `this`.
Cons: Might require more boilerplate code, and some features might not work as expected.

In general, the benchmark suggests that:

* Named functions passed as references are the fastest approach.
* Arrow function references on arrays have a similar performance profile but are slightly slower than named function references.
* Defining arrow functions or classes on class prototypes has a lower performance profile compared to traditional approaches.

Keep in mind that these results may depend on the specific browser, JavaScript engine, and version used for testing.

Related benchmarks:

Anon functions vs named functions (version: 0)

Comparing performance of: named function passed as reference vs multiple named functions instances vs named arrow function refrence vs multiple anonymous functions instances vs Class named function on prototype vs Class arrow function on prototype

Created: 2 years ago by: Guest

Jump to the latest result

named function passed as reference

multiple named functions instances

named arrow function refrence

multiple anonymous functions instances

Class named function on prototype

Class arrow function on prototype

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):