Benchmark: ES6 Class vs Prototype vs Object Literal access 2

Script Preparation code:

class PointC {
	constructor(x, y){
		this.x = x;
		this.y = y;
    }

	add(value){
		return this.x + this.y + value;
    }
}

//---------------------------------------


function PointP(x, y){
	this.x = x;
	this.y = y;
}

PointP.prototype.add = function(value){
    return this.x + this.y + value;
}

//---------------------------------------

function PointO(x, y){
	return {
      	x, 
      	y, 
      	add:  value => this.x + this.y + value
    }  
}

//---------------------------------------

var PointS = {
	x:  10,
   	y:  10
}

var Add = (point, value) => point.x + point.y + value;

var p1C = new PointC(10, 10);
var p1P = new PointP(10, 10);
var p1O = new PointO(10, 10);

Tests:

ES6 Class
var sum = p1C.add(10000);
Function Prototype
var sum = p1P.add(10000);
Object Literal
var sum = p1O.add(10000);
Object 2
var sum = Add(PointS, 10000);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ES6 Class
Function Prototype
Object Literal
Object 2

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

MeasureThat.net is testing the performance and memory usage of three different approaches to accessing class objects in JavaScript:

1. **ES6 Class**: This approach uses the `class` keyword to define a class, and then creates an instance of that class using the `new` keyword.
2. **Function Prototype**: This approach defines a function as a method on the prototype of another object, rather than as a separate function declaration.
3. **Object Literal**: This approach defines an object with a `add` method as a property of that object.

**Options Compared**

The benchmark is comparing the performance and memory usage of these three approaches for a simple addition operation. The test cases are designed to exercise each approach in different ways, such as:

* Creating an instance of each class and calling its `add` method
* Accessing the `add` method directly on the class object
* Calling a separate function with the same signature

**Pros and Cons**

Here are some pros and cons of each approach:

* **ES6 Class**:
	+ Pros: Encapsulates data and behavior, easy to read and maintain.
	+ Cons: Can be slower due to the overhead of creating an instance and accessing its methods.
* **Function Prototype**:
	+ Pros: Fast and efficient, can be used as a method on any object.
	+ Cons: May not provide the same level of encapsulation as classes, can be harder to read and maintain.
* **Object Literal**:
	+ Pros: Lightweight and flexible, easy to define and access methods directly.
	+ Cons: May not provide the same level of encapsulation or control over data access as classes or function prototypes.

**Library Used**

None are explicitly mentioned in this benchmark. However, it's worth noting that some libraries may use these approaches internally, such as React or Angular for class-based components, or functions with prototype methods.

**Special JavaScript Features/Syntax**

The benchmark uses ES6 features such as:

* Classes (`class PointC { ... }`)
* Object literals (`var PointO = { ... }`)
* Arrow functions (`(point, value) => point.x + point.y + value`)

However, these features are not specific to the comparison being made, and could be used in other contexts.

**Other Alternatives**

Some alternative approaches to accessing class objects or defining methods on objects include:

* Using a constructor function with prototype methods
* Defining methods as properties of an object using the `Object.defineProperty` method
* Using a library like Lodash or Underscore.js, which provide functions for working with objects and arrays.

However, these alternatives are not explicitly mentioned in this benchmark, and may not be relevant to the specific use case being tested.

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Safari/605.1.15

Browser/OS: Safari 15 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
ES6 Class	9497850.0 Ops/sec
Function Prototype	9330962.0 Ops/sec
Object Literal	7778546.0 Ops/sec
Object 2	5129016.5 Ops/sec

Related benchmarks:

ES6 Class vs Prototype vs Object Literal access 2 (version: 1)

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

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

Created: one year ago by: Registered User

Jump to the latest result

ES6 Class

Function Prototype

Object Literal

Object 2

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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