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

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: 4 days ago)

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

Browser/OS: Firefox 131 on Linux

View result in a separate tab

Test name	Executions per second
ES6 Class	13492563.0 Ops/sec
Function Prototype	12915786.0 Ops/sec
Object Literal	715033.3 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months 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.

Related benchmarks:

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

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: one year ago by: Registered User

Jump to the latest result

ES6 Class

Function Prototype

Object Literal

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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