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();
}

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
pure function
class method
function method

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; 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 one year ago):

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**

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:

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: 4 years ago by: Guest

Jump to the latest result

pure function

class method

function method

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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