Benchmark: ES6 Class vs Prototype vs Object Literal vs Function vs Function with object destructuring

ES6 Class vs Prototype vs Object Literal vs Function vs Function with object destructuring (version: 2)

Test the speed and memory usage using 4 different techniques for constructing class objects (or rather calling functions).

Comparing performance of: ES6 Class vs Function Prototype vs Object Literal vs Basic function vs Basic functions with object destructuring

Created: one year ago by: Registered User

Jump to the latest result

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

Basic function

function Point(x, y){
	return {
      	x, 
      	y, 
    };
}
const add = (pointa, pointb) =>({ x: pointa.x + pointb.x, y: pointb.y + pointb.y });
const sub = (pointa, pointb) =>({ x: pointa.x - pointb.x, y: pointa.y - pointb.y });
var p1 = Point(10, 10);
var p2 = Point(10, -10);
var sum = add(p1, p2);
var dif = sub(p1, p2);

 
function Point(x, y){    return {        x,         y,     };}const add = (pointa, pointb) =>({ x: pointa.x + pointb.x, y: pointb.y + pointb.y });const sub = (pointa, pointb) =>({ x: pointa.x - pointb.x, y: pointa.y - pointb.y });var p1 = Point(10, 10);var p2 = Point(10, -10);var sum = add(p1, p2);var dif = sub(p1, p2);

Basic functions with object destructuring

function Point(x, y){
	return {
      	x, 
      	y, 
    };
}
const add = ({ x:xa, y:ya }, { x:xb, y:yb }) =>({ x: xa + xb, y: ya + yb });
const sub = ({ x:xa, y:ya }, { x:xb, y:yb }) =>({ x: xa - xb, y: ya - yb });
var p1 = Point(10, 10);
var p2 = Point(10, -10);
var sum = add(p1, p2);
var dif = sub(p1, p2);

 
function Point(x, y){    return {        x,         y,     };}const add = ({ x:xa, y:ya }, { x:xb, y:yb }) =>({ x: xa + xb, y: ya + yb });const sub = ({ x:xa, y:ya }, { x:xb, y:yb }) =>({ x: xa - xb, y: ya - yb });var p1 = Point(10, 10);var p2 = Point(10, -10);var sum = add(p1, p2);var dif = sub(p1, 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
Basic function
Basic functions with object destructuring

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/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15

Browser/OS: Safari 17 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
ES6 Class	3524369.0 Ops/sec
Function Prototype	4096837.5 Ops/sec
Object Literal	2365982.8 Ops/sec
Basic function	65396164.0 Ops/sec
Basic functions with object destructuring	63556236.0 Ops/sec

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

Let's dive into the world of JavaScript microbenchmarks and explore what's being tested in this benchmark.

The test cases compare four different approaches to constructing class objects or functions: ES6 Classes, Function Prototypes, Object Literals with functions, and Basic Functions with object destructuring. The goal is to determine which approach is faster and more memory-efficient for these specific use cases.

ES6 Class

In the ES6 Class approach, we have a Point constructor that takes two arguments, x and y, and returns an instance of the class. We also define two methods, add and sub, which create new instances of the Point class with modified coordinates.

Pros:

Easy to read and understand, as it follows a traditional class-based approach.
Can be more intuitive for developers who are familiar with object-oriented programming.

Cons:

Creates multiple instances of the Point class during method calls, leading to increased memory usage.
Might lead to slower performance due to the overhead of creating new objects.

Function Prototype

In this approach, we define a Point function that takes two arguments, x and y, and returns an object with properties for x and y. We also define two methods, add and sub, as functions on the Point prototype.

Pros:

Reduces memory usage by sharing the same instance of the Point class.
Can be faster than ES6 Classes due to reduced overhead from creating new objects.

Cons:

Might be less intuitive for developers who are not familiar with function prototypes or object methods.
Can lead to tighter coupling between the Point function and its methods, making it harder to modify or extend.

Object Literal

In this approach, we define a Point object literal that takes two arguments, x and y, and returns an object with properties for x and y. We also define two functions, add and sub, which are attached to the same instance of the Point object.

Pros:

Very concise and easy to read, as it follows a traditional object literal syntax.
Can be fast due to reduced overhead from creating new objects.

Cons:

Might lead to slower performance if the add and sub functions modify the x and y properties of the same instance, leading to shared state.

Basic Functions with Object Destructuring

In this approach, we define two separate functions, add and sub, which take a Point object as an argument and return a new Point object with modified coordinates. We use object destructuring to extract the x and y properties from the input object.

Pros:

Reduces coupling between the Point function and its methods, making it easier to modify or extend.
Can be fast due to reduced overhead from creating new objects.

Cons:

Might lead to slower performance if the add and sub functions are complex or perform multiple operations on the input object.

In summary, the benchmark results show that:

The Basic Functions with Object Destructuring approach is the fastest (around 236ms), followed closely by the Object Literal approach (around 243ms).
The Function Prototype approach is slower than the top two approaches (around 419-443ms), but still outperforms the ES6 Class approach (around 503-553ms).

These results suggest that the Basic Functions with Object Destructuring approach is a good choice for this specific use case, as it provides a good balance between conciseness and performance. However, the optimal approach may depend on the specific requirements and constraints of your project.

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks and explore what's being tested in this benchmark.

**ES6 Class**

In the ES6 Class approach, we have a `Point` constructor that takes two arguments, `x` and `y`, and returns an instance of the class. We also define two methods, `add` and `sub`, which create new instances of the `Point` class with modified coordinates.

Pros:

* Easy to read and understand, as it follows a traditional class-based approach.
* Can be more intuitive for developers who are familiar with object-oriented programming.

Cons:

* Creates multiple instances of the `Point` class during method calls, leading to increased memory usage.
* Might lead to slower performance due to the overhead of creating new objects.

**Function Prototype**

In this approach, we define a `Point` function that takes two arguments, `x` and `y`, and returns an object with properties for `x` and `y`. We also define two methods, `add` and `sub`, as functions on the `Point` prototype.

Pros:

* Reduces memory usage by sharing the same instance of the `Point` class.
* Can be faster than ES6 Classes due to reduced overhead from creating new objects.

Cons:

* Might be less intuitive for developers who are not familiar with function prototypes or object methods.
* Can lead to tighter coupling between the `Point` function and its methods, making it harder to modify or extend.

**Object Literal**

In this approach, we define a `Point` object literal that takes two arguments, `x` and `y`, and returns an object with properties for `x` and `y`. We also define two functions, `add` and `sub`, which are attached to the same instance of the `Point` object.

Pros:

* Very concise and easy to read, as it follows a traditional object literal syntax.
* Can be fast due to reduced overhead from creating new objects.

Cons:

* Might lead to slower performance if the `add` and `sub` functions modify the `x` and `y` properties of the same instance, leading to shared state.

**Basic Functions with Object Destructuring**

In this approach, we define two separate functions, `add` and `sub`, which take a `Point` object as an argument and return a new `Point` object with modified coordinates. We use object destructuring to extract the `x` and `y` properties from the input object.

Pros:

* Reduces coupling between the `Point` function and its methods, making it easier to modify or extend.
* Can be fast due to reduced overhead from creating new objects.

Cons:

* Might lead to slower performance if the `add` and `sub` functions are complex or perform multiple operations on the input object.

In summary, the benchmark results show that:

* The Basic Functions with Object Destructuring approach is the fastest (around 236ms), followed closely by the Object Literal approach (around 243ms).
* The Function Prototype approach is slower than the top two approaches (around 419-443ms), but still outperforms the ES6 Class approach (around 503-553ms).

Related benchmarks: