Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
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
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>
Run tests (3)
Previous results
Fork
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
Embed
Embed Benchmark Result
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):
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:
Array.prototype.push vs Array.prototype.push.apply
function vs class 2
function vs class method vs new function method
ES6 Class vs Prototype vs Object Literal v2
Comments
Confirm delete:
Do you really want to delete benchmark?