Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
function vs class 8
(version: 0)
Comparing performance of:
function declaration vs function expression vs class
Created:
3 years ago
by:
Guest
Jump to the latest result
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() { } addItem(item){ arr.push(item) } } var test = new Test(); for (let i = 1; i < 10000; i++) { test.addItem(); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
function declaration
function expression
class
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.1:latest
, generated one year ago):
Let's dive into the benchmark test cases. **Overview** This benchmark tests the performance of three different ways to create and call functions in JavaScript: Function Declaration, Function Expression, and Class-based approach. **Test Cases** 1. **Function Declaration**: In this test case, a function is declared using the `function` keyword with a name, e.g., `functionDeclaration(item) { ... }`. The function is then called 10,000 times in a loop. 2. **Function Expression**: Similar to the previous test case, but instead of declaring a named function, an anonymous function expression is created: `var functionExpression = function(item) { ... };` The function expression is then assigned to a variable and called 10,000 times in a loop. 3. **Class-based approach**: In this test case, a class `Test` is defined with a method `addItem()`. An instance of the class is created, and the `addItem()` method is called 10,000 times in a loop. **Library Used** None. This benchmark only uses built-in JavaScript features. **Special JS Feature or Syntax** * **Function Declaration**: The `function` keyword is used to declare a function. * **Function Expression**: An anonymous function expression is created using the `function` keyword without a name. * **Class-based approach**: The `class` syntax and instance creation are used, which is part of JavaScript's ES6+ features. **Results** The benchmark results show that the Class-based approach has the highest executions per second (615.83), followed by Function Expression (566.33), and then Function Declaration (526.86). **Pros and Cons** * **Function Declaration**: Pros: clear code structure, easy to understand. Cons: may lead to namespace pollution if not used carefully. * **Function Expression**: Pros: concise code, no namespace pollution. Cons: harder to read and debug. * **Class-based approach**: Pros: encapsulates data and behavior, easier to maintain large codebases. Cons: overhead of instance creation, possible performance issues. **Alternatives** Other alternatives for function creation in JavaScript include: * **Arrow Functions**: A concise syntax for creating small functions using the `=>` operator. * **Anonymous Functions**: Similar to Function Expressions, but without a name. * **Generators**: Functions that can be paused and resumed during execution, useful for handling asynchronous operations. Keep in mind that these alternatives may have different performance characteristics depending on the specific use case.
Related benchmarks:
Array constructor vs literal performance, 12345
arr.slice(-1)[0] vs arr[arr.length - 1]
arr.at(-1) vs arr[arr.length - 1]
Array .push() vs .unshift() |
Array add vs .unshift()
Comments
Confirm delete:
Do you really want to delete benchmark?