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

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);
Function Prototype
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);
Class extends
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

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

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 days ago):

LLMs can make mistakes. Check important info.

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:

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.

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.

Latest run results:

Run details: (Test run date: 3 days ago)

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

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
ES6 Class	7051509.0 Ops/sec
Function Prototype	5052302.0 Ops/sec
Object Literal	1649421.8 Ops/sec
Class extends	7007356.0 Ops/sec

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: 3 days ago by: Registered User

Jump to the latest result

ES6 Class

Function Prototype

Object Literal

Class extends

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 days ago):