Benchmark: ES6 Class vs Prototype vs Object Literal 3

ES6 Class vs Prototype vs Object Literal 3 (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) vs Static Initializer Modified Properties ES6 Class vs Static Initializer Modified Properties ES6 Class (inheritance)

Created: 2 years ago by: Guest

Go 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);
}
Object.setPrototypeOf(Point2b.prototype, Point2.prototype);
//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: {add(point) {
		return new Point7(this.x + point.x, this.y + point.y);
	}}.add},
	sub: { ...basePropertyDescriptor, value: {sub(point) {
		return new Point7(this.x - point.x, this.y - point.y);
	}}.sub}
});

var Point7b = class Point7b extends Point7 {}

Object.defineProperties(Point7b.prototype, {
	addb: { ...basePropertyDescriptor, value: {addb(point) {
		return new Point7b(this.x + point.x, this.y + point.y);
	}}.addb},
	subb: { ...basePropertyDescriptor, value: {subb(point) {
		return new Point7b(this.x - point.x, this.y - point.y);
	}}.subb}
});

var Point8 = class Point8 {
    static {
        Object.defineProperties(Point8.prototype, {
        	add: { ...basePropertyDescriptor, value: {add(point) {
        		return new Point8(this.x + point.x, this.y + point.y);
        	}}.add},
        	sub: { ...basePropertyDescriptor, value: {sub(point) {
        		return new Point8(this.x - point.x, this.y - point.y);
        	}}.sub}
        });
    }

	constructor(x, y){
		this.x = x;
		this.y = y;
    }
}

var Point8b = class Point8b extends Point8 {
    static {
        Object.defineProperties(Point8b.prototype, {
        	addb: { ...basePropertyDescriptor, value: {addb(point) {
        		return new Point8b(this.x + point.x, this.y + point.y);
        	}}.addb},
        	subb: { ...basePropertyDescriptor, value: {subb(point) {
        		return new Point8b(this.x - point.x, this.y - point.y);
        	}}.subb}
        });
    }
}

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);
Static Initializer Modified Properties ES6 Class
var p1 = new Point8(10, 10); var p2 = new Point8(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2);
Static Initializer Modified Properties ES6 Class (inheritance)
var p1 = new Point8b(10, 10); var p2 = new Point8b(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)
Static Initializer Modified Properties ES6 Class
Static Initializer 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 (X11; Linux x86_64; rv:128.0) Gecko/20100101 Firefox/128.0

Browser/OS: Firefox 128 on Linux

View result in a separate tab

Inline Object Literal

16.9M/s

Static Initializer Modified Properties ES6 Class

12.9M/s

Modified Properties ES6 Class

12.4M/s

ES6 Class

12.2M/s

Modified ES6 Class

12.2M/s

Function Prototype

11.7M/s

Function Prototype (inheritance)

10.7M/s

Modified Properties ES6 Class (inheritance)

9.6M/s

Modified ES6 Class (inheritance)

9.4M/s

Static Initializer Modified Properties ES6 Class (inheritance)

9.3M/s

ES6 Class (inheritance)

9.1M/s

Object Literal

6.9M/s

Spread Object Literal

941K/s

Spread Object Literal (inheritance)

557K/s

Inline Object Literal (inheritance)

179K/s

Object Literal (inheritance)

164K/s

View exact numbers

Test name	Executions per second
✓ Inline Object Literal	16,899,312 Ops/sec
Static Initializer Modified Properties ES6 Class	12,930,588 Ops/sec
Modified Properties ES6 Class	12,364,719 Ops/sec
ES6 Class	12,228,227 Ops/sec
Modified ES6 Class	12,185,928 Ops/sec
Function Prototype	11,722,101 Ops/sec
Function Prototype (inheritance)	10,665,526 Ops/sec
Modified Properties ES6 Class (inheritance)	9,641,920 Ops/sec
Modified ES6 Class (inheritance)	9,391,516 Ops/sec
Static Initializer Modified Properties ES6 Class (inheritance)	9,332,398 Ops/sec
ES6 Class (inheritance)	9,140,907 Ops/sec
Object Literal	6,893,726 Ops/sec
Spread Object Literal	940,939 Ops/sec
Spread Object Literal (inheritance)	556,690 Ops/sec
Inline Object Literal (inheritance)	179,270 Ops/sec
Object Literal (inheritance)	163,704 Ops/sec

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

LLMs can make mistakes. Check important info.