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: 2 years ago by: Registered User

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

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Safari 5 runs

Function Prototype

2.5M/s

ES6 Class

2.1M/s

Object Literal

1.2M/s

Fastest: Function Prototype (2.1x faster)

View exact numbers

✓ Function Prototype: 2,535,138 ops/sec
• ES6 Class: 2,141,070 ops/sec
• Object Literal: 1,231,976 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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: 2 years 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

Basic function

65.4M/s

Basic functions with object destructuring

63.6M/s

Function Prototype

4.1M/s

ES6 Class

3.5M/s

Object Literal

2.4M/s

View exact numbers

Test name	Executions per second
✓ Basic function	65,396,164 Ops/sec
Basic functions with object destructuring	63,556,236 Ops/sec
Function Prototype	4,096,838 Ops/sec
ES6 Class	3,524,369 Ops/sec
Object Literal	2,365,983 Ops/sec

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

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.

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.

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: 2 years ago by: Registered User

Go to the latest result

ES6 Class

Function Prototype

Object Literal

Basic function

Basic functions with object destructuring

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Safari 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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