Benchmark: ES6 Class vs Prototype vs Object Literal vs ES6 Class extends vs ES6 Class extends twice

Tests:

ES6 Class

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

	add(point){
		return new Point(this.x + point.x, this.y + point.y);
    }

	sub(point){
		return new Point(this.x - point.x, this.y - point.y);
    }
}

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

​x
 
class Point {    constructor(x, y){        this.x = x;        this.y = y;    }​    add(point){        return new Point(this.x + point.x, this.y + point.y);    }​    sub(point){        return new Point(this.x - point.x, this.y - point.y);    }}​var p1 = new Point(10, 10);var p2 = new Point(10, -10);var sum = p1.add(p2);var dif = p1.sub(p2);

Function Prototype

function Point(x, y){
	this.x = x;
	this.y = y;
}

Point.prototype.add = function(point){
    return new Point(this.x + point.x, this.y + point.y);
}

Point.prototype.sub = function(point){
	return new Point(this.x - point.x, this.y - point.y);
}

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

 
function Point(x, y){    this.x = x;    this.y = y;}​Point.prototype.add = function(point){    return new Point(this.x + point.x, this.y + point.y);}​Point.prototype.sub = function(point){    return new Point(this.x - point.x, this.y - point.y);}​var p1 = new Point(10, 10);var p2 = new Point(10, -10);var sum = p1.add(p2);var dif = p1.sub(p2);​

Object Literal

function Point(x, y){
	return {
      	x, 
      	y, 
      	add: (point)=>Point(this.x + point.x, this.y + point.y),
	 	sub: (point)=>Point(this.x - point.x, this.y - point.y)
    }  
}

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

 
function Point(x, y){    return {        x,         y,         add: (point)=>Point(this.x + point.x, this.y + point.y),        sub: (point)=>Point(this.x - point.x, this.y - point.y)    }  }​var p1 = Point(10, 10);var p2 = Point(10, -10);var sum = p1.add(p2);var dif = p1.sub(p2);

Class extends

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


}

class Point extends Base{

	add(point){
		return new Point(this.x + point.x, this.y + point.y);
    }

	sub(point){
		return new Point(this.x - point.x, this.y - point.y);
    }
}

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

 
class Base {    constructor(x, y){        this.x = x;        this.y = y;    }​​}​class Point extends Base{​    add(point){        return new Point(this.x + point.x, this.y + point.y);    }​    sub(point){        return new Point(this.x - point.x, this.y - point.y);    }}​var p1 = new Point(10, 10);var p2 = new Point(10, -10);var sum = p1.add(p2);var dif = p1.sub(p2);

class extends twce

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


}
class Add extends Base {
	add(point){
		return new Point(this.x + point.x, this.y + point.y);
    }
}
class Point extends Add{
	sub(point){
		return new Point(this.x - point.x, this.y - point.y);
    }
}

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

 
class Base {    constructor(x, y){        this.x = x;        this.y = y;    }​​}class Add extends Base {    add(point){        return new Point(this.x + point.x, this.y + point.y);    }}class Point extends Add{    sub(point){        return new Point(this.x - point.x, this.y - point.y);    }}​var p1 = new Point(10, 10);var p2 = new Point(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
class extends twce

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
ES6 Class	275767.2 Ops/sec
Function Prototype	216945.4 Ops/sec
Object Literal	794893.5 Ops/sec
Class extends	145156.5 Ops/sec
class extends twce	111965.1 Ops/sec

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

The benchmark titled "ES6 Class vs Prototype vs Object Literal vs ES6 Class extends vs ES6 Class extends twice" aims to evaluate the performance and memory usage of five different techniques for constructing class-like objects in JavaScript. The following approaches are compared:

ES6 Class:
- Benchmark Code: Defines a class Point using the ES6 class syntax, including a constructor and methods for addition and subtraction of points.
- Pros: The ES6 class syntax is generally clearer and more concise. It provides an object-oriented structure and supports inheritance.
- Cons: ES6 classes may have slight overhead compared to function prototypes in certain scenarios, particularly in environments that are not optimized for new syntax.
Function Prototype:
- Benchmark Code: Creates a constructor function (Point) and attaches methods to its prototype.
- Pros: This approach is the traditional way to create objects in JavaScript, and it generally offers good performance. It allows shared methods to exist on the prototype, reducing memory overhead.
- Cons: The prototype approach can be less clean and harder to read compared to the ES6 class syntax, especially with more complex hierarchies.
Object Literal:
- Benchmark Code: Returns an object directly from a function, using arrow functions for methods.
- Pros: This creates quick, lightweight objects without needing constructors, making it useful for simple data structures.
- Cons: It lacks the ability to create multiple instances easily; every call to Point creates a new object, which can lead to redundancy for shared methods.
Class Extends (Single Inheritance):
- Benchmark Code: Uses ES6 classes with inheritance, where Point extends a Base class.
- Pros: Inheritance is straightforward and encourages good design patterns, making it easier to manage shared functionality across classes.
- Cons: Performance might be impacted in deeply nested inheritance trees, and some developers may find inheritance leads to complex hierarchies that are hard to manage.
Class Extends (Multiple Inheritance with a Base Class):
- Benchmark Code: Similar to the single inheritance but involves extending another class that also has methods.
- Pros: This approach facilitates the creation of a more modular and scalable design, useful in larger applications.
- Cons: Multiple levels of inheritance can potentially lead to deep class hierarchies that are difficult to navigate and understand, along with possible performance implications.

Benchmark Results Summary

The results show variation in "Executions Per Second" for each approach:

Object Literal: High performance with 794,893.5 executions per second.
ES6 Class: Moderate performance at 275,767.15625, indicating it is more expensive compared to object literals.
Function Prototype: Shows slightly lower performance at 216,945.390625 compared to the ES6 Class.
Class Extends: Lower performance at 145,156.484375.
Class Extends Twice: The lowest, at 111,965.109375.

Considerations and Alternatives

Alternatives: Other object construction techniques in JavaScript include using factory functions, which combine both instance and prototype patterns to create flexible objects, or leveraging ES6 modules for better organization of classes and data structures.
Performance Considerations: When selecting an approach, consider the performance implications based on how many objects need to be created and the expected complexity of the application.
Readability and Maintainability: Choose an approach that matches the team's proficiency and the development needs. ES6 class syntax may be preferred for new applications, while legacy code may still rely on prototypes.
Future Proofing: New syntax (like ES6 classes) might be consistently optimized in modern JavaScript engines, while older prototypes may become less favored.

This benchmark provides insights into not only performance but also use cases for each method, helping engineers choose the appropriate structure for their specific needs.

LLMs can make mistakes. Check important info.

1. **ES6 Class**: 
   - **Benchmark Code**: Defines a class `Point` using the ES6 class syntax, including a constructor and methods for addition and subtraction of points.
   - **Pros**: The ES6 class syntax is generally clearer and more concise. It provides an object-oriented structure and supports inheritance.
   - **Cons**: ES6 classes may have slight overhead compared to function prototypes in certain scenarios, particularly in environments that are not optimized for new syntax.

2. **Function Prototype**:
   - **Benchmark Code**: Creates a constructor function (`Point`) and attaches methods to its prototype.
   - **Pros**: This approach is the traditional way to create objects in JavaScript, and it generally offers good performance. It allows shared methods to exist on the prototype, reducing memory overhead.
   - **Cons**: The prototype approach can be less clean and harder to read compared to the ES6 class syntax, especially with more complex hierarchies.

3. **Object Literal**:
   - **Benchmark Code**: Returns an object directly from a function, using arrow functions for methods.
   - **Pros**: This creates quick, lightweight objects without needing constructors, making it useful for simple data structures.
   - **Cons**: It lacks the ability to create multiple instances easily; every call to `Point` creates a new object, which can lead to redundancy for shared methods.

4. **Class Extends (Single Inheritance)**:
   - **Benchmark Code**: Uses ES6 classes with inheritance, where `Point` extends a `Base` class.
   - **Pros**: Inheritance is straightforward and encourages good design patterns, making it easier to manage shared functionality across classes.
   - **Cons**: Performance might be impacted in deeply nested inheritance trees, and some developers may find inheritance leads to complex hierarchies that are hard to manage.

5. **Class Extends (Multiple Inheritance with a Base Class)**:
   - **Benchmark Code**: Similar to the single inheritance but involves extending another class that also has methods.
   - **Pros**: This approach facilitates the creation of a more modular and scalable design, useful in larger applications.
   - **Cons**: Multiple levels of inheritance can potentially lead to deep class hierarchies that are difficult to navigate and understand, along with possible performance implications.

### Benchmark Results Summary
The results show variation in "Executions Per Second" for each approach:
- **Object Literal**: High performance with 794,893.5 executions per second.
- **ES6 Class**: Moderate performance at 275,767.15625, indicating it is more expensive compared to object literals.
- **Function Prototype**: Shows slightly lower performance at 216,945.390625 compared to the ES6 Class.
- **Class Extends**: Lower performance at 145,156.484375.
- **Class Extends Twice**: The lowest, at 111,965.109375.

### Considerations and Alternatives
1. **Alternatives**: Other object construction techniques in JavaScript include using factory functions, which combine both instance and prototype patterns to create flexible objects, or leveraging ES6 modules for better organization of classes and data structures.
  
2. **Performance Considerations**: When selecting an approach, consider the performance implications based on how many objects need to be created and the expected complexity of the application.

3. **Readability and Maintainability**: Choose an approach that matches the team's proficiency and the development needs. ES6 class syntax may be preferred for new applications, while legacy code may still rely on prototypes.

4. **Future Proofing**: New syntax (like ES6 classes) might be consistently optimized in modern JavaScript engines, while older prototypes may become less favored.

This benchmark provides insights into not only performance but also use cases for each method, helping engineers choose the appropriate structure for their specific needs.

Related benchmarks:

ES6 Class vs Prototype vs Object Literal vs ES6 Class extends vs ES6 Class extends twice (version: 2)

Test the speed and memory usage using 5 different techniques for constructing class objects.

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

Created: 5 months ago by: Registered User

Jump to the latest result