Benchmark: function vs class vs proto

Script Preparation code:

var arr = [];

Tests:

function declaration
arr = [] function functionDeclaration(item) { arr.push(item); } for (var i = 1; i < 10000; i++) { functionDeclaration(i); }
function expression
arr = [] var functionExpression = function(item) { arr.push(item); }; for (var i = 1; i < 10000; i++) { functionExpression(i); }
class
arr = [] class Test { constructor(a) { this.a = a; } addItem(item){ this.a.push(item) } } const t = new Test(arr); for (var i = 1; i < 10000; i++) { t.addItem(i); }
proto
arr = [] function ProtoTest(a) { this.arr = a } ProtoTest.prototype.addItem = function(item) { this.arr.push(item) } var t = new ProtoTest(arr); for (var i = 1; i < 10000; i++) { t.addItem(i); }
Typescript Compiled
arr = [] var TsTest = (function () { function TsTest(a) { this.arr = a; } TsTest.prototype.addItem = function (i) { this.arr.push(i); }; return TsTest; }()); var t = new TsTest(arr); for (var i = 1; i < 10000; i++) { t.addItem(i); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
function declaration
function expression
class
proto
Typescript Compiled

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
function declaration	18372.3 Ops/sec
function expression	28711.1 Ops/sec
class	5953.3 Ops/sec
proto	5662.9 Ops/sec
Typescript Compiled	5979.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

The provided JSON represents a benchmark that compares the performance of different approaches to create and execute functions in JavaScript:

1. Function Declaration
2. Function Expression
3. Class-based approach (using ES6 classes)
4. Prototype-based approach (using inheritance)

**Options Comparison**

*   **Function Declaration**: This approach creates a function using the `function` keyword, like `function functionDeclaration(item) { arr.push(item); }`.
    *   Pros: Simple and widely supported.
    *   Cons: Can lead to namespace pollution due to variable shadowing.
*   **Function Expression**: This approach creates a function using the `function` keyword inside an expression, like `var functionExpression = function (item) { arr.push(item); };`.
    *   Pros: Encapsulates the function scope and avoids variable shadowing.
    *   Cons: May be less readable due to its concise syntax.
*   **Class-based approach**: This approach uses ES6 classes to define a class that extends or implements an interface, like `class Test { constructor(a) { this.a = a; } addItem(item){this.a.push(item)} }`.
    *   Pros: Encapsulates data and behavior into a single unit.
    *   Cons: Requires support for ES6 classes, which might not be available in all browsers or environments.
*   **Prototype-based approach**: This approach uses inheritance to extend the prototype chain of an object, like `ProtoTest.prototype.addItem = function(item) { this.arr.push(item); }`.
    *   Pros: Flexible and efficient way to create hierarchical relationships between objects.
    *   Cons: Can lead to tight coupling between objects if not designed carefully.

**Library and Purpose**

*   In the provided benchmark, no specific library is used besides JavaScript's built-in functionality. However, in general, libraries like Lodash or Underscore.js can be useful for creating reusable functions and improving performance.
    *   Examples: Lodash's `curry` function to improve function composition, Underscore.js's `map` function to perform array operations.

**Special JS Features or Syntax**

*   The provided benchmark does not explicitly use any special JavaScript features like `let`, `const`, `async/await`, or arrow functions.
    *   However, if the benchmark were to compare these approaches with other modern JavaScript features, it would be essential to consider their performance implications.

**Alternatives**

Other alternatives for creating and executing functions in JavaScript include:

1.  **Immediately Invoked Function Expressions (IIFE)**: `var functionExpression = (function () { ... }());`
2.  **Closures**: Creating a closure by encapsulating a variable within an anonymous function.
3.  **Generator Functions**: Using generator functions to create iterators and improve performance in certain scenarios.

When choosing the best approach for creating and executing functions, consider factors such as readability, maintainability, flexibility, and performance. Each option has its strengths and weaknesses, and selecting the right one depends on the specific requirements of your project or benchmarking scenario.

Related benchmarks:

function vs class vs proto (version: 0)

Comparing performance of: function declaration vs function expression vs class vs proto vs Typescript Compiled

Created: 2 years ago by: Guest

Jump to the latest result

function declaration

function expression

class

proto

Typescript Compiled

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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