Benchmark: ES6 Class vs Prototype vs Object Literal vs Object & Functions

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

Object Literal & Function

const add = (a, b) => ({ x: a.x + b.x, y: a.y + b.y });
const sub = (a, b) => ({ x: a.x - b.x, y: a.y - b.y });

var p1 = { x: 10, y: 10 };
var p2 = { x: 10, y: -10 };
var sum = add(p1, p2);
var dif = sub(p1, p2);

 
const add = (a, b) => ({ x: a.x + b.x, y: a.y + b.y });const sub = (a, b) => ({ x: a.x - b.x, y: a.y - b.y });​var p1 = { x: 10, y: 10 };var p2 = { x: 10, y: -10 };var sum = add(p1, p2);var dif = sub(p1, 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
Object Literal & Function

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/133.0.0.0 Safari/537.36 Edg/133.0.0.0

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
ES6 Class	842472.6 Ops/sec
Function Prototype	741919.7 Ops/sec
Object Literal	2362710.2 Ops/sec
Object Literal & Function	226168048.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 4 months ago):

Let's dive into the benchmark.

What is tested?

The benchmark tests four different approaches to constructing class objects in JavaScript:

ES6 Class: Using the class keyword to define a class, which includes methods and properties.
Function Prototype: Defining a function that returns an object with methods and properties bound to it using prototype methods (this context).
Object Literal: Creating an object literal with methods and properties defined as functions or expressions inside the object.
Object Literal & Function: Similar to the previous approach, but defining methods and properties as functions.

Options comparison

The benchmark compares these four approaches in terms of:

Speed: Measured by ExecutionsPerSecond.
Memory usage: Not explicitly mentioned, but implicit through the number of object allocations and method lookups.

Pros and Cons

ES6 Class:
- Pros: Concise syntax, easier to read and maintain.
- Cons: May incur overhead due to class creation and method invocation.
Function Prototype:
- Pros: Flexibility in defining methods and properties, can be more efficient than classes.
- Cons: Can lead to complex code and harder to read, especially with multiple inheritance.
Object Literal:
- Pros: Simple syntax, easy to understand and maintain.
- Cons: May not be as concise or readable as other approaches, lacks method invocation syntax.
Object Literal & Function:
- Pros: Combines the benefits of object literals and functions, providing flexibility in defining methods and properties.
- Cons: Syntax can be dense and hard to read, may lead to errors due to misusing this context.

Special JS feature/syntax

None mentioned explicitly, but it's worth noting that ES6 classes have some features like static members (static keyword) and class inheritance (extends), which might not be relevant in this benchmark.

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**What is tested?**

The benchmark tests four different approaches to constructing class objects in JavaScript:

1. **ES6 Class**: Using the `class` keyword to define a class, which includes methods and properties.
2. **Function Prototype**: Defining a function that returns an object with methods and properties bound to it using prototype methods (`this` context).
3. **Object Literal**: Creating an object literal with methods and properties defined as functions or expressions inside the object.
4. **Object Literal & Function**: Similar to the previous approach, but defining methods and properties as functions.

**Options comparison**

The benchmark compares these four approaches in terms of:

* Speed: Measured by `ExecutionsPerSecond`.
* Memory usage: Not explicitly mentioned, but implicit through the number of object allocations and method lookups.

**Pros and Cons**

1. **ES6 Class**:
	* Pros: Concise syntax, easier to read and maintain.
	* Cons: May incur overhead due to class creation and method invocation.
2. **Function Prototype**:
	* Pros: Flexibility in defining methods and properties, can be more efficient than classes.
	* Cons: Can lead to complex code and harder to read, especially with multiple inheritance.
3. **Object Literal**:
	* Pros: Simple syntax, easy to understand and maintain.
	* Cons: May not be as concise or readable as other approaches, lacks method invocation syntax.
4. **Object Literal & Function**:
	* Pros: Combines the benefits of object literals and functions, providing flexibility in defining methods and properties.
	* Cons: Syntax can be dense and hard to read, may lead to errors due to misusing `this` context.

**Special JS feature/syntax**

None mentioned explicitly, but it's worth noting that ES6 classes have some features like static members (`static` keyword) and class inheritance (extends), which might not be relevant in this benchmark.

Related benchmarks:

ES6 Class vs Prototype vs Object Literal vs Object & Functions (version: 0)

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

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

Created: one year ago by: Guest

Jump to the latest result