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

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 5 runs

ES6 Class

18K/s

Function Prototype

15K/s

Object Literal

7K/s

Fastest: ES6 Class (2.7x faster)

View exact numbers

✓ ES6 Class: 18,437 ops/sec
• Function Prototype: 14,680 ops/sec
• Object Literal: 6,765 ops/sec

Firefox 5 runs

ES6 Class

10K/s

Function Prototype

9K/s

Object Literal

4K/s

Fastest: ES6 Class (2.5x faster)

View exact numbers

✓ ES6 Class: 10,336 ops/sec
• Function Prototype: 8,675 ops/sec
• Object Literal: 4,068 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: 8 days ago)

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

Browser/OS: Chrome 152 on Windows

View result in a separate tab

Function Prototype

7K/s

ES6 Class

7K/s

Object Literal

5K/s

View exact numbers

Test name	Executions per second
✓ Function Prototype	6,608 Ops/sec
ES6 Class	6,534 Ops/sec
Object Literal	4,626 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.

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

Go to the latest result

ES6 Class

Function Prototype

Object Literal

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 5 runs

Firefox 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):

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

Go to the latest result

ES6 Class

Function Prototype

Object Literal

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 5 runs

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