Benchmark: ES6 Class vs Prototype with longer chain vs Object Literal

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 with longer chain

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

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

const pointParentParent = {
	sub(point) {
      return new Point(this.x + point.x, this.y + point.y);
    }
};

Object.setPrototypeOf(pointParent, pointParentParent);
Point.prototype = pointParent;

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;}​const pointParent = {    add(point) {        return new Point(this.x + point.x, this.y + point.y);    }};​const pointParentParent = {    sub(point) {      return new Point(this.x + point.x, this.y + point.y);    }};​Object.setPrototypeOf(pointParent, pointParentParent);Point.prototype = pointParent;​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);

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 with longer chain
Object Literal

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser/OS: Firefox 115 on Ubuntu

View result in a separate tab

Test name	Executions per second
ES6 Class	755218.4 Ops/sec
Function Prototype with longer chain	526179.1 Ops/sec
Object Literal	1490133.5 Ops/sec

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

Let's break down what's being tested in this benchmark.

Benchmark Definition

The benchmark compares three different approaches to create and use an object for mathematical operations:

ES6 Class: Using the class keyword to define a class-based object.
Function Prototype with longer chain: Using function prototypal inheritance to extend the behavior of the Point function.
Object Literal: Creating an object literal with nested properties and functions.

Options being compared

The benchmark compares these three approaches in terms of performance, specifically:

The number of executions per second (measured by the "ExecutionsPerSecond" metric).

Pros and Cons of each approach:

ES6 Class:
- Pros: Encapsulates data and behavior into a single unit, easy to read and maintain.
- Cons: May have overhead due to the class definition process, and might not be as flexible as other approaches.
Function Prototype with longer chain:
- Pros: Allows for fine-grained control over inheritance and extension of functions, can be more efficient than classes.
- Cons: Can lead to complex and hard-to-maintain code if not managed carefully, may have overhead due to function lookups.
Object Literal:
- Pros: Lightweight, easy to create and extend, can be more efficient than classes or prototypal inheritance.
- Cons: May require additional boilerplate code for setup and cleanup, can lead to tight coupling between objects.

Library and its purpose

In this benchmark, the Point function is used as a library or utility function. Its purpose is to encapsulate mathematical operations (addition and subtraction) on two points in 2D space.

Special JS feature or syntax

The benchmark uses ES6 class syntax (class Point { ... }) which was introduced in ECMAScript 2015 (ES6). This syntax allows for a more concise way of defining classes, but may not be compatible with older browsers or environments that don't support it.

Other alternatives

If you wanted to rewrite this benchmark using different approaches, some alternatives could be:

Using constructor functions instead of ES6 classes.
Using Object.create() and Object.setPrototypeOf() for prototypal inheritance.
Creating a separate utility module for mathematical operations instead of embedding them in the object literal.

However, these alternatives might not offer significant performance benefits over the existing approaches, and would likely require additional setup and maintenance effort.

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Benchmark Definition**

The benchmark compares three different approaches to create and use an object for mathematical operations:

1. **ES6 Class**: Using the `class` keyword to define a class-based object.
2. **Function Prototype with longer chain**: Using function prototypal inheritance to extend the behavior of the `Point` function.
3. **Object Literal**: Creating an object literal with nested properties and functions.

**Options being compared**

The benchmark compares these three approaches in terms of performance, specifically:

* The number of executions per second (measured by the "ExecutionsPerSecond" metric).

**Pros and Cons of each approach:**

1. **ES6 Class**:
	* Pros: Encapsulates data and behavior into a single unit, easy to read and maintain.
	* Cons: May have overhead due to the class definition process, and might not be as flexible as other approaches.
2. **Function Prototype with longer chain**:
	* Pros: Allows for fine-grained control over inheritance and extension of functions, can be more efficient than classes.
	* Cons: Can lead to complex and hard-to-maintain code if not managed carefully, may have overhead due to function lookups.
3. **Object Literal**:
	* Pros: Lightweight, easy to create and extend, can be more efficient than classes or prototypal inheritance.
	* Cons: May require additional boilerplate code for setup and cleanup, can lead to tight coupling between objects.

**Library and its purpose**

In this benchmark, the `Point` function is used as a library or utility function. Its purpose is to encapsulate mathematical operations (addition and subtraction) on two points in 2D space.

**Special JS feature or syntax**

The benchmark uses ES6 class syntax (`class Point { ... }`) which was introduced in ECMAScript 2015 (ES6). This syntax allows for a more concise way of defining classes, but may not be compatible with older browsers or environments that don't support it.

**Other alternatives**

If you wanted to rewrite this benchmark using different approaches, some alternatives could be:

* Using constructor functions instead of ES6 classes.
* Using `Object.create()` and `Object.setPrototypeOf()` for prototypal inheritance.
* Creating a separate utility module for mathematical operations instead of embedding them in the object literal.

However, these alternatives might not offer significant performance benefits over the existing approaches, and would likely require additional setup and maintenance effort.

Related benchmarks:

ES6 Class vs Prototype with longer chain vs Object Literal (version: 0)

ES6 Class vs Prototype with longer chain vs Object Literal

Comparing performance of: ES6 Class vs Function Prototype with longer chain vs Object Literal

Created: one year ago by: Guest

Jump to the latest result