Benchmark: literals vs classes

Tests:

classes
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); } } const points = []; for(var i = 0; i < 1000; ++i) { points.push(new Point(i,i)); }
literals
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) } } const points = []; for(var i = 0; i < 1000; ++i) { points.push(Point(i,i)); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classes
literals

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 117 on Android

View result in a separate tab

Test name	Executions per second
classes	4768.9 Ops/sec
literals	4336.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark JSON.

**Benchmark Definition**
The benchmark is designed to compare two approaches: using classes and using literals (objects) with methods.

**Options Compared**

1. **Using Classes**: This approach uses JavaScript classes to define the `Point` object, which encapsulates its properties (`x`, `y`) and methods (`add`, `sub`).
2. **Using Literals (Objects)**: This approach defines an object literal with properties (`x`, `y`) and method references (`add`, `sub`).

**Pros and Cons of Each Approach**

**Using Classes**

Pros:

* Encapsulation: classes provide a natural way to bundle data and behavior together.
* Code organization: classes can organize related code in a logical structure.

Cons:

* Overhead: class creation, property access, and method invocation can incur some overhead due to the complexity of the syntax.

**Using Literals (Objects)**

Pros:

* Lightweight: object literals are simpler and more lightweight than classes.
* Flexibility: objects can be easily extended or modified by adding new properties or methods.

Cons:

* Less readable: object literals can make code harder to read, especially when dealing with complex structures.
* More verbose: using method references (`add`, `sub`) requires more code than defining them directly in the class (in this case).

**Library Usage**
In both test cases, no libraries are used. The focus is on comparing the two approaches.

**Special JS Features or Syntax**
None of the provided test cases use any special JavaScript features or syntax.

**Benchmark Preparation Code**
The preparation code is minimal and simply initializes an array `points` with 1000 elements, each containing a `Point` object (in one of the two tested approaches).

**Latest Benchmark Result**
The benchmark result shows that Chrome Mobile 117 browser executes the class-based approach approximately 10% faster than the literal-based approach.

Now, let's consider other alternatives:

1. **Using Prototypes**: Instead of classes, you could use prototypes to achieve similar behavior.
2. **Functional Programming**: You could rewrite the test cases using functional programming concepts (e.g., currying, higher-order functions).
3. **Object-Oriented Alternatives**: Depending on your specific needs, you might consider using other object-oriented alternatives, such as ES6 modules or even a different programming language.

Keep in mind that these alternatives might not directly compare to the class-based and literal approaches tested here, but they could provide interesting variations on the theme.

Related benchmarks:

literals vs classes (version: 0)

Comparing performance of: classes vs literals

Created: one year ago by: Guest

Jump to the latest result

classes

literals

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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