Benchmark: ES6 Class vs Prototype vs Object Literal n moar

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

anonymous class

const Point = class {
	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);

 
const Point = class {    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);

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
anonymous class

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 112 on Windows

View result in a separate tab

Test name	Executions per second
ES6 Class	337743.0 Ops/sec
Function Prototype	313252.7 Ops/sec
Object Literal	1400763.2 Ops/sec
anonymous class	342265.8 Ops/sec

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

Let's break down what is being tested in the provided JSON benchmark.

Benchmark Overview

The test measures the speed and memory usage of constructing class objects using three different approaches:

ES6 Class: Defining classes using the class keyword.
Function Prototype: Using functions to create methods on the prototype chain.
Object Literal: Creating an object literal with method definitions.

Approach Comparison

Each approach has its pros and cons:

ES6 Class: Pros:
- Encourages encapsulation and organization of code using classes.
- Can lead to better code readability and maintainability.
Cons:
- May require more boilerplate code, especially for simple methods.
- Can be slower due to the overhead of creating a class instance.
Function Prototype: Pros:
- Can be faster since it doesn't create an instance or use the class keyword.
- Allows for more flexibility in method definitions and names.
Cons:
- Requires explicit method calls using prototype and this.
- May lead to less readable code, especially for complex methods.
Object Literal: Pros:
- Can be faster since it doesn't create an instance or use the class keyword.
- Allows for concise definition of simple objects with limited method complexity.
Cons:
- Limited expressiveness and maintainability due to its simplicity.
- May not fit well with larger, more complex applications.

Library Usage

None of the tests explicitly use external libraries. However, some might use built-in library functions or methods (e.g., String.prototype.replace()).

Special JS Features/Syntax

This benchmark does not explicitly test any special JavaScript features or syntax. It only focuses on the differences in constructing class objects using the three approaches.

Alternatives

Other alternatives to these approaches include:

Constructor Functions: Using functions that take a single argument and return an object with this set as a property (e.g., function Point(x, y) { this.x = x; this.y = y; }).
Inheritance Patterns: Using other inheritance patterns like module pattern or class inheritance (e.g., creating a base class and extending it).

These alternatives are not directly related to the specific construction of class objects but can be used in other contexts for building classes and objects in JavaScript.

LLMs can make mistakes. Check important info.

Let's break down what is being tested in the provided JSON benchmark.

**Benchmark Overview**

The test measures the speed and memory usage of constructing class objects using three different approaches:

1. **ES6 Class**: Defining classes using the `class` keyword.
2. **Function Prototype**: Using functions to create methods on the prototype chain.
3. **Object Literal**: Creating an object literal with method definitions.

**Approach Comparison**

Each approach has its pros and cons:

* **ES6 Class**: Pros:
	+ Encourages encapsulation and organization of code using classes.
	+ Can lead to better code readability and maintainability.
* Cons:
	+ May require more boilerplate code, especially for simple methods.
	+ Can be slower due to the overhead of creating a class instance.
* **Function Prototype**: Pros:
	+ Can be faster since it doesn't create an instance or use the `class` keyword.
	+ Allows for more flexibility in method definitions and names.
* Cons:
	+ Requires explicit method calls using `prototype` and `this`.
	+ May lead to less readable code, especially for complex methods.
* **Object Literal**: Pros:
	+ Can be faster since it doesn't create an instance or use the `class` keyword.
	+ Allows for concise definition of simple objects with limited method complexity.
* Cons:
	+ Limited expressiveness and maintainability due to its simplicity.
	+ May not fit well with larger, more complex applications.

**Library Usage**

None of the tests explicitly use external libraries. However, some might use built-in library functions or methods (e.g., `String.prototype.replace()`).

**Special JS Features/Syntax**

This benchmark does not explicitly test any special JavaScript features or syntax. It only focuses on the differences in constructing class objects using the three approaches.

**Alternatives**

Other alternatives to these approaches include:

* **Constructor Functions**: Using functions that take a single argument and return an object with `this` set as a property (e.g., `function Point(x, y) { this.x = x; this.y = y; }`).
* **Inheritance Patterns**: Using other inheritance patterns like module pattern or class inheritance (e.g., creating a base class and extending it).

These alternatives are not directly related to the specific construction of class objects but can be used in other contexts for building classes and objects in JavaScript.

Related benchmarks:

ES6 Class vs Prototype vs Object Literal n moar (version: 0)

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

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

Created: one year ago by: Guest

Jump to the latest result