Benchmark: ES6 Class vs Prototype vs Object Literal vs Object & Functions [rW@B8]

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

Object & Functions

function Point(x, y) {
	return {
      	x, 
      	y, 
    }  
}

function add(a, b) {
	return Point(a.x + b.x, a.y + b.y);
}

function sub(a, b) {
	return Point(a.x - b.x, a.y - b.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,     }  }​function add(a, b) {    return Point(a.x + b.x, a.y + b.y);}​function sub(a, b) {    return Point(a.x - b.x, a.y - b.y);}​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
Object & Functions

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; rv:121.0) Gecko/20100101 Firefox/121.0

Browser/OS: Firefox 121 on Windows

View result in a separate tab

Test name	Executions per second
ES6 Class	891463.4 Ops/sec
Function Prototype	833396.6 Ops/sec
Object Literal	1348489.8 Ops/sec
Object & Functions	245927984.0 Ops/sec

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

Let's break down the benchmark and its test cases.

Benchmark Overview

The benchmark compares the performance of four different techniques for constructing values and calling functions on them:

ES6 Class: Using classes to create objects with methods.
Function Prototype: Adding methods to a function using prototypes.
Object Literal: Creating objects using literal syntax.
Object & Functions: Combining objects with functions.

Options Compared

Each test case uses one of the above techniques, and their performance is compared across different browsers (Firefox 121) and devices (Desktop).

Pros and Cons of Each Approach

ES6 Class:
- Pros: Encapsulation, clear structure, and readability.
- Cons: Overhead due to class creation and method invocation.
Function Prototype:
- Pros: Lightweight, flexible, and easy to implement.
- Cons: Method invocation overhead due to function lookup.
Object Literal:
- Pros: Concise, efficient, and widely supported.
- Cons: Lack of encapsulation, making it harder to manage complexity.
Object & Functions:
- Pros: Combines the benefits of objects and functions, offering flexibility.
- Cons: Can lead to unnecessary complexity if not implemented carefully.

Library/Function Used

None of the test cases use a specific JavaScript library or framework.

Special JS Feature/Syntax

No special JavaScript features or syntax are used in the benchmark. The focus is on comparing different coding styles and their performance impact.

Other Alternatives

If you're interested in exploring alternative approaches, consider:

Constructor Functions: Similar to classes but with a more functional programming style.
Prototypal Inheritance: Using prototypes for inheritance instead of classes or function prototypes.
Closures: Creating functions that have access to their own scope and can be used as objects.

Keep in mind that these alternatives may have different performance characteristics, trade-offs, and use cases compared to the techniques tested in this benchmark.

In conclusion, this benchmark provides a straightforward comparison of four coding styles, offering insights into the performance implications of each approach. By understanding the pros and cons of each technique, developers can make informed decisions about which style to use depending on their specific needs and requirements.

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Overview**

The benchmark compares the performance of four different techniques for constructing values and calling functions on them:

1. **ES6 Class**: Using classes to create objects with methods.
2. **Function Prototype**: Adding methods to a function using prototypes.
3. **Object Literal**: Creating objects using literal syntax.
4. **Object & Functions**: Combining objects with functions.

**Options Compared**

Each test case uses one of the above techniques, and their performance is compared across different browsers (Firefox 121) and devices (Desktop).

**Pros and Cons of Each Approach**

1. **ES6 Class**:
	* Pros: Encapsulation, clear structure, and readability.
	* Cons: Overhead due to class creation and method invocation.
2. **Function Prototype**:
	* Pros: Lightweight, flexible, and easy to implement.
	* Cons: Method invocation overhead due to function lookup.
3. **Object Literal**:
	* Pros: Concise, efficient, and widely supported.
	* Cons: Lack of encapsulation, making it harder to manage complexity.
4. **Object & Functions**:
	* Pros: Combines the benefits of objects and functions, offering flexibility.
	* Cons: Can lead to unnecessary complexity if not implemented carefully.

**Library/Function Used**

None of the test cases use a specific JavaScript library or framework.

**Special JS Feature/Syntax**

No special JavaScript features or syntax are used in the benchmark. The focus is on comparing different coding styles and their performance impact.

**Other Alternatives**

If you're interested in exploring alternative approaches, consider:

1. **Constructor Functions**: Similar to classes but with a more functional programming style.
2. **Prototypal Inheritance**: Using prototypes for inheritance instead of classes or function prototypes.
3. **Closures**: Creating functions that have access to their own scope and can be used as objects.

Keep in mind that these alternatives may have different performance characteristics, trade-offs, and use cases compared to the techniques tested in this benchmark.

Related benchmarks:

ES6 Class vs Prototype vs Object Literal vs Object & Functions [rW@B8] (version: 0)

Test the speed and memory usage using 4 different techniques for constructing values and calling functions on them.

Comparing performance of: ES6 Class vs Function Prototype vs Object Literal vs Object & Functions

Created: one year ago by: Registered User

Jump to the latest result