Benchmark: function vs class vs arrow function

Script Preparation code:

var arr = [];

Tests:

function declaration
function functionDeclaration(item) { arr.push(item); } for (let i = 1; i < 10000; i++) { functionDeclaration(i); }
function expression
var functionExpression = function(item) { arr.push(item); }; for (let i = 1; i < 10000; i++) { functionExpression(i); }
class
class Test { constructor(item) { this.item = item; } addItem(){ arr.push(this.item) } } for (let i = 1; i < 10000; i++) { new Test(i).addItem(); }
arrow function
var functionExpression = (item) => { arr.push(item); }; for (let i = 1; i < 10000; i++) { functionExpression(i); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
function declaration
function expression
class
arrow function

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Safari/605.1.15

Browser/OS: Safari 15 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
function declaration	2182.1 Ops/sec
function expression	1648.1 Ops/sec
class	263.6 Ops/sec
arrow function	240.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explore what's being tested.

**Benchmark Overview**

The benchmark compares the performance of three different JavaScript functions:

1. **Function Declaration**: A traditional function definition with `function` keyword, followed by an anonymous function that pushes items to an array.
2. **Function Expression**: A function defined using the `function` keyword without parentheses, similar to a function declaration, but can be assigned to a variable.
3. **Class**: An instance of a class that has a method (`addItem`) which pushes items to an array.
4. **Arrow Function**: A concise function definition using the arrow syntax (`=>`), with the same logic as the function expression.

**Options Comparison**

The benchmark compares these four options because they are all used to execute the same functionality (pushing items to an array). The goal is to determine which approach provides the best performance.

**Pros and Cons of Each Approach**

1. **Function Declaration**: This is a traditional way of defining functions in JavaScript. It's straightforward, but may lead to overhead due to the need for function declarations.
	* Pros: Easy to read and write
	* Cons: May incur overhead due to declaration syntax
2. **Function Expression**: Similar to function declarations, but allows for assignment to variables, making it a convenient option.
	* Pros: Convenient for assigning to variables, less verbose than functions with parameters
	* Cons: Less readable than traditional function declarations
3. **Class**: Using classes and methods provides a more object-oriented approach. It can be useful in larger applications, but may incur overhead due to the need for class definitions.
	* Pros: Encourages encapsulation, modularity, and reusability
	* Cons: May lead to performance overhead due to class definitions
4. **Arrow Function**: This syntax is concise and often preferred for small functions or when readability is prioritized over traditional function syntax.
	* Pros: Concise, readable
	* Cons: Limited support in older browsers, may not be suitable for complex logic

**Library and Special JS Features**

None of the benchmark options rely on external libraries. However, arrow functions were introduced in ECMAScript 2015 (ES6), which might affect compatibility with older browsers.

**Other Considerations**

The benchmark measures performance, which is influenced by factors such as:

* Browser version and platform
* Device capabilities (e.g., CPU speed)
* JavaScript engine optimizations

Keep in mind that this benchmark only compares the four options mentioned. Other JavaScript functions or approaches may have different performance characteristics.

**Alternatives**

Some alternatives to these options include:

* Using generators instead of loops for iterative computations
* Leveraging built-in array methods like `push`, `map`, and `forEach` for data processing
* Considering alternative syntaxes, such as async/await for asynchronous programming

These alternatives might offer better performance or readability benefits in specific scenarios.

Related benchmarks:

function vs class vs arrow function (version: 1)

Comparing performance of: function declaration vs function expression vs class vs arrow function

Created: 2 years ago by: Registered User

Jump to the latest result

function declaration

function expression

class

arrow function

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):