Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Functions vs arrow functions
(version: 0)
Benchmark.js
Comparing performance of:
Functions vs Arrow functions
Created:
6 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="test"></div>
Tests:
Functions
(function(){ (function(){ (function(){ (function(){ (function(){ (function(){ var test = document.getElementById('test'); })(); })(); })(); })(); })(); })();
Arrow functions
(() => { (() => { (() => { (() => { (() => { (() => { var test = document.getElementById('test'); })(); })(); })(); })(); })(); })();
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Functions
Arrow functions
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/137.0.0.0 Safari/537.36
Browser/OS:
Chrome 137 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=608656" width="100%" height="500px"></iframe>
Arrow functions
18.3M/s
Functions
17.7M/s
View exact numbers
Test name
Executions per second
✓
Arrow functions
18,347,654 Ops/sec
Functions
17,651,498 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
The provided JSON represents a JavaScript microbenchmark that tests the performance of functions versus arrow functions. **What is tested:** The benchmark compares two types of function expressions: 1. **Regular functions**: The traditional way of defining functions in JavaScript using the `function` keyword, followed by an anonymous inner function. 2. **Arrow functions**: A concise syntax for defining small, single-purpose functions introduced in ECMAScript 2015. **Options compared:** The benchmark only compares these two options and does not test other aspects of JavaScript performance, such as: * Loops (e.g., `for`, `while`) * Object iteration * DOM manipulation * Closure management **Pros and Cons of each approach:** 1. **Regular functions** * Pros: + More readable and maintainable code (in some cases) + Easier to debug and analyze * Cons: + Can be slower due to the overhead of function declarations 2. **Arrow functions** * Pros: + Concise syntax, making the code more compact and easier to read + Faster execution since there is no overhead of function declarations * Cons: + Less readable and maintainable code (in some cases) + May not be compatible with older browsers or environments **Library usage:** None. **Special JS feature/syntax:** Arrow functions are a new syntax introduced in ECMAScript 2015. They provide a concise way to define small, single-purpose functions. **Benchmark preparation code and test cases:** The benchmark uses two identical test cases: * `Functions`: A traditional function expression with nested anonymous functions. * `Arrow functions`: An arrow function equivalent of the previous test case. The `Script Preparation Code` is empty, which means that no additional setup or initialization code is required before running the benchmark. The `Html Preparation Code` includes a simple `<div>` element to serve as a placeholder for the benchmark results. **Other alternatives:** If you wanted to add more options to the benchmark, you could consider testing: * Loops (e.g., `for`, `while`) * Object iteration methods (e.g., `forEach`, `map`) * DOM manipulation techniques (e.g., using `addEventListener` instead of `onclick` attributes) * Closure management strategies (e.g., using weak references or modules) Keep in mind that adding more options to the benchmark can make it more complex and harder to maintain.
Related benchmarks
Noop vs new arrow function call
Noop vs new arrow function calls
Comments
Confirm delete:
Do you really want to delete benchmark?