Benchmark: ES6 Class vs Prototype vs Object Literal v2

Script Preparation code:

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    add(point) {
        return new Point(this.x + point.x, this.y + point.y);
    }

    sub(point) {
        return new Point(this.x - point.x, this.y - point.y);
    }
}
var Point1 = Point;

function Point2(x, y) {
    this.x = x;
    this.y = y;
}
Point2.prototype.add = function(point) {
    return new Point2(this.x + point.x, this.y + point.y);
}

Point2.prototype.sub = function(point) {
    return new Point2(this.x - point.x, this.y - point.y);
}

function Point3(x, y) {
    return {
        x,
        y,
        add: (point) => Point3(this.x + point.x, this.y + point.y),
        sub: (point) => Point3(this.x - point.x, this.y - point.y)
    }
}

Tests:

ES6 Class
var p1 = new Point1(10, 10); var p2 = new Point1(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Function Prototype
var p1 = new Point2(10, 10); var p2 = new Point2(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Object Literal
var p1 = Point3(10, 10); var p2 = Point3(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);

Historical Performance Data aggregated from 60 community runs

Desktop Results:

Chrome 38 runs

ES6 Class

12.7M/s

Function Prototype

6.3M/s

Object Literal

1.1M/s

Fastest: ES6 Class (11.6x faster)

View exact numbers

✓ ES6 Class: 12,711,162 ops/sec
• Function Prototype: 6,287,924 ops/sec
• Object Literal: 1,092,525 ops/sec

Firefox 14 runs

ES6 Class

20.3M/s

Function Prototype

19.0M/s

Object Literal

781K/s

Fastest: ES6 Class (25.9x faster)

View exact numbers

✓ ES6 Class: 20,257,692 ops/sec
• Function Prototype: 19,020,324 ops/sec
• Object Literal: 780,648 ops/sec

Mobile Results:

Chrome 8 runs

ES6 Class

3.9M/s

Function Prototype

3.2M/s

Object Literal

585K/s

Fastest: ES6 Class (6.6x faster)

View exact numbers

✓ ES6 Class: 3,855,871 ops/sec
• Function Prototype: 3,156,198 ops/sec
• Object Literal: 584,857 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
ES6 Class
Function Prototype
Object Literal

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:157.0) Gecko/20100101 Firefox/157.0

Browser/OS: Firefox 157 on Mac OS X 10.15

View result in a separate tab

ES6 Class

54.8M/s

Function Prototype

48.7M/s

Object Literal

2.0M/s

View exact numbers

Test name	Executions per second
✓ ES6 Class	54,756,900 Ops/sec
Function Prototype	48,714,908 Ops/sec
Object Literal	2,027,376 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided JSON benchmark.

**Benchmark Definition**

The test compares three different techniques for constructing class objects:

1. **ES6 Class**: Using the `class` keyword to define a class, which is the recommended way to create classes in modern JavaScript.
2. **Function Prototype**: Using a function as a constructor and defining methods on its prototype chain.
3. **Object Literal**: Using an object literal with an initializer block (i.e., `{}`) and defining methods directly on the object.

**Options Compared**

The test compares the performance and memory usage of each approach:

* Performance: How fast each implementation executes the `add` and `sub` methods.
* Memory Usage: The amount of memory allocated for each object creation, including its properties and metadata.

**Pros and Cons of Each Approach**

1. **ES6 Class**:
	* Pros:
		+ More concise and readable syntax
		+ Automatic initialization and property binding
		+ Better support for inheritance and prototype chaining
	* Cons:
		+ May have slower startup times due to class loading
2. **Function Prototype**:
	* Pros:
		+ Fastest execution speed, as it avoids the overhead of creating a new class object
		+ Can be useful in specific use cases where performance is critical
	* Cons:
		+ Less readable and maintainable syntax
		+ May require more manual memory management (e.g., using `this` instead of property names)
3. **Object Literal**:
	* Pros:
		+ Fastest execution speed, similar to Function Prototype
		+ Can be useful in cases where performance is critical and readability is not a concern
	* Cons:
		+ Less readable and maintainable syntax
		+ May lead to naming conflicts if not used carefully

**Library**

The `Point` class (or its variations) uses no external libraries. It's a simple example class for testing the performance of different construction techniques.

**Special JS Feature/Syntax**

None mentioned in this benchmark definition.

**Other Alternatives**

If you wanted to test other construction techniques, you could consider:

* **Constructor functions**: Using traditional constructor functions (`function Point() { ... }`) instead of classes or function prototypes.
* **Class expressions**: Using class expressions (`var Point = class { ... }`), which are similar to ES6 classes but with a different syntax.

Keep in mind that the test results might vary depending on the specific use case and requirements. This benchmark is designed to provide a general comparison of three common approaches to constructing class objects in JavaScript.

ES6 Class vs Prototype vs Object Literal v2 (version: 0) Benchmark.js

Test the speed and memory usage using 3 different techniques for constructing class objects.

Comparing performance of: `ES6 Class vs Function Prototype vs Object Literal`

Created: 3 years ago by: Registered User

Go to the latest result

ES6 Class

Function Prototype

Object Literal

Historical Performance Data aggregated from 60 community runs

Desktop Results:

Chrome 38 runs

Firefox 14 runs

Mobile Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

ES6 Class vs Prototype vs Object Literal v2 (version: 0) Benchmark.js

Test the speed and memory usage using 3 different techniques for constructing class objects.

Comparing performance of: ES6 Class vs Function Prototype vs Object Literal

Created: 3 years ago by: Registered User

Go to the latest result

ES6 Class

Function Prototype

Object Literal

Historical Performance Data aggregated from 60 community runs

Desktop Results:

Chrome 38 runs

Firefox 14 runs

Mobile Results:

Chrome 8 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: `ES6 Class vs Function Prototype vs Object Literal`