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

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

class

13K/s

proto

13K/s

Typescript Compiled

12K/s

function declaration

3K/s

function expression

3K/s

Fastest: class (3.8x faster)

View exact numbers

✓ class: 12,593 ops/sec
• proto: 12,513 ops/sec
• Typescript Compiled: 12,029 ops/sec
• function declaration: 3,368 ops/sec
• function expression: 3,350 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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 year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:142.0) Gecko/20100101 Firefox/142.0

Browser/OS: Firefox 142 on Linux

View result in a separate tab

class

9K/s

Typescript Compiled

9K/s

proto

9K/s

function expression

8K/s

function declaration

4K/s

View exact numbers

Test name	Executions per second
✓ class	8,964 Ops/sec
Typescript Compiled	8,868 Ops/sec
proto	8,840 Ops/sec
function expression	8,320 Ops/sec
function declaration	4,469 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.

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.

function vs class vs proto (version: 0)

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

Created: 3 years ago by: Guest

Go to the latest result

function declaration

function expression

class

proto

Typescript Compiled

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

function vs class vs proto (version: 0)

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

Created: 3 years ago by: Guest

Go to the latest result

function declaration

function expression

class

proto

Typescript Compiled

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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