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

​x
 
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 = PointClasswindow.PointProto = PointProtowindow.PointFactory = PointFactorywindow.num = 10_000

Tests:

ES6 Class

const points = []

for (let index = 0; index < num; index++) {
  points.push(new PointClass(10, 10))
}

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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
ES6 Class
Function Prototype
Object Literal

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 114 on Windows

View result in a separate tab

Test name	Executions per second
ES6 Class	314.2 Ops/sec
Function Prototype	406.2 Ops/sec
Object Literal	379.3 Ops/sec

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

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

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.
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.
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.

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**

**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: one year ago by: Guest

Jump to the latest result