Benchmark: ES6 Class vs Prototype vs Object Literal vs ES6 Class Extends

Script Preparation code:

class ClassPoint {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    add(point) {
        this.x = this.x + point.x
        this.y = this.y + point.y
    }

    sub(point) {
        this.x = this.x - point.x
        this.y = this.y - point.y
    }
}
function FunctionPoint(x, y){
	this.x = x;
	this.y = y;
}

FunctionPoint.prototype.add = function(point){
		this.x = this.x + point.x
        this.y = this.y + point.y
}

FunctionPoint.prototype.sub = function(point){
		this.x = this.x - point.x
        this.y = this.y - point.y
}

function ObjectPoint(x, y){
	return {
      	x, 
      	y, 
      	add:(point) => {
          this.x = this.x + point.x
          this.y = this.y + point.y
    	},
      	sub:(point) => {
          this.x = this.x - point.x
          this.y = this.y - point.y
    	},
    }  
}
class Base {
	constructor(x, y){
		this.x = x;
		this.y = y;
    }
}
class ClassPoint2 extends Base {
  
	add(point){
		this.x = this.x + point.x
        this.y = this.y + point.y
    }

	sub(point){
		this.x = this.x - point.x
        this.y = this.y - point.y
    }
}

​x
 
class ClassPoint {    constructor(x, y) {        this.x = x;        this.y = y;    }​    add(point) {        this.x = this.x + point.x        this.y = this.y + point.y    }​    sub(point) {        this.x = this.x - point.x        this.y = this.y - point.y    }}function FunctionPoint(x, y){    this.x = x;    this.y = y;}​FunctionPoint.prototype.add = function(point){        this.x = this.x + point.x        this.y = this.y + point.y}​FunctionPoint.prototype.sub = function(point){        this.x = this.x - point.x        this.y = this.y - point.y}​function ObjectPoint(x, y){    return {        x,         y,         add:(point) => {          this.x = this.x + point.x          this.y = this.y + point.y        },        sub:(point) => {          this.x = this.x - point.x          this.y = this.y - point.y        },    }  }class Base {    constructor(x, y){        this.x = x;        this.y = y;    }}class ClassPoint2 extends Base {      add(point){        this.x = this.x + point.x        this.y = this.y + point.y    }​    sub(point){        this.x = this.x - point.x        this.y = this.y - point.y    }}

Tests:

ES6 Class


var p1 = new ClassPoint(10, 10);
var p2 = new ClassPoint(10, -10);
var sum = p1.add(p2);
var dif = p1.sub(p2);

 
​​var p1 = new ClassPoint(10, 10);var p2 = new ClassPoint(10, -10);var sum = p1.add(p2);var dif = p1.sub(p2);

Function Prototype
var p1 = new FunctionPoint(10, 10); var p2 = new FunctionPoint(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
var p1 = new FunctionPoint(10, 10);
var p2 = new FunctionPoint(10, -10);
var sum = p1.add(p2);
var dif = p1.sub(p2);
Object Literal
var p1 = ObjectPoint(10, 10); var p2 = ObjectPoint(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
var p1 = ObjectPoint(10, 10);
var p2 = ObjectPoint(10, -10);
var sum = p1.add(p2);
var dif = p1.sub(p2);

Class extends

var p1 = new ClassPoint2(10, 10);
var p2 = new ClassPoint2(10, -10);
var sum = p1.add(p2);
var dif = p1.sub(p2);

 
var p1 = new ClassPoint2(10, 10);var p2 = new ClassPoint2(10, -10);var sum = p1.add(p2);var dif = p1.sub(p2);

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
Class extends

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 months ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 130 on Android

View result in a separate tab

Test name	Executions per second
ES6 Class	80367560.0 Ops/sec
Function Prototype	86437768.0 Ops/sec
Object Literal	9827788.0 Ops/sec
Class extends	55557320.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 5 months ago):

The benchmark defined in the JSON tests various object-oriented programming styles in JavaScript by implementing a simple point class system. Specifically, it compares four different approaches for creating a point-centered object and performing addition and subtraction operations on it:

ES6 Class (ClassPoint)
Function Prototype (FunctionPoint)
Object Literal (ObjectPoint)
Class with Inheritance (ClassPoint2)

Description of Approaches

ES6 Class:
- This approach uses the ES6 class syntax to create a class ClassPoint. Instances of this class can add and subtract from other instances.
- Pros:
  - Clear and intuitive syntax.
  - Built-in inheritance support.
  - Better organization and encapsulation patterns.
- Cons:
  - Slightly slower performance in some environments compared to prototypes, though this may vary significantly based on JavaScript engine optimizations.
Function Prototype:
- In this approach, a constructor function FunctionPoint is defined, and methods are added to its prototype.
- Pros:
  - More traditional approach that closely resembles classical inheritance patterns from other languages.
  - Potential for faster performance in certain engines due to direct prototype linking.
- Cons:
  - More complex and less intuitive syntax compared to ES6 classes.
  - Manual management of method sharing and instance properties.
Object Literal:
- This method returns an object directly instead of using constructors. The properties and methods are defined in an object literal style.
- Pros:
  - Fast and straightforward for creating single-use objects.
  - Clear and concise for objects that do not need inheritance or complex behaviors.
- Cons:
  - Generally less efficient for multiple instances due to the creation of new method instances for each object.
  - Lacks inheritance and polymorphism features which might be necessary for more complex applications.
Class with Inheritance:
- Here, ClassPoint2 extends a Base class, inheriting its properties and methods, while also defining additional methods.
- Pros:
  - Takes advantage of ES6 class inheritance, providing better state management and encapsulation.
  - Useful for building complex hierarchies.
- Cons:
  - Slightly more overhead in memory and performance due to the inclusion of parent class features.

Benchmark Results Analysis

Looking at the execution performance metrics provided:

ES6 Class and Class extends approaches show the highest executions per second (approximately 7M), suggesting efficient method handling and optimizations in the JavaScript engine.
The Function Prototype approach performs slightly slower (about 5M) but still shows reasonable efficiency. It could outperform the Object Literal approach in some cases due to prototype chaining.
The Object Literal approach is significantly slower than the other methods (about 1.65M). This reflects its nature as a more resource-intensive operation when used for multiple instances since methods are not shared.

Alternatives and Considerations

Other alternatives not explicitly tested in this benchmark include:

Using ES5 Object.create(): You can create objects with inheritance using Object.create(), which is an alternative for defining prototype-based inheritance.
Functional Programming Approaches: JavaScript supports functional programming paradigms, which can be used to manipulate data and create methods without traditional inheritance. This can lead to different performance characteristics.
Typed Arrays: If the primary goal is to achieve high-performance operations on numerical data (such as coordinates), JavaScript's typed arrays (like Float32Array) may serve better in scenarios requiring a large number of operations on large datasets.

In conclusion, the benchmark presents different JavaScript object-oriented styles, outlining their pros and cons based on performance metrics. These considerations are crucial for software engineers to determine the best approach based on their application's specific requirements and performance expectations.

LLMs can make mistakes. Check important info.

1. **ES6 Class (`ClassPoint`)**
2. **Function Prototype (`FunctionPoint`)**
3. **Object Literal (`ObjectPoint`)**
4. **Class with Inheritance (`ClassPoint2`)**

### Description of Approaches

1. **ES6 Class**: 
   - This approach uses the ES6 `class` syntax to create a class `ClassPoint`. Instances of this class can add and subtract from other instances.
   - **Pros**: 
     - Clear and intuitive syntax.
     - Built-in inheritance support.
     - Better organization and encapsulation patterns.
   - **Cons**: 
     - Slightly slower performance in some environments compared to prototypes, though this may vary significantly based on JavaScript engine optimizations.
  
2. **Function Prototype**: 
   - In this approach, a constructor function `FunctionPoint` is defined, and methods are added to its prototype.
   - **Pros**: 
     - More traditional approach that closely resembles classical inheritance patterns from other languages.
     - Potential for faster performance in certain engines due to direct prototype linking.
   - **Cons**: 
     - More complex and less intuitive syntax compared to ES6 classes.
     - Manual management of method sharing and instance properties.

3. **Object Literal**: 
   - This method returns an object directly instead of using constructors. The properties and methods are defined in an object literal style.
   - **Pros**: 
     - Fast and straightforward for creating single-use objects.
     - Clear and concise for objects that do not need inheritance or complex behaviors.
   - **Cons**: 
     - Generally less efficient for multiple instances due to the creation of new method instances for each object.
     - Lacks inheritance and polymorphism features which might be necessary for more complex applications.

4. **Class with Inheritance**: 
   - Here, `ClassPoint2` extends a `Base` class, inheriting its properties and methods, while also defining additional methods.
   - **Pros**: 
     - Takes advantage of ES6 class inheritance, providing better state management and encapsulation.
     - Useful for building complex hierarchies.
   - **Cons**: 
     - Slightly more overhead in memory and performance due to the inclusion of parent class features.

### Benchmark Results Analysis
Looking at the execution performance metrics provided:
- **ES6 Class** and **Class extends** approaches show the highest executions per second (approximately 7M), suggesting efficient method handling and optimizations in the JavaScript engine.
- The **Function Prototype** approach performs slightly slower (about 5M) but still shows reasonable efficiency. It could outperform the Object Literal approach in some cases due to prototype chaining.
- The **Object Literal** approach is significantly slower than the other methods (about 1.65M). This reflects its nature as a more resource-intensive operation when used for multiple instances since methods are not shared.

### Alternatives and Considerations
Other alternatives not explicitly tested in this benchmark include:

- **Using ES5 Object.create()**: You can create objects with inheritance using `Object.create()`, which is an alternative for defining prototype-based inheritance.
- **Functional Programming Approaches**: JavaScript supports functional programming paradigms, which can be used to manipulate data and create methods without traditional inheritance. This can lead to different performance characteristics.
- **Typed Arrays**: If the primary goal is to achieve high-performance operations on numerical data (such as coordinates), JavaScript's typed arrays (like `Float32Array`) may serve better in scenarios requiring a large number of operations on large datasets.

Related benchmarks:

ES6 Class vs Prototype vs Object Literal vs ES6 Class Extends (version: 1)

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

Created: 5 months ago by: Registered User

Jump to the latest result