Benchmark: Instantiation via ES6 Class vs Prototype vs Object Literal

Script Preparation code:

class PointClass {
	constructor(x, y){
		this.x = x;
		this.y = y;
    }

	add(point){
		return new PointClass(this.x + point.x, this.y + point.y);
    }

	sub(point){
		return new PointClass(this.x - point.x, this.y - point.y);
    }
}

function PointProto(x, y){
	this.x = x;
	this.y = y;
}

PointProto.prototype.add = function(point){
    return new PointProto(this.x + point.x, this.y + point.y);
}

PointProto.prototype.sub = function(point){
	return new PointProto(this.x - point.x, this.y - point.y);
}

function PointFactory(x, y){
	return {
      	x, 
      	y, 
      	add: (point)=>PointFactory(this.x + point.x, this.y + point.y),
	 	sub: (point)=>PointFactory(this.x - point.x, this.y - point.y)
    }  
}


window.PointClass = PointClass
window.PointProto = PointProto
window.PointFactory = PointFactory
window.num = 10_000

Tests:

ES6 Class
const points = [] for (let index = 0; index < num; index++) { points.push(new PointClass(10, 10)) }
Function Prototype
const points = [] for (let index = 0; index < num; index++) { points.push(new PointProto(10, 10)) }
Object Literal
const points = [] for (let index = 0; index < num; index++) { points.push(PointFactory(10, 10)) }

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36

Browser/OS: Chrome 145 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
ES6 Class	21543.6 Ops/sec
Function Prototype	14680.2 Ops/sec
Object Literal	6764.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what's being tested, along with the pros and cons of each approach.

**Benchmark Definition**

The benchmark is testing three different techniques for constructing class objects in JavaScript: ES6 Classes, Function Prototypes, and Object Literals. The goal is to compare their performance and memory usage.

**Approaches compared**

1. **ES6 Classes**: This approach uses the new `class` keyword to define a constructor function that creates instances of a class. The class has methods like `add` and `sub`, which return new instances of the same class.
2. **Function Prototypes**: This approach uses functions to create objects with prototype chains. A separate function, `PointProto`, is created with `add` and `sub` methods that return new instances of the same function.
3. **Object Literals**: This approach uses object literal syntax to create a single instance with properties like `x` and `y`. The `add` and `sub` methods are added as functions to this object.

**Pros and Cons**

* **ES6 Classes**: Pros:
	+ Easier to read and write, especially for complex classes.
	+ Encourages encapsulation of state and behavior.
Cons:
	+ May be slower due to the overhead of creating a new class instance.
* **Function Prototypes**: Pros:
	+ Can be faster than ES6 Classes since no overhead is added by creating a new class instance.
	+ Allows for more flexibility in defining class-like behavior using functions.
Cons:
	+ Requires more boilerplate code and may be harder to read.
	+ May lead to tighter coupling between classes.
* **Object Literals**: Pros:
	+ Fastest way to create simple objects with minimal overhead.
	+ Easy to use and understand, especially for small-scale applications.
Cons:
	+ Less readable than ES6 Classes or Function Prototypes.
	+ Limited support for complex class-like behavior.

**Library/Function usage**

The benchmark uses the following libraries/functions:

* `PointClass`, `PointProto`, and `PointFactory` are custom functions created by the user to demonstrate different approaches to constructing class objects. They are not part of the standard JavaScript library.
* No external libraries or frameworks are used in this benchmark.

**Special JS features**

There are no special JavaScript features (e.g., async/await, generators) used in this benchmark beyond what's necessary for demonstrating the three approaches.

**Other alternatives**

If you're looking for alternative ways to construct class objects in JavaScript, consider:

* **Class constructor functions**: Instead of using the `class` keyword, you can use a regular function with the same syntax.
* **Proxy**: You can use Proxy objects to create complex behaviors without defining an entire class.

Keep in mind that these alternatives might not be as readable or maintainable as the approaches demonstrated by the benchmark.

Related benchmarks:

Instantiation via ES6 Class vs Prototype vs Object Literal (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: 2 years ago by: Guest

Jump to the latest result

ES6 Class

Function Prototype

Object Literal

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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