Benchmark: function vs class method vs new function method v2

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
arr.length = 0; for (var i = 0; i < numInstances; i++) { addItem(i); }
class method
arr.length = 0; for (var i = 0; i < numInstances; i++) { classInstances[i].addItem(i); }
function method
arr.length = 0; 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: 6 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:128.0) Gecko/20100101 Goanna/6.8 Firefox/128.0 PaleMoon/33.9.1

Browser/OS: Pale Moon (Firefox Variant) 33 on Windows

View result in a separate tab

Test name	Executions per second
pure function	561.6 Ops/sec
class method	196.0 Ops/sec
function method	201.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Overview**

The benchmark measures the performance difference between three approaches:

1. **Pure Function**: A simple function that takes an argument and adds it to an array.
2. **Class Method**: A method within a class instance that also adds an item to an array.
3. **Function Method (with prototype)**: A method attached to a constructor function's prototype, which can be called on instances of the function.

**Options Compared**

The benchmark compares the performance of these three approaches in terms of:

* Number of executions per second
* Browser and device details

**Pros and Cons**

1. **Pure Function**:
	* Pros: Lightweight, easy to understand, and maintain.
	* Cons: May not be suitable for complex logic or data processing.
2. **Class Method**:
	* Pros: Can encapsulate data and behavior, easier to manage state.
	* Cons: More verbose than pure functions, may incur overhead due to instance creation.
3. **Function Method (with prototype)**:
	* Pros: Combines the benefits of classes and functions, reducing overhead.
	* Cons: May lead to confusing code organization if not used carefully.

**Library and Special JS Features**

In this benchmark, no external libraries are used. However, note that if you were to extend or modify the test cases, you might need to consider using libraries like `Lodash` for utility functions or `ES6 Promises` for handling asynchronous operations.

No special JavaScript features are explicitly mentioned in the benchmark definition or test cases.

**Alternative Approaches**

If you're looking for alternative approaches to this benchmark, consider:

1. **Closures**: Using a closure to wrap the array and method can provide similar performance characteristics to functions with prototype methods.
2. **Higher-Order Functions**: Applying higher-order functions like `map` or `forEach` to manipulate arrays could be compared to pure functions and class methods.
3. **Generators**: Using generators for iterative processing might offer performance advantages over traditional loops.

When evaluating these alternatives, keep in mind the specific use case and requirements of your project.

I hope this explanation helps you understand the benchmark and its underlying mechanics!

Related benchmarks:

function vs class method vs new function method v2 (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):