Benchmark: ES6 Class vs Prototype vs Object Literal 2

ES6 Class vs Prototype vs Object Literal 2 (version: 0)

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

Comparing performance of: ES6 Class vs Function Prototype vs Object Literal vs ES6 Class (inheritance) vs Function Prototype (inheritance) vs Object Literal (inheritance) vs Inline Object Literal vs Inline Object Literal (inheritance) vs Spread Object Literal vs Spread Object Literal (inheritance) vs Modified ES6 Class vs Modified ES6 Class (inheritance) vs Modified Properties ES6 Class vs Modified Properties ES6 Class (inheritance)

Created: one year ago by: Guest

Jump to the latest result

Script Preparation code:

var Point1 = class Point1 {
	constructor(x, y){
		this.x = x;
		this.y = y;
    }

	add(point){
		return new Point1(this.x + point.x, this.y + point.y);
    }

	sub(point){
		return new Point1(this.x - point.x, this.y - point.y);
    }
}

var Point1b = class Point1b extends Point1 {
	addb(point){
		return new Point1b(this.x + point.x, this.y + point.y);
    }

	subb(point){
		return new Point1b(this.x - point.x, this.y - point.y);
    }
}

function Point2(x, y) {
	this.x = x;
	this.y = y;
}

Point2.prototype.add = function add(point){
    return new Point2(this.x + point.x, this.y + point.y);
}

Point2.prototype.sub = function sub(point){
	return new Point2(this.x - point.x, this.y - point.y);
}

function Point2b(x, y) {
	Point2.call(this, x, y);
}
Point2b.prototype = Object.create(Point2.prototype);
Point2b.prototype.constructor = Point2b;

Point2b.prototype.addb = function addb(point){
    return new Point2b(this.x + point.x, this.y + point.y);
}

Point2b.prototype.subb = function subb(point){
	return new Point2b(this.x - point.x, this.y - point.y);
}

const add = (x,y) => function add(point){
    return Point3(x + point.x, y + point.y);
}

const sub = (x,y) => function sub(point){
	return Point3(x - point.x, y - point.y);
}

function Point3(x, y){
	return {
      	x, 
      	y, 
        add: add(x,y),
        sub: sub(x,y)
    }  
}

const addb = (x,y) => function addb(point){
    return Point3b(x + point.x, y + point.y);
}

const subb = (x,y) => function subb(point){
	return Point3b(x - point.x, y - point.y);
}

function Point3b(x, y){
	return {
      	__proto__: new Point3(x, y),
        addb: addb(x,y),
        subb: subb(x,y)
    }  
}

function Point4(x, y){
	return {
      	x, 
      	y,
      	add: (point)=>Point4(x + point.x, y + point.y),
	 	sub: (point)=>Point4(x - point.x, y - point.y)
    }  
}

function Point4b(x, y){
	return {
      	__proto__: Point4(x, y),
      	addb: (point)=>Point4b(x + point.x, y + point.y),
	 	subb: (point)=>Point4b(x - point.x, y - point.y)
    }  
}

const point5common = (x, y) => ({
  	add(point){
    	return Point5(x + point.x, y + point.y);
	},
  	sub(point){
		return Point5(x - point.x, y - point.y);
	}
});

function Point5(x, y) {
	return {
		x,
    	y,
      	...point5common(x,y)
    }
}

const point5bcommon = (x,y) => ({
  	addb(point){
    	return Point5b(x + point.x, y + point.y);
	},
  	subb(point){
		return Point5b(x - point.x, y - point.y);
	}
});

function Point5b(x, y) {
	return {
		...Point5(x,y),
      	...point5bcommon(x,y)
    }
}

var Point6 = class Point6 {
	constructor(x, y){
		this.x = x;
		this.y = y;
    }
}

Point6.prototype.add = function add(point){
	return new Point6(this.x + point.x, this.y + point.y);
}
Point6.prototype.sub = function sub(point){
	return new Point6(this.x - point.x, this.y - point.y);
}

var Point6b = class Point6b extends Point6 {}

Point6b.prototype.addb = function addb(point){
	return new Point6b(this.x + point.x, this.y + point.y);
}
Point6b.prototype.subb = function subb(point){
	return new Point6b(this.x - point.x, this.y - point.y);
}

const basePropertyDescriptor = {
    configurable: true,
    enumerable: false,
    writable: true,
}

var Point7 = class Point7 {
	constructor(x, y){
		this.x = x;
		this.y = y;
    }
}

Object.defineProperties(Point7.prototype, {
	add: { ...basePropertyDescriptor, value: function add(point){
		return new Point7(this.x + point.x, this.y + point.y);
	}},
	sub: { ...basePropertyDescriptor, value: function sub(point){
		return new Point7(this.x - point.x, this.y - point.y);
	}}
});

var Point7b = class Point7b extends Point7 {}

Object.defineProperties(Point7b.prototype, {
	addb: { ...basePropertyDescriptor, value: function addb(point){
		return new Point7b(this.x + point.x, this.y + point.y);
	}},
	subb: { ...basePropertyDescriptor, value: function subb(point){
		return new Point7b(this.x - point.x, this.y - point.y);
	}}
});

Tests:

ES6 Class
var p1 = new Point1(10, 10); var p2 = new Point1(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Function Prototype
var p1 = new Point2(10, 10); var p2 = new Point2(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Object Literal
var p1 = Point3(10, 10); var p2 = Point3(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
ES6 Class (inheritance)
var p1 = new Point1b(10, 10); var p2 = new Point1b(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Function Prototype (inheritance)
var p1 = new Point2b(10, 10); var p2 = new Point2b(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Object Literal (inheritance)
var p1 = Point3b(10, 10); var p2 = Point3b(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Inline Object Literal
var p1 = Point4(10, 10); var p2 = Point4(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Inline Object Literal (inheritance)
var p1 = Point4b(10, 10); var p2 = Point4b(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Spread Object Literal
var p1 = Point5(10, 10); var p2 = Point5(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Spread Object Literal (inheritance)
var p1 = Point5b(10, 10); var p2 = Point5b(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Modified ES6 Class
var p1 = new Point6(10, 10); var p2 = new Point6(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Modified ES6 Class (inheritance)
var p1 = new Point6b(10, 10); var p2 = new Point6b(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Modified Properties ES6 Class
var p1 = new Point7(10, 10); var p2 = new Point7(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Modified Properties ES6 Class (inheritance)
var p1 = new Point7b(10, 10); var p2 = new Point7b(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ES6 Class
Function Prototype
Object Literal
ES6 Class (inheritance)
Function Prototype (inheritance)
Object Literal (inheritance)
Inline Object Literal
Inline Object Literal (inheritance)
Spread Object Literal
Spread Object Literal (inheritance)
Modified ES6 Class
Modified ES6 Class (inheritance)
Modified Properties ES6 Class
Modified Properties ES6 Class (inheritance)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Browser/OS: Chrome 116 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
ES6 Class	8440521.0 Ops/sec
Function Prototype	3838576.5 Ops/sec
Object Literal	3014909.2 Ops/sec
ES6 Class (inheritance)	8628179.0 Ops/sec
Function Prototype (inheritance)	2553583.0 Ops/sec
Object Literal (inheritance)	223234.7 Ops/sec
Inline Object Literal	3362331.5 Ops/sec
Inline Object Literal (inheritance)	226694.4 Ops/sec
Spread Object Literal	1991431.1 Ops/sec
Spread Object Literal (inheritance)	344053.5 Ops/sec
Modified ES6 Class	4185084.0 Ops/sec
Modified ES6 Class (inheritance)	4110021.5 Ops/sec
Modified Properties ES6 Class	4211643.5 Ops/sec
Modified Properties ES6 Class (inheritance)	4065578.5 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

Related benchmarks:

ES6 Class vs Prototype vs Object Literal 2 (version: 0)

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

Created: one year ago by: Guest

Jump to the latest result

ES6 Class

Function Prototype

Object Literal

ES6 Class (inheritance)

Function Prototype (inheritance)

Object Literal (inheritance)

Inline Object Literal

Inline Object Literal (inheritance)

Spread Object Literal

Spread Object Literal (inheritance)

Modified ES6 Class

Modified ES6 Class (inheritance)

Modified Properties ES6 Class

Modified Properties ES6 Class (inheritance)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):