Benchmark: function vs class method vs new function method

Script Preparation code:

var arr = [];
var classInstances = [];
var functionInstances = [];
var numInstances = 100000;

function addItem(item) {
  arr.push(item);
};

class TestClass {
  constructor() {
  }
  addItem(item){
    this.item = item;
    arr.push(this.item)
  }
}

function TestFunction() {
}

TestFunction.prototype.addItem = function(item) {
	  this.item = item;
      arr.push(item)
}

for( var i = 0; i < numInstances; i++ ) {
  classInstances[i] = new TestClass();
  functionInstances[i] = new TestFunction();
}

​x
 
var arr = [];var classInstances = [];var functionInstances = [];var numInstances = 100000;​function addItem(item) {  arr.push(item);};​class TestClass {  constructor() {  }  addItem(item){    this.item = item;    arr.push(this.item)  }}​function TestFunction() {}​TestFunction.prototype.addItem = function(item) {      this.item = item;      arr.push(item)}​for( var i = 0; i < numInstances; i++ ) {  classInstances[i] = new TestClass();  functionInstances[i] = new TestFunction();}

Tests:

pure function
for (var i = 0; i < numInstances; i++) { addItem(i); }
for (var i = 0; i < numInstances; i++) {
addItem(i);
}
class method
for (var i = 0; i < numInstances; i++) { classInstances[i].addItem(i); }
for (var i = 0; i < numInstances; i++) {
classInstances[i].addItem(i);
}
function method
for (var i = 0; i < numInstances; i++) { functionInstances[i].addItem(i); }
for (var i = 0; i < numInstances; i++) {
functionInstances[i].addItem(i);
}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
pure function
class method
function method

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:133.0) Gecko/20100101 Firefox/133.0

Browser/OS: Firefox 133 on Windows

View result in a separate tab

Test name	Executions per second
pure function	382.6 Ops/sec
class method	168.2 Ops/sec
function method	11.4 Ops/sec

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

Let's break down the provided benchmark and explain what's being tested, compared, and analyzed.

Benchmark Overview

The benchmark measures the performance of three different approaches: pure function calls, class methods, and new function creations (i.e., function expressions). The goal is to determine which approach is the fastest in terms of execution frequency per second.

Script Preparation Code

The script preparation code creates an array arr and initializes several variables:

classInstances: an array to store instances of the TestClass class
functionInstances: an array to store instances of the TestFunction function
numInstances: a constant set to 100,000

The script also defines two functions: addItem, which adds an item to the arr array, and TestClass constructor, which initializes a new instance of the class.

Individual Test Cases

There are three individual test cases:

Pure Function: This test case calls the addItem function directly without creating an instance.

for (var i = 0; i < numInstances; i++) {
  addItem(i);
}

Class Method: This test case creates an instance of the TestClass class and calls its addItem method.

for (var i = 0; i < numInstances; i++) {
  classInstances[i].addItem(i);
}

Function Method: This test case creates an instance of the TestFunction function and calls its addItem method.

for (var i = 0; i < numInstances; i++) {
  functionInstances[i].addItem(i);
}

Library Used: TestClass

The TestClass is a simple class with a constructor that does nothing. The addItem method pushes an item to the arr array and updates the instance's property.

Alternative Approaches

In JavaScript, there are alternative approaches to creating functions:

Function Expressions: Instead of using the function keyword, you can create a function expression with the var, let, or const keywords.
Arrow Functions: Introduced in ECMAScript 2015 (ES6), arrow functions provide a concise way to define small functions.

However, for this benchmark, only new function creations and class methods are being compared.

Other Considerations

Cache Hints: Some browsers provide cache hints or store frequently accessed data in memory. This can affect the performance of your benchmarks.
Garbage Collection: JavaScript's garbage collector periodically cleans up unused objects. This can impact performance, especially when working with large arrays or frequent object creation.

Benchmarks Results

The provided benchmark results show the execution frequency per second for each test case:

Test Name	Executions Per Second
pure function	82.15605163574219
class method	80.90753173828125
function method	79.12915802001953

The results suggest that the pure function approach is the fastest, followed closely by the class method and then the new function creation approach.

Keep in mind that these results may vary depending on your specific use case, hardware, and JavaScript environment.

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and analyzed.

**Benchmark Overview**

**Script Preparation Code**

The script preparation code creates an array `arr` and initializes several variables:

* `classInstances`: an array to store instances of the `TestClass` class
* `functionInstances`: an array to store instances of the `TestFunction` function
* `numInstances`: a constant set to 100,000

The script also defines two functions: `addItem`, which adds an item to the `arr` array, and `TestClass` constructor, which initializes a new instance of the class.

**Individual Test Cases**

There are three individual test cases:

1. **Pure Function**: This test case calls the `addItem` function directly without creating an instance.
```javascript
for (var i = 0; i < numInstances; i++) {
  addItem(i);
}
```
2. **Class Method**: This test case creates an instance of the `TestClass` class and calls its `addItem` method.
```javascript
for (var i = 0; i < numInstances; i++) {
  classInstances[i].addItem(i);
}
```
3. **Function Method**: This test case creates an instance of the `TestFunction` function and calls its `addItem` method.
```javascript
for (var i = 0; i < numInstances; i++) {
  functionInstances[i].addItem(i);
}
```
**Library Used: TestClass**

The `TestClass` is a simple class with a constructor that does nothing. The `addItem` method pushes an item to the `arr` array and updates the instance's property.

**Alternative Approaches**

In JavaScript, there are alternative approaches to creating functions:

1. **Function Expressions**: Instead of using the `function` keyword, you can create a function expression with the `var`, `let`, or `const` keywords.
2. **Arrow Functions**: Introduced in ECMAScript 2015 (ES6), arrow functions provide a concise way to define small functions.

However, for this benchmark, only new function creations and class methods are being compared.

**Other Considerations**

* **Cache Hints**: Some browsers provide cache hints or store frequently accessed data in memory. This can affect the performance of your benchmarks.
* **Garbage Collection**: JavaScript's garbage collector periodically cleans up unused objects. This can impact performance, especially when working with large arrays or frequent object creation.

**Benchmarks Results**

The provided benchmark results show the execution frequency per second for each test case:

| Test Name | Executions Per Second |
| --- | --- |
| pure function | 82.15605163574219 |
| class method | 80.90753173828125 |
| function method | 79.12915802001953 |

The results suggest that the pure function approach is the fastest, followed closely by the class method and then the new function creation approach.

Keep in mind that these results may vary depending on your specific use case, hardware, and JavaScript environment.

Related benchmarks:

function vs class method vs new function method (version: 0)

Comparing performance of: pure function vs class method vs function method

Created: 3 years ago by: Guest

Jump to the latest result

pure function

class method

function method

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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