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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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: one month 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 6 months ago):

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

ES6 Class

Function Prototype

Object Literal

Object Literal & Function

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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