Benchmark: ES6 Class vs Prototype vs Object Literal

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

Historical Performance Data aggregated from 368 community runs

Desktop Results:

Chrome 226 runs

Object Literal

1.7M/s

ES6 Class

570K/s

Function Prototype

441K/s

Fastest: Object Literal (3.8x faster)

View exact numbers

✓ Object Literal: 1,687,215 ops/sec
• ES6 Class: 570,483 ops/sec
• Function Prototype: 441,062 ops/sec

Firefox 69 runs

Object Literal

950K/s

ES6 Class

572K/s

Function Prototype

549K/s

Fastest: Object Literal (1.7x faster)

View exact numbers

✓ Object Literal: 949,503 ops/sec
• ES6 Class: 571,880 ops/sec
• Function Prototype: 549,336 ops/sec

Safari 24 runs

Function Prototype

4.8M/s

ES6 Class

4.6M/s

Object Literal

2.6M/s

Fastest: Function Prototype (1.9x faster)

View exact numbers

✓ Function Prototype: 4,811,319 ops/sec
• ES6 Class: 4,615,720 ops/sec
• Object Literal: 2,576,988 ops/sec

Mobile Results:

Chrome 30 runs

Object Literal

586K/s

ES6 Class

179K/s

Function Prototype

152K/s

Fastest: Object Literal (3.9x faster)

View exact numbers

✓ Object Literal: 586,020 ops/sec
• ES6 Class: 178,939 ops/sec
• Function Prototype: 151,703 ops/sec

Safari 19 runs

Function Prototype

5.4M/s

ES6 Class

5.1M/s

Object Literal

2.8M/s

Fastest: Function Prototype (2.0x faster)

View exact numbers

✓ Function Prototype: 5,436,790 ops/sec
• ES6 Class: 5,132,918 ops/sec
• Object Literal: 2,757,668 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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (iPad; CPU OS 18_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.4.2 Mobile/15E148 Safari/604.1 Brave

Browser/OS: Mobile Safari 26 on iOS 18.7

View result in a separate tab

Function Prototype

2.9M/s

ES6 Class

2.5M/s

Object Literal

1.1M/s

View exact numbers

Test name	Executions per second
✓ Function Prototype	2,899,462 Ops/sec
ES6 Class	2,454,884 Ops/sec
Object Literal	1,121,592 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares three different approaches for constructing class objects in JavaScript:

1. ES6 Class (Constructor Function)
2. Function Prototype
3. Object Literal

**Options Compared**

* The benchmark measures the speed and memory usage of each approach.
* Each option is compared on a specific test case, which involves creating two `Point` objects with different coordinates, performing addition and subtraction operations using these objects.

**Pros and Cons of Each Approach**

1. **ES6 Class (Constructor Function)**:
	* Pros: Encapsulates data and behavior in a single unit, easier to read and maintain.
	* Cons: May have overhead due to the syntax and the need for explicit `this` binding.
2. **Function Prototype**:
	* Pros: Lightweight, fast, and flexible. Can be used as a mixin or inheritance mechanism.
	* Cons: Requires manual management of prototype chaining and method implementation.
3. **Object Literal**:
	* Pros: Minimalist, concise, and often preferred for simple objects.
	* Cons: May lack encapsulation and behavior organization, requires explicit property access.

**Library Used**

There is no library explicitly mentioned in the benchmark. However, the `Point` class definition uses a common pattern for prototypal inheritance, where methods are defined on the prototype object rather than an instance.

**Special JS Feature/ Syntax**

The benchmark uses ES6 features such as classes (ES6 Class), function prototypes (Function Prototype), and template literals (Object Literal). These features provide concise syntax for creating objects, but may not be compatible with older browsers or environments that don't support them.

**Other Alternatives**

If you need to compare other approaches for constructing class objects in JavaScript, consider the following alternatives:

* **Prototype Chain**: Instead of using a constructor function, you can create a prototype chain by setting up an object as a prototype and then referencing it from another object.
* **Class Factory Functions**: Use a factory function to create instances of a class. This approach provides a balance between encapsulation and flexibility.
* **Object-Oriented Frameworks**: Utilize JavaScript frameworks like React, Angular, or Vue.js, which provide built-in support for classes and object-oriented programming.

Keep in mind that each approach has its trade-offs, and the best choice depends on your specific use case, performance requirements, and personal preference.

ES6 Class vs Prototype vs Object Literal (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`

Created: 4 years ago by: Guest

Go to the latest result

ES6 Class

Function Prototype

Object Literal

Historical Performance Data aggregated from 368 community runs

Desktop Results:

Chrome 226 runs

Firefox 69 runs

Safari 24 runs

Mobile Results:

Chrome 30 runs

Safari 19 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

ES6 Class vs Prototype vs Object Literal (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

Created: 4 years ago by: Guest

Go to the latest result

ES6 Class

Function Prototype

Object Literal

Historical Performance Data aggregated from 368 community runs

Desktop Results:

Chrome 226 runs

Firefox 69 runs

Safari 24 runs

Mobile Results:

Chrome 30 runs

Safari 19 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`